Cara Menciptakan Iklan Sticky Sidebar Suport Versi Mobile Pada Blogspot
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 ialah 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 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 menyerupai 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 kalau 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 instruksi CSS berikut, paste di atas kode </style>
#sticky-sidebar{max-width:300px}
3. Masukkan instruksi berikut diatas kode ]]></b:skin>.
@media only screen and (max-width:600px){#sticky-sidebar{max-width:300px;display:none}
4. Taruh instruksi HTML beserta Kode Iklan Adsense anda diatas instruksi </aside>
<div id='sticky-sidebar'>
<center>
Taruh instruksi iklan anda disini
</center>
5. Taruh instruksi Javascript berikut di atas instruksi </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 menyerupai ini :
@media only screen and (max-width:600px){#sticky-sidebar{max-width:300px;display:none}
Tag CSS tersebut kalau diartikan, ketika lebar layar tidak lebih 600 pixel makan iklan akan hilang (display:none), dan anda dapat memilih lebar layarnya.
Perhatikan pada instruksi yang saya warnai pada instruksi Javascript :
Nah begitulah kurang lebih cara memasang kode Iklan Sticky Sidebar yang suport versi Mobile, agak ribet ya??? kalau masih gundah untuk menerapkanya di template anda, coba komentar siapa tau saya dapat bantu. Beberapa template yang beda juga akan menghipnotis metode pemasangan.
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 ialah 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 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 menyerupai 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 kalau 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 instruksi CSS berikut, paste di atas kode </style>
#sticky-sidebar{max-width:300px}

3. Masukkan instruksi berikut diatas kode ]]></b:skin>.
@media only screen and (max-width:600px){#sticky-sidebar{max-width:300px;display:none}
4. Taruh instruksi HTML beserta Kode Iklan Adsense anda diatas instruksi </aside>
<div id='sticky-sidebar'>
<center>
Taruh instruksi iklan anda disini
</center>
</div>
5. Taruh instruksi Javascript berikut di atas instruksi </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 menyerupai ini :
@media only screen and (max-width:600px){#sticky-sidebar{max-width:300px;display:none}
Tag CSS tersebut kalau diartikan, ketika lebar layar tidak lebih 600 pixel makan iklan akan hilang (display:none), dan anda dapat memilih lebar layarnya.
Perhatikan pada instruksi yang saya warnai pada instruksi Javascript :
- Angka warna hijau adalah Jarak berhenti di "#footer-wrapper", kalau tidak tau apa ini nanti anda akan menyadarinya sehabis memasang semua kodenya.
- Angka warna merah adalah Jarak atau margin sticky dari atas, kalau 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??? kalau masih gundah untuk menerapkanya di template anda, coba komentar siapa tau saya dapat bantu. Beberapa template yang beda juga akan menghipnotis metode pemasangan.