Assalamu'alaikum Wr. Wb
Kali ini Dukuntekno bakalan share tutorial cara membuat Iklan Melayang di bagian sisi halaman yang suport untuk perangkat Mobile, ini biasa disebut sebagai Iklan Sticky Sidebar. Keunggulan dari metode Sticky Sidebar ini adalah iklan akan terus nampang / tampil di layar monitor, sehingga rasio iklan yang terlihat dan klik iklan akan meningkat dari biasanya.
Saya dulu sempat mencari-cari mengenai metode ini aman atau tidak untuk diterapkan, apakah Google Adsense mengijinkan atau tidak. Sempat tanya di forum Google Product, ada beberapa yang menjawab pertanyaan saya itu dengan bahasa inggris bahwa metode ini diperbolehkan namun untuk publiser tertentu saja.
Menurut aku ya, ini boleh karena saya sendiri menggunakan Iklan Sticky Sidebar untuk beberapa blog, mulai blog bertrafik rendah hingga blog saya yang bertrafik tinggi dan sampai saat ini aman. Jikanpun tidak diperbolehkan biasanya pihak Google Adsense akan mengirim email bahwa ada pelanggaran, dan biasanya tidak langsung kena banned. Jadi patut untuk dicoba.
Seperti judulnya tutorial yang saya bagikan ini suport untuk versi mobile seperti perangkat HP, Smartphone atau sejenisnya. Karena tutorial yang umum saya temui tidak suport untuk perangkat tersebut, soalnya ketika dibuka situsnya, letak iklan yang harusnya di sidebar jika dibuka di laptop maka akan menutupi layar HP ketika dibuka di HP. Dan saya disini menggunakan versi Javascript untuk penerapanya, dan berikut tutorialnya.
Tutorial Membuat Iklan Sticky Sidebar Suport Versi Mobile Dengan Javascript Pada Blogspot
1. Buka menu editor template HTML pada blogspot anda.
2. Tambahkan baris kode CSS berikut, paste di atas kode </style>
#sticky-sidebar{max-width:300px}
3. Masukkan kode berikut diatas kode ]]></b:skin>.
@media only screen and (max-width:600px){#sticky-sidebar{max-width:300px;display:none}
4. Taruh kode HTML beserta Kode Iklan Adsense anda diatas kode </aside>
<div id='sticky-sidebar'>
<center>
Taruh kode iklan anda disini
</center>
</div>
5. Taruh kode Javascript berikut di atas kode </body>
<b:if cond='data:blog.isMobile == "true"'><b:else/>
<script type='text/javascript'>
//<![CDATA[
$(function(){if($("#sticky-sidebar").length){var t=$("#sticky-sidebar"),c=$("#sticky-sidebar").offset().top,r=$("#sticky-sidebar").height();$(window).scroll(function(){var i=$("#footer-wrapper").offset().top-r-40,s=$(window).scrollTop();if(c<s+43?t.css({position:"fixed",top:43}):t.css("position","static"),i<s){var o=i-s;t.css({top:o})}})}});
//]]>
</script>
</b:if>
6. Lalu Save
Note
Disini saya memanfaatkan tag CSS bernama @media only screen and (max-width:600px){} dan memasukkan atribut display:none yang menjadi seperti ini :
@media only screen and (max-width:600px){#sticky-sidebar{max-width:300px;display:none}
Tag CSS tersebut jika diartikan, ketika lebar layar tidak lebih 600 pixel makan iklan akan hilang (display:none), dan anda bisa menentukan lebar layarnya.
Perhatikan pada kode yang saya warnai pada kode Javascript :
- Angka warna hijau adalah Jarak berhenti di "#footer-wrapper", jika tidak tau apa ini nanti anda akan menyadarinya setelah memasang semua kodenya.
- Angka warna merah adalah Jarak atau margin sticky dari atas, jika tidak tau apa ini nanti anda akan menyadarinya setelah memasang semua kodenya.
- #sticky-sidebar : ID dari konten atau widget yang akan dibuat sticky.
- #footer-wrapper : Tentukan ID untuk membatasi fungsi sticky.
Nah begitulah kurang lebih cara memasang kode Iklan Sticky Sidebar yang suport versi Mobile, agak ribet ya??? jika masih bingung untuk menerapkanya di template anda, coba komentar siapa tau saya bisa bantu. Beberapa template yang beda juga akan mempengaruhi metode pemasangan.