Cara Menciptakan Iklan Sticky Pada Blog Non Amp Ala Amp-Sticky-Ad

Iklan Sticky yakni Iklan Anchor yang tampil khusus perangkat seluler yang biasanya muncul dan melekat pada tepi layar serpihan atas seluler dikala sedang mangakses blog kita dan iklan sticky ini sanggup ditutup dengan mudah.

Untuk pengguna blog Non Amp, iklan sticky ini sanggup kita pasang di blog dengan cara mengaktifkan Auto Ads atau iklan otomatis yang sudah di lengkapi dengan fitur page-level-ads. Akan tetapi sticky ada ini kini lebih banyak tampil di sisi serpihan atas layar ponsel yang disebabkan oleh beberapa faktor dan menciptakan sisi bawah layar ponsel yang biasanya juga di daerah sticky ad ini menjadi kosong.

Dan untuk menutupi space kosong di serpihan bawah tersebut kita sanggup mengakalinya dengan cara memasang iklan sticky khusus yang akan muncul di serpihan bawah layar ponsel.

Iklan sticky untuk blog Non Amp ini akan tampil melayang di serpihan bawah layar ponsel dan sanggup di katakan sticky ad ini mempunyai tampilan sama persis dengan iklan sticky yang muncul di blog Amp. Dan untuk menciptakan iklan sticky pada blog yang memakai template Non Amp ini diharapkan derma CSS dan javascript.

Iklan sticky untuk blog Non AMP ini akan otomatis muncul dikala pengunjung men-scroll atau menggulung halaman blog ke bawah yang ketinggian kemunculannya sanggup diatur pada javascript. Dan Untuk menutup iklan ini juga sama persis dengan amp-sticky-ad yang sudah disediakan tombol close/tutup di sisi serpihan kanan atas iklan.

Baca Juga : Cara Membuat Iklan Link Tautan Adsense Dengan Banyak Tombol

Iklan sticky ala amp-sticky-ad ini berdasarkan aku lebih elegan jikalau di bandingkan dengan iklan melayang / floating ads, selain itu sticky ad ini juga tidak melanggar peraturan kebijakan adsense. Kaprikornus tidak ada salahnya jikalau sahabat mulai memakai stciky ad ala amp sticky ad ini di blog non amp yang sahabat gunakan.

Untuk demo iklan sticky pada template Non AMP ala amp-sticky-ad ini sanggup di cek dibawah ini, silahkan klik tombol demo dan scroll di dalam widgetnya untuk melihat penampakan iklannya.

Selanjutnya, jikalau sahabat trtarik untuk memasang Iklan Sticky ala amp-sticky-ad Pada Blog Non AMP silahkan simak tutorial singkatnya dibawah ini

Membuat Iklan Sticky Pada Blog Non AMP

Login ke Blogger - Template - Edit HTML - Salin instruksi CSS berikut dan simpan sebelum instruksi </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.

Selanjutnya, silahkan salin javascript berikut dan simpan sebelum instruksi </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 150 atau angka lainnya.
• Iklan di atas tidak ditampilkan di halaman static, halaman error, dan halaman hasil pencarian dan ditampilkan hanya di versi mobile.
• Silahkan ganti dengan instruksi iklan adsense. Jika error dalam penyimpanan, silahkan Parse terlebih dahulu.
• Silahkan gunakan unit iklan horizontal dan pilih iklan mobile 320x50 atau 320x100.

Terakhir, silahkan Simpan setelan template

Baca Juga : Membuat Iklan Adsense Di Dalam Postingan Dengan Pemanggil Menggunakan Javascript

Demikian tutorial cara menciptakan iklan sticky pada blog non amp ala amp-sticky-ad yang sanggup dibagikan kali ini biar bermanfaat.
Sumber https://www.pehawe.info/

Berbagi :