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'> <!-- Kode iklan silahkan simpan di bawah ini --> <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.
0 Komentar