Skip to main content

Cara Membuat Sticky Ads Manual Di Blogger


Centangdua - Hallo sobat centangdua kali ini mimin akan membagikan tutorial mengenai Cara Pasang Iklan Sticky pada Blogger Secara Manual untuk Desktop dan Mobile. Yang kita tahu iklan sticky adalah iklan yang melayang di atas ataupun dibawah postingan kita. Iklan sticky pada umumnya muncul ketika kita mengaktifkan auto ads Adsense Namun Iklan sticky yang menggunakan auto ads jarang muncul ketika artikel kita kurang relevan. Nah, Bagaimana cara membuat iklan sticky muncul di setiap postingan kita tanpa mengandalkan auto ads. Simak tutorialnya di bawah ini :

Apa itu iklan Sticky?

Iklan Sticky atau iklan melayang adalah format iklan yang menempel pada pada layar pengguna. Iklan sticky sangat relevan untuk postingan karena posisi iklan yang mengikuti layar utama tanpa pengaruh scroll. Kekuatan Iklan sticky pada peluang klik ads pun sangat besar, karena iklan tidak bisa di scroll. Namun kelemahan iklan sticky yaitu iklan yang bisa dengan mudah di close.

Iklan sticky sangat berpengaruh pada CTR ( Rasio klik tayang ) pada adsense dimana CTR yang tinggi merupakan pertanda bahwa pengguna merasa iklan sangat relevan untuk ditayangkan. Banyak tutorial tentang cara memasang iklan melayang namun jarang ada yang work secara optimal. Disini mimin akan menjelaskan bagaimana cara memasang iklan sticky secara optimal di Blogger.

Langkah-langkah pemasangan iklan sticky

  1. Login pada Blogger
  2. Klik menu Theme
  3. Klik Edit Theme
  4. Cari kode yang diinginkan menggunakan CTRL+F
  5. Tempelkan kode yang diperintahkan

Cara memasang iklan Sticky untuk Dekstop

  • Tempelkan script code berikut ini tepat dibawah kode </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='ca-pub-xxxxxxxxx' data-ad-slot='xxxxxxx' 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>
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>


Baca juga :Template safelink kompi V4 Responsif
  • Ganti kode ca-pub-xxxxxxxxx dengan id google adsense kalian
  • Ganti kode xxxxxxxx dengan id unit iklan (disarankan Unit iklan banner).
  • Disarankan membuat unit iklan baru berukuran tetap (bukan responsif) berukuran Lebar : 728 dan tinggi 90
  • Menggunakan ukuran custom (tetap) supaya iklan tetap relevan dan tidak mengganggu pengguna.
  • Setelah semuanya selesai dan dirasa sudah benar klik save pada theme.

Cara memasang iklan sticky untuk Mobile

  • Tempelkan kode berikut ini tepat diatas kode </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>

  • Kemudian, Tempelkan kode berikut tepat di atas kode </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='ca-pub-xxxxxxxxxxx' data-ad-slot='xxxxxxxxx' 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);
//]]>


  • Ganti kode ca-pub-xxxxxxxxx dengan id google adsense kalian
  • Ganti kode xxxxxxxx dengan id unit iklan (disarankan Unit iklan banner).
  • Disarankan membuat unit iklan baru berukuran tetap (bukan responsif) berukuran Lebar : 320 dan tinggi 50
  • Menggunakan ukuran custom (tetap) supaya iklan tetap relevan dan tidak mengganggu pengguna.
  • Setelah semuanya selesai dan dirasa sudah benar klik save pada theme.
Jika sudah selesai semua dan sudah berhasil di save theme kalian bisa langsung cek pada blog kalian. dan iklan sudah sudah melayang-layang di blog kalian hhee. Semoga tips dari saya bermanfaat. Jangan lupa tinggalkan jejak dengan cara komentar di bawah dan tulis review kalian tentang tutorial Cara Membuat Sticky Ads Manual Di Blogger. Supaya jika ada kesalahan bisa dibantu perbaiki. See you for next post :)

Newest Post
Adss Policy: Mohon maaf atas iklan yang tayang di blog ini jika tidak berkenaan, karena itu di luar dari tanggung jawab publiser.
Buka Komentar
Tutup Komentar