Memasang Sticky Ads di Blogger Secara Manual?

Mfaqih.com - Sticky Ads merupakan format iklan banner yang melayang atau mengambang pada layar, serta menempel atau lengket pada tepi layar sebuah situs/blog yang terpisah dengan konten dan dapat di tutup dengan mudah. Biasanya terletak di pinggir kanan, atau pinggir kiri, serta bisa juga terletak di ujung bawah atau diujung atas. Dengan demikian Sticky Ads tidak boleh tumpang tindih secara permanen dengan konten maupun iklan lainnya.

Nah, buat teman-teman sekalian yang tertarik dan ingin mencoba pemasangan Sticky Ads ini di blog kalian, langsung saja simak tutorial singkat dibawah ini:

1. Untuk Tampilan Desktop

Login ke dashboard Blogger kalian,
Ke menu Tema > Edit HTML,
Letakan kode dibawah ini, tepat diatas tag penutup </body>. Gunakan CTRL+F untuk mempercepat pencarian,

<b:if cond='data:blog.pageType not in {"static_page","error_page"} and data:blog.isMobileRequest == "false" 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'><ins class='adsbygoogle' data-ad-client='ID Google Adsense Kalian' data-ad-slot='ID Unit iklan kalian' style='display:inline-block;width:970px;height:90px'/><script>(adsbygoogle = window.adsbygoogle || []).push({});</script><button aria-label='Close this ad' class='sticky-ad-close-button' onclick='this.parentElement.style.position='relative';this.style.display='none';'/></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>

Ganti 'ID Google Adsense Kalian' & 'ID Unit Iklan Kalian' yang mimin tandai warna merah diatas, dengan ID GA kalian dan ID Unit Iklan Kalian,

Disarankan menggunakan unit iklan 728x90,
Simpan Tema,
Done.

2. Untuk Tampilan Mobile

Masih dalam mode Edit HTML,
Salin dan Paste kode dibawah ini, diatas tag penutup </head>,

<b:if cond='data:blog.pageType not in {"static_page","error_page"} and data:blog.isMobileRequest == "true" and not data:blog.searchQuery'> <style> /*<![CDATA[*/ .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: -104px; left: 0; width: 100%; z-index: 999; max-height: 104px; background-image: none; background-color: #fff; box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2); margin-bottom: 0; padding-top: 4px; transition: all .4s ease-in-out; } .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: #fff; background-repeat: no-repeat; box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.2); border: none; border-radius: 12px 0 0 0; cursor: pointer; } .sticky-ad-close-button:before { position: absolute; content: ""; top: -20px; right: 0; left: -20px; bottom: 0; } * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } :active, :focus { outline: 0 } /*]]>*/ </style> </b:if>

Selanjutnya salin dan paste kode dibawah ini, diatas tag penutup </body>,

<b:if cond='data:blog.pageType not in {"static_page","error_page"} and data:blog.isMobileRequest == "true" and not data:blog.searchQuery'> <div class='sticky-ad' id='sticky-ad'>  <ins class='adsbygoogle' data-ad-client='ID Google Adsense Kalian' data-ad-slot='ID Unit iklan kalian' style='display:inline-block;width:320px;height:50px'/><script>(adsbygoogle = window.adsbygoogle || []).push({});</script> <button aria-label='Close this ad' class='sticky-ad-close-button' onclick='document.getElementById('sticky-ad').style.display='none';'/> </div> <script> //<![CDATA[ window.addEventListener("scroll",function(){ var target = document.getElementById('sticky-ad'); if(window.pageYOffset > 300){ target.style.bottom = "0"; } },false); //]]> </script> </b:if>

Rubah 'ID Google Adsense Kalian' & 'ID Unit Iklan Kalian' yang mimin tandai warna merah diatas dengan ID GA Kalian & ID Unik Iklan milik kalian,
Gunakan unit iklan dengan ukuran 320x50 untuk mobile,
Simpan Tema
Enjoy

Well, demikian pembahasan terkait Memasang Sticky Ads di Blogger Secara Manual? pada artikel kali ini, semoga bermanfaat serta bisa menjadi referensi terbaik buat teman-teman semuanya. Jangan lupa berlangganan blog ini, guna mendapatkan update-an terbaru secara gratis.