Skip to main content

follow us


www.azid.web.id - Cara Membuat Iklan Sticky Pada Blog Non AMP Di Moblie Secara Manual. Iklan sticky merupakan salah satu iklan achor yang tampil pada perangkat seluler. Dimana iklan tersebut dapat aktif ketika kita mengaktifkan iklan otomatis dan menempatkan pada blog sobat. Dengan mengaktifkan iklan otomatis dan mencentang iklan sticky maka pada versi mobile secara otomatis akan muncul iklan sticky.

Iklan sticky ini bisa dibuka dan ditutup sesuai keinginan pengunjung. Namun kendala iklan sticky yang dibuat otomatis oleh pihak google saat posisi diatas dapat menghalangi header blog kita dan menjadikan menu navigasi mobile dropdown kita tidak bisa di klik atau tidak aktif. Oleh karena itu kita dapat mengakalinya dengan membuat iklan sticky sendiri pada blog kita secara manual dan tampil dibwah. Dengan begitu iklan kita tidak akan menghalangi header blog kita.

Baca Juga: Membuat Iklan Sticky pada laman dekstop di blog AMP dan Non AMP

Iklan sticky untuk blog Non AMP ini akan tampil pada bagian bawah layar ponsel. Iklan sticky ini memang mirip dengan iklan sticky versi AMP dengan begitu akan terlihat menarik. Jika pada iklan sticky AMP menggunakan amp project, maka iklan sticky Non AMP ini perlu menggunakan kode CSS dan JavaScript.

Pembuatan sticky dengan bantuan Javascript ini digunakan untuk mensetting iklan sticky akan tampil melayang dibagian bawah layar pada versi mobile secara otomatis ketika pengunjung blog kita menscroll halaman blog ke bawah dengan ketinggian kemunculannya dapat diatur dari JavaScript tersebut. Dan iklan sticky ini juga dilengkapi dengan tombol close disebelah kanan atas kotak iklan yang memang menyerupai iklan sticky versi AMP.

Baca Juga: Membuat Blog lebih SEO Friendly dengan skor 100

Iklan sticky ini tidak akan menyalahi aturan google adsense, dikarenakan tidak menghalangi tulisan blog sobat. Selain itu ukuran sticky ini memiliki ketinggian kurang dari 1/3 dari layar artikel blog. Oleh karena itulah tidak melanggar kebijakan google adsense.

Baiklah, untuk melihat tampilan iklan sticky di blog Non AMP ini, sobat bisa cek dibawah ini dengan klik open fiddle.





Dan jika sobat tertarik untuk memasang iklan sticky ini pada blog Non AMP, sobat bisa mengikuti langkah-langkah dibawah ini:

Pertama, Login ke Blogger - Template - Edit HTML - Salin kode CSS berikut dan simpan sebelum 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>

Kode di atas tidak ditampilkan di halaman static, halaman error, dan halaman hasil pencarian dan ditampilkan hanya di versi mobile.
Kedua, silahkan salin javascript berikut dan simpan sebelum 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 -->
<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 > 300){
   target.style.bottom = "0";
  }
},false);
//]]>
</script>
</b:if>

KETERANGAN
  • Angka 300 untuk mengatur ketinggian kemunculan iklan, silahkan sesuaikan dengan keinginan 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 kode iklan adsense. Jika error dalam penyimpanan, silahkan Parse terlebih dahulu.
  • Silahkan gunakan unit iklan horizontal dan pilih iklan mobile 320x50 atau 320x100.

KetigaSave template sobat.

Demikian tutorial Cara Membuat Iklan Sticky Pada Blog Non AMP Di Moblie Secara Manual. Semoga bermanfaat. Amin.
PERHATIAN!: setiap link template pada blog ini di direct 5 -7 kali jadi harap bersabar.

You Might Also Like:

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar