Cara Membuat Iklan Sticky Bawah Manual Untuk Blog Versi Web

Santos el Salam

25 Juni 2020

Mendapatkan penghasilan dari google adsense memang impian bagi sebagian blogger. Meski tampaknya mudah, namun ternyata butuh perjuangan dan kesabaran ekstra untuk dapat merasakan manisnya mendapatkan gajian dari google adsense. Selain menyajikan artikel berkualitas, Kita pun mesti aktif dalam bereksperimen untuk mengelola jenis unit iklan dan penempatannya agar tampilannya di blog anda dapat menghasilkan seperti yang diinginkan. 

Ada beberapa jenis variasi iklan yang ditawarkan google adsense kepada setiap publishernya untuk dapat meningkatkan pendapatan mereka. Salah satu jenis iklan yang cukup berpotensi dalam meningkatkan nilai rasio klik adalah jenis iklan sticky atau iklan menempel. Jenis iklan ini sering kita jumpai saat mengunjungi situs-situs blog menggunakan handphone atau smartphone. Iklan ini biasanya muncul di tepi layar handphone bagian atas atau pun bawah tergantung pada penempatannya. 

Iklan jenis ini memang memiliki keunikan tersendiri di bandingkan dengan jenis-jenis iklan yang lain. Iklan ini akan tetap muncul di tepi layar saat pengunjung menggulir halaman ke atas ataupun sebaliknya sehingga potensi klik pun pastinya lebih besar terjadi. Bagi anda yang tidak ingin ribet, jenis iklan ini telah tersedia pada unit iklan otomatis sehingga anda tinggal mengaturnya untuk tampil di blog anda. Iklan ini memang hanya muncul pada versi mobile sehingga tidak bakalan muncul jika dibuka lewat komputer. 

Namun jika anda ingin berkreasi sendiri, anda juga dapat membuatnya secara manual dengan meletakkan beberapa kode script untuk mengatur kemunculan iklan agar tampilannya menjadi sticky seperti yang diinginkan. Sama seperti pada iklan otomatis, iklan ini juga akan tetap muncul dan menempel pada layar saat pengunjung men-scroll atau menggulung halaman blog. Jika tertarik memasangnya, anda dapat membaca postingan berikut ini: 

• Cara Membuat Iklan Anchor Sticky di Layar Bawah Mobile Secara Manual

Nah sekarang pertanyaannya dapatkah jenis iklan seperti ini dipasang untuk versi web atau desktop?. Jawabannya bisa dan caranya juga cukup mudah. Kita dapat membuatnya secara manual dengan tetap mematuhi ketentuan yang diperbolehkan agar tidak melanggar ketentuan layanan (TOS) publisher adsense. Anda tidak perlu khawatir karena iklan ini tidak menutupi halaman atau tumpang tindih dengan konten sehingga pengunjung tetap nyaman dan akun adsense anda pun akan tetap aman. Tampilannya kurang lebih seperti berikut ini:

Cara Memasang Iklan Sticky Secara Manual Untuk Versi Web

1. Buka akun blogger anda.

2. Pilih menu tema dan klik edit html.

3. Cari kode </body> dan letakkan kode berikut ini di atasnya:

<b:if cond='data:blog.pageType not in {&quot;static_page&quot;,&quot;error_page&quot;} and data:blog.isMobileRequest == &quot;false&quot; and not data:blog.searchQuery'><style>/*<![CDATA[mankoin.com*/.sticky-ad{display:none;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;overflow:visible;position:sticky;text-align:center;left:0;width:100%;z-index:999;max-height:100px;background-image:none;background-color:#fff;box-shadow:0 0 5px 0 rgba(0,0,0,.2);margin-bottom:0;padding-top:4px;transition:all .4s ease-in-out;max-width:100%;height:100px;bottom:0;-webkit-animation:fade-in 1.2s cubic-bezier(.39,.575,.565,1.000) both;animation:fade-in 1.2s cubic-bezier(.39,.575,.565,1.000) both}@-webkit-keyframes fade-in{0%{bottom:-100px}100%{bottom:0}}@keyframes fade-in{0%{bottom:-100px}100%{bottom:0}}.sticky-ad-close-button{position:absolute;width:28px;height:28px;top:-28px;right:0;background-size:24px 24px;background-position:2px;background-color:#fff;background-repeat:no-repeat;box-shadow:0 -1px 1px 0 rgba(0,0,0,.2);border:0;border-radius:12px 0 0 0;cursor:pointer;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000000' d='M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z' /%3E%3C/svg%3E");padding:0}/*]]>*/</style><div class='sticky-ad' id='sticky-ad'>

<-- letakkan kode iklan anda disini -->

<button aria-label='Close this ad' class='sticky-ad-close-button' onclick='this.parentElement.style.position=&apos;relative&apos;;this.style.display=&apos;none&apos;;'/></div><script>//<![CDATA[ function stickyAd(){var e=document.getElementById("sticky-ad");300<window.pageYOffset&&(e.style.display="block",window.removeEventListener("scroll",stickyAd))}window.addEventListener("scroll",stickyAd);//]]></script></b:if> 

Keterangan: 

• Ganti "letakkan kode iklan anda disini" dengan kode unit iklan anda. Gunakan format iklan display dengan ukuran tetap yakni 728 X 90 atau bisa juga 790 x 90. 
• Dengan pengaturan di atas, iklan tidak akan muncul pada halaman statis, halaman hasil pencarian, dan halaman error sehingga lebih aman. 

5. Silahkan simpan kembali template anda. 

Baca juga: Cara Membuat Iklan Melayang Responsive di Layar Bawah Blog

Demikianlah Cara Membuat Iklan Sticky Bawah Manual Untuk Blog Versi Web. Jenis iklan ini diyakini cukup ampuh dalam meningkatkan CTR (rasio klik-tayang), sehingga harapannya penghasilan juga akan meningkat seperti yang diharapkan. Semoga bermanfaat.

Labels: Blogging

Thanks for reading Cara Membuat Iklan Sticky Bawah Manual Untuk Blog Versi Web. Please share...!

Facebook

Twitter