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

Iklan Sticky merupakan Iklan Anchor iklan seluler yang melekat pada tepi layar pengguna dan sanggup ditutup dengan mudah.

Iklan anchor ditampilkan oleh AdSense pada waktu yang optimal untuk membantu meningkatkan pendapatan dan memperlihatkan pengalaman pengguna yang baik bagi pengunjung Anda. Iklan anchor hanya ditayangkan pada halaman yang dioptimalkan untuk seluler di perangkat seluler kelas atas.

Iklan ini kini sudah sanggup kalian aktifkan dengan fitur page-level ads di auto ads / iklan otomatis yang terdapat pada settingan iklan di akun adsense kalian. Tapi tidak semua fitur ini sanggup berjalan dengan semesti nya. Dalam arti terkadang iklan anchor ini tidak tampil pada blog kalian.

Banyak faktor yang menciptakan iklan anchor ini tidak tampil di blog kalian meskipun iklan tersebut sudah sanggup aktif untuk di pasang di blog kalian. Dan terkadang fitur iklan sticky ini selalu berada pada posisi di atas layar ponsel dan simpulan nya menciptakan space kosong di bawah sisi layar ponsel yang menciptakan tampilan blog kalian tidak yummy untuk di lihat.

Pernah kah kalian melihat iklan anchor yang terdapat pada Amp sticky ad yang memiliki style berbeda dari sticky non amp. Disini saya akan memperlihatkan tutorial menyangkut ihwal judul di atas adalah cara memasang iklan sticky pada non amp dengan model ala amp-sticky-ad.

Model sticky amp-ad ini berdasarkan saya lebih baik di banding Non Amp. Karena iklan tersebut selalu muncul dan niscaya nya ini salah satu untuk mengatasi pada iklan sticky yang terkadang tidak muncul di blog kalian.

Lalu apa sanggup iklan sticky amp di pasang di non amp? Bisa sob, dengan kalian mengikuti tutorial yang saya berikan di bawah ini. Semua permasalahan eksklusif teratasi dengan mudah. Bagi teman yang ingin mencoba nya silahkan ikuti langkah - langkah nya sebagai berikut.

Cara Membuat Iklan Sticky Pada Template Non AMP ala amp-sticky-ad

Silahkan kalian copy arahan CSS di bawah ini, kemudian letakan arahan tersebut 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.

Lalu silahkan kalian copy lagi arahan di bawah ini dan letakan arahan tersebut 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, maupun halaman hasil pencarian dan ditampilkan hanya di versi mobile. Dan untuk unit iklan nya silahkan teman gunakan unit iklan horizontal dan pilih iklan mobile 320x50 atau 320x100.

Untuk pola kalian sanggup lihat pada gambar di bawah atau pada blog ini. Karena saya pun juga memasang nya.

Mungkin itu saja yang sanggup saya bagikan pada kesempatan kali ini. Semoga artikel ini sanggup bermanfaat buat teman yang sedang mencari Cara Membuat Iklan Sticky Pada Template Non AMP ala amp-sticky-ad. Selamat mencoba!