5/5 (4)

Hallo guys dah lama tidak update tulisan terbaru, kali ini saya akan berbagi tutorial bagaimana cara membuat sticky ads seperti AMP pada blog wordpress yang Non AMP seperti yang saya gunakan pada blog saya ini. Sticky ads Non AMP ini sangat mirip dengan Sticky ads pada website AMP dimana terdapat juga tombol close pada bagian sudut kanan atas banner sticky ads ini.

Untuk jenis iklan ini sebenarnya google sudah memberikan pada auto ads di tampilan mobile tapi sayangnya tampilan tersebut sering muncul diatas, namun dengan menggunakan Sticky Ads untuk Non AMP ini kita bisa mengaturnya berada pada bagian bawah tampilan blog kita di tampilan mobile.

Pertama – tama untuk memulai silakan masukan kode CSS dibawah ini pada themes wordpress yang anda gunakan

/*<![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: 0px;
  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
}
/*]]>*/



setelah itu masuk ke ke footer.php di themes wordpress yang anda gunakan lalu masukan code dibawah ini sebelum </body>

<div class="sticky-ad" id="sticky-ad">

<a href='https://client.dewaweb.com/aff.php?aff=2127' target='_blank' title='Dewaweb'><img src='https://palembang.blog/wp-content/uploads/2019/03/dewaweb-affiliate-banner-ninja-support-468x60px.gif' alt='Dewaweb' border='0'height='50' width='350'/></a>

<button class="sticky-ad-close-button" onclick="document.getElementById('sticky-ad').style.display='none';" aria-label="Close this ad"></button>
</div>

<script>
//<![CDATA[
window.addEventListener("scroll",function(){
  var target = document.getElementById('sticky-ad');
  if(window.pageYOffset > 0){
   target.style.bottom = "0";
  }
},false);
//]]>
</script>

pada bagian kode seperti dibawah ini anda dapat menggantinya denga kode iklan banner anda atau kode dari google adsense anda

<a href='https://client.dewaweb.com/aff.php?aff=2127' target='_blank' title='Dewaweb'><img src='https://palembang.blog/wp-content/uploads/2019/03/dewaweb-affiliate-banner-ninja-support-468x60px.gif' alt='Dewaweb' border='0'height='50' width='350'/></a>

Mohon beri rating

LEAVE A REPLY

Please enter your comment!
Please enter your name here

1 × one =