Memasang Iklan Sticky di Blogger Secara Manual, Desktop & Mobile

Iklan sticky adalah format iklan banner yang melayang atau mengambang pada layar para pengunjung serta menempel atau lengket pada tepi layar sebuah situs yang terpisah dengan konten dan dapat ditutup dengan mudah. Biasanya terletak dipinggir kanan atau pinggir kiri serta bisa juga terletak di ujung bawah atau di ujung atas. dengan demikian Iklan Sticky tidak boleh tumpang tindih secara permanen dengan konten maupun unit iklan lainnya.


Manfaat menggunakan iklan format ini adalah dapat meningkatkan CTR [Rasio Klik Tayang]. Dimana CTR yang tinggi bertanda bahwa pengguna merasa iklan tersebut relevan dan berguna. Selain itu, penghasilan yang di dapat dari iklan jenis sticky tersebut jauh akan lebih meningkat daripada sebelumnya.

So, buat teman-teman yang tertarik dan ingin mencoba memasang iklan dengan format ini pada blog sobat, yuk simak tutorial singkat dibawah ini:


A. Untuk Desktop

[1]. Login ke dasboard Blogger kalian
[2]. Menu Template > Edit HTML
[3]. Salin dan paste kode dibawah ini, diatas tag penutup </body>

<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: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' data-ad-slot='ID Unit Iklan' 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=&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>

[4]. Jangan di simpan dulu! ganti 'ID Google Adsense' dan 'ID Unit Iklan' yang mimin tandai merah diatas, dengan ID milik kalian, dari format iklan 728x90.
[5]. Simpan Tema
[6]. Enjoy


B. Untuk Mobile

[1]. Login ke dashboard Blogger kalian
[2]. Menu Template > Edit HTML
[3]. Salin dan paste kode dibawah ini, diatas tag penutup </head>

<b:if cond='data:blog.pageType not in {&quot;static_page&quot;,&quot;error_page&quot;} and data:blog.isMobileRequest == &quot;true&quot; 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>

[4]. Selanjutnya salin dan paste kode dibawah ini, diatas tag penutup </body>

<b:if cond='data:blog.pageType not in {&quot;static_page&quot;,&quot;error_page&quot;} and data:blog.isMobileRequest == &quot;true&quot; 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' data-ad-slot='ID Unit iklan' 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(&apos;sticky-ad&apos;).style.display=&apos;none&apos;;'/> </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>

[5]. Jangan disimpan dulu! Rubah 'ID Google Adsense' dan 'ID Unit Iklan' yang mimin tandai warna merah diatas, dengan ID milik kalian, dengan format iklan 320x50
[6]. Simpan Tema
[7]. Enjoy

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

Posting Komentar

0 Komentar