Membuat Iklan Sticky Pada Template Non Amp Ala Amp-Sticky-Ad

Iklan sticky untuk template Non AMP ini akan muncul sesudah pengunjung men-scroll atau menggulung halaman ke bawah yang ketinggian kemunculannya dapat kita atur pada javascript.

Untuk menutup iklan juga sama ibarat pada amp-sticky-ad dengan klik tombol close di sisi kanan atas iklan dengan memakai javascript onclick event.

Nah bagi yang sebelumnya memakai iklan sticky atau iklan melayang atau istilahnya iklan floating yang kadang susah ditutup sehingga menghalangi layar yang menjadikan pengunjung kesulitan membaca isi artikel, sebaiknya coba beralih ke iklan sticky ini supaya akun Anda menjadi lebih aman. Karena kita tahu bahwa iklan yang menutupi laman tidak diperbolehkan yang dapat menjadikan akun menjadi tidak aman.

Untuk demo iklan sticky pada template Non AMP ala amp-sticky-ad ini silahkan coba pada widget JSFiddle berikut ini, silahkan scroll di dalam widgetnya untuk melihat penampakan iklannya.

Jika Anda ingin mencobanya, silahkan ikuti langkahnya berikut ini.

Silahkan simpan arahan CSS berikut di atas arahan </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>

Kode di atas tidak ditampilkan di halaman static, halaman error, dan halaman hasil pencarian dan ditampilkan hanya di versi mobile.

Kemudian silahkan simpan arahan berikut di atas arahan </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 -->
 
 <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 sasaran = document.getElementById('sticky-ad');
   if(window.pageYOffset > 300){
    target.style.bottom = "0";
   }
 },false);
 //]]>
 </script>
 </b:if>

Angka 300 untuk mengatur ketinggian kemunculan iklan, silahkan sesuaikan dengan harapan Anda misal menggantinya dengan 100 atau angka lainnya.

Iklan di atas tidak ditampilkan di halaman static, halaman error, dan halaman hasil pencarian dan ditampilkan hanya di versi mobile. Silahkan gunakan unit iklan horizontal dan pilih iklan mobile 320x50 atau 320x100.

Selesai...selamat mencoba dan semoga bermanfaat.

Sumber https://www.kompiajaib.com/

Share this post