-->
Home / Web Programing

Cara pasang iklan tetap bar bawah adsense pada blogger dan web lain

By Jurnalis 2 comments
Hai sob, jumpa lagi diblog aku ini. Kali ini aku mau bagiin tips memasang iklan tetap yang menempel pada layar bawah pengguna smartphone kita menyebutnya iklan sticky karena iklan ini tidak bergerak mengikuti element yang kita scroll.

Mirip sepert yang digunakan oleh bebedapa situs berita populer. Sebenarnya adsense sudah mempunyai iklan otomatis seperti ini namanya iklan achor. Tapi iklan jenis ini kadang tidak menyenangkan karena munculnya bisa diatas halaman dan kadang dibawah halaman.
Pasang Iklan sticky Adsense


Nah buat kalian yang tertarik memasang kode ini cukup menggunakan kode berikut ini. By the way kode ini aku gak tahu author siapa sebab sudah banyak digunakan dan dishare oleh sahabat blogger. Ok baiklan kita lanjut saja ke cara pemasanganya, gak perlu basa-basi lagi:

Pemasangan Pada Blogger

Kalai diblogger kita memasangnya pada tempate, anda harus bisa mengedit template halaman blog. Adapun tahapanya seperti ini.
1. Masuk tema editor atau anda mendownload template terlebih dahulu agar lebih mudah mengeditnya via HP.
2. Silakan cari kode </head> agar lebih mudah gunakan form pencarian cepat. Kalau Di HP pake aplikasi X-Plore dan gunakan fitur pengeditan teks lalu klik ikon kaca pembesar dan ketikan .
3. Kalau sudah ketemu langkah selanjutnya copy kode css dibawah ini, dan paste diatas nya (diatas 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>

4. Selanjutnya silakan cari lagi kode </body> pada tempalte anda kalau sudah ketemu, pastekan script HTML dan JavaScriptnya ini diatas nya. :

<b:if cond='data:blog.pageType not in {"static_page","error_page"} and data:blog.isMobileRequest == "true" and not data:blog.searchQuery'>
<div class='sticky-ad' id='sticky-ad'>

<!-- Kode iklan silahkan simpan di bawah ini -->

<button aria-label='Close this ad' class='sticky-ad-close-button' onclick='document.getElementById('sticky-ad').style.display='none';'/>
</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: Kegunaan dari tag adalah menjalankan kode hanya pada halaman postingan versi mobile. Jika anda ingin menampilkan iklan pada semua halaman tanpa terkecuali hapus semua kode tag nya.

Kegunaan dari koe CDATA adalah untuk menghilangkan parsing xml otomatis pada saat pengeditan file di template blogger. Anda bisa menghilangkanya jika perlu.

Pemasangan Pada Web Lain

Jika ingin memasang kode diatas pada halaman web caranya hampir sama seperti diatas hanya saja kita hanya mengambil scriptnya tanpa kode tag contoh langkah-langkahnya dibawah ini:
1. Salin kode css nya dan tempel diatas kode pada htmlmu.

<style>
.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>


2. Baru kemudian salin kode javascript nya dan paste diatas kode halama kamu.

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

<!-- Kode iklan silahkan simpan di bawah ini -->

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

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


Nah untuk kode iklan atau bannernya anda buat dan pasang sendiri mau pake iklan adsense ataupun hanya menggunakan gambar. Dan ukuran iklan idealnya 320x50 atau bisa juga menggunakan ukuran agak sedikit besar yaitu 320x100 tapi akan mengganggu halaman dan iklan lebih cepat di skip. Letakan kode iklan atau gambar anda dibawah komentar yang saya beri warna merah.

Sorry untuk author kode ini saya nggak tau siapa, karena sudah banyak yang membagikan script ini hehehe. Kalau orang luar sih memang niat mereka buat berbagi dalam penyelesaian ngoding bahkan mereka bikin github sendiri dan source kode yang terbuka. Tapi bagi ±63 kebiasaan menggunakan source kode orang untuk komersial tanpa memberikan sumbernya hehehe termasuk postingan ini.:v

2 comments for "Cara pasang iklan tetap bar bawah adsense pada blogger dan web lain"

Post a Comment

Komentar sesuai isi topik. Gunakan kalimat yang sopan, dilarang spam link.^_^