Membuat Banner Iklan Sticky Responsive Melayang Ala KompiAjaib

Memasang Banner Iklan Google AdSense menggunakan Teknik Pemasangan Tertentu dapat menghasilkan penempatan iklan yang tepat sasaran dan terlihat lebih menarik sehingga dapat memberikan kesan tampilan blog lebih elegan dan profesional. Salah satu type Banner Iklan yang cukup menarik dipasang adalah Iklan Sticky, yaitu jenis iklan yang diletakkan pada posisi tertentu dan bersifat tetap tidak terpengaruh dengan halaman konten blog ketika diakses oleh pengunjung. 

Tampilan dari Banner iklan ini seperti yang ada pada Blog Kompi Ajaib yang unik melayang ditengah halaman bagian bawah halaman blog disertai dengan tombol close dan tidak menutupi keseluruhan area bagian bawah blog membuat tampilan Banner Iklan ini berbeda dengan banner iklan Sticky pada umumnya. 

Jika Anda ingin mencoba memasang banner iklan Sticky ala Kompi Ajaib ini silahkan download terlebih dahulu SOURCE CODE STICKY KOMPIAJAIB. 

 
<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:-webkit-box;display:-ms-flexbox;display:flex;-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:fixed;text-align:center;bottom:0;left:50%;width:736px;z-index:995;max-height:104px;background-image:none;background-color:rgba(255,255,255,.7);box-shadow:0 0 5px 0 rgba(0,0,0,.2);margin-bottom:0;padding-top:4px;display:none;margin-left:-368px}

.sticky-ad-close-button{position:absolute;width:28px;height:28px;top:-28px;right:0;background-image:url("data:image/svg+xml;charset=utf8,%3csvg width='13' height='13' viewBox='341 8 13 13' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cg%3e%3cpath style='fill:%234F4F4F' d='M354 9.31L352.69 8l-5.19 5.19L342.31 8 341 9.31l5.19 5.19-5.19 5.19 1.31 1.31 5.19-5.19 5.19 5.19 1.31-1.31-5.19-5.19z'%3e%3c/path%3e%3c/g%3e%3c/svg%3e");background-size:13px 13px;background-position:9px;background-color:rgba(255,255,255,.7);background-repeat:no-repeat;box-shadow:0 -1px 1px 0 rgba(0,0,0,.2);border:none;border-radius:12px 12px 0 0;cursor:pointer}

/*]]>*/</style><div class='sticky-ad' id='sticky-ad'><ins class='adsbygoogle' data-ad-client='ca-pub-1012461088888888' data-ad-slot='1234567890' style='display:inline-block;width:728px;height:90px'/><script>(adsbygoogle = window.adsbygoogle || []).push({});</script><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>

Setelah source code Anda download buka dengan menggunakan Aplikasi NotePad, kemudian tempelkan kode banner iklan sticky kompiajaib pada area kode HTML Themplate yang dapat Anda akses melalui menu EDIT HTML Pada halaman Menu Tema dasboard Blogger. 


Gambar Tampilan Iklan Banner Sticky pada halaman home page dan pada halaman postingan blog


Untuk penempatannya silahkan dilakukan uji coba penempatan sendiri ya, karena lain themplate pasti lain susunan code htmlnya. Intinya pemasangan kode ini berada diarea footer  tidak jauh dari kode </body> sebagai penutup kode template. 

Gunakan Banner Iklan AdSense yang cocok dengan ukuran Banner Sticky Responsiv yaitu Iklan Size 728px x 90px dengan tipe iklan Banner Display. Bagi yang bingung atau belum atau cara membuat unit iklan pada account google Adsense dapat melihat tutorialnya pada pembahasan pemasangan Banner Iklan Stycky Browser Dekstop.

Kesimpulan:Salah satu tampilan banner iklan yang unik dan menarik adalah Sticky ala Kompi Ajaib, ukuran iklan yang tidak terlalu besar dan adanya tombol close iklan dapat dipastikan tidak akan mengganggu pengunjung dalam mengakses keseluruhan isi dari konten sebuah blog sehingga aman untuk diterapkan.