Assalamu'alaikum Wr. Wb
Kali ini Dukuntekno bakalan share tutorial cara menciptakan Iklan Melayang di bab sisi halaman yang suport untuk perangkat Mobile, ini biasa disebut sebagai Iklan Sticky Sidebar. Keunggulan dari metode Sticky Sidebar ini yaitu 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 kondusif atau tidak untuk diterapkan, apakah Google Adsense mengijinkan atau tidak. Sempat tanya di lembaga Google Product, ada beberapa yang menjawab pertanyaan saya itu dengan bahasa inggris bahwa metode ini diperbolehkan namun untuk publiser tertentu saja.
Menurut saya ya, ini boleh alasannya yaitu saya sendiri memakai Iklan Sticky Sidebar untuk beberapa blog, mulai blog bertrafik rendah hingga blog saya yang bertrafik tinggi dan hingga ketika ini aman. Jikanpun tidak diperbolehkan biasanya pihak Google Adsense akan mengirim email bahwa ada pelanggaran, dan biasanya tidak pribadi kena banned. Makara patut untuk dicoba.
Seperti judulnya tutorial yang saya bagikan ini suport untuk versi mobile ibarat 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 bila dibuka di laptop maka akan menutupi layar HP ketika dibuka di HP. Dan saya disini memakai versi Javascript untuk penerapanya, dan berikut tutorialnya.
Tutorial Membuat Iklan Sticky Sidebar Suport Versi Mobile Dengan Javascript Pada Blogspot
1. Buka hidangan editor template HTML pada blogspot anda.
2. Tambahkan baris aba-aba CSS berikut, paste di atas kode </style>
#sticky-sidebar{max-width:300px}
3. Masukkan aba-aba berikut diatas kode ]]></b:skin>.
@media only screen and (max-width:600px){#sticky-sidebar{max-width:300px;display:none}
4. Taruh aba-aba HTML beserta Kode Iklan Adsense anda diatas aba-aba </aside>
<div id='sticky-sidebar'>
<center>
Taruh aba-aba iklan anda disini
</center>
</div>
5. Taruh aba-aba Javascript berikut di atas aba-aba </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 ibarat ini :
@media only screen and (max-width:600px){#sticky-sidebar{max-width:300px;display:none}
Tag CSS tersebut bila diartikan, ketika lebar layar tidak lebih 600 pixel makan iklan akan hilang (display:none), dan anda dapat memilih lebar layarnya.
Perhatikan pada aba-aba yang saya warnai pada aba-aba Javascript :
- Angka warna hijau adalah Jarak berhenti di "#footer-wrapper", bila tidak tau apa ini nanti anda akan menyadarinya sehabis memasang semua kodenya.
- Angka warna merah adalah Jarak atau margin sticky dari atas, bila tidak tau apa ini nanti anda akan menyadarinya sehabis memasang semua kodenya.
- #sticky-sidebar : ID dari konten atau widget yang akan dibentuk 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??? bila masih gundah untuk menerapkanya di template anda, coba komentar siapa tau saya dapat bantu. Beberapa template yang beda juga akan mempengaruhi metode pemasangan.