Cara Pasang Iklan Tetap Kafe Bawah Adsense Pada Blogger Dan Web Lain

Hai sob, jumpa lagi diblog saya ini. Kali ini saya mau bagiin tips memasang iklan tetap yang melekat pada layar bawah pengguna smartphone kita menyebutnya iklan sticky sebab iklan ini tidak bergerak mengikuti element yang kita scroll.

Mirip sepert yang dipakai oleh bebedapa situs informasi populer. Sebenarnya adsense sudah memiliki iklan otomatis menyerupai ini namanya iklan achor. Tapi iklan jenis ini kadang tidak menyenangkan sebab munculnya dapat diatas halaman dan kadang dibawah halaman.

 Kali ini saya mau bagiin tips memasang iklan tetap yang melekat pada layar bawah pengguna Cara pasang iklan tetap kafe bawah adsense pada blogger dan web lain

Nah buat kalian yang tertarik memasang instruksi ini cukup memakai instruksi berikut ini. By the way instruksi ini saya gak tahu author siapa dikarenakan telah banyak dipakai dan dishare oleh sobat 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 dapat mengedit template halaman blog. Adapun tahapanya menyerupai ini.
1. Masuk tema editor atau anda mendownload template terlebih dahulu supaya lebih gampang mengeditnya via HP.
2. Silakan cari instruksi </head> supaya lebih gampang gunakan form pencarian cepat. Kalau Di HP pake aplikasi X-Plore dan gunakan fitur pengeditan teks kemudian klik ikon beling pembesar dan ketikan .
3. Kalau sudah ketemu langkah selanjutnya copy instruksi css dibawah ini, dan paste diatas nya (diatas 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> 

4. Selanjutnya silakan cari lagi instruksi </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 sasaran = document.getElementById('sticky-ad');   if(window.pageYOffset > 300){    target.style.bottom = "0";   } },false); //]]> </script> </b:if> 

Keterangan: Kegunaan dari tag yaitu menjalankan instruksi hanya pada halaman postingan versi mobile. Jika anda ingin menampilkan iklan pada semua halaman tanpa terkecuali hapus semua instruksi tag nya.

Read:  Cara Pasang Isyarat Recaptcha Dengan Jaascript Dan Jquery

Kegunaan dari koe CDATA yaitu untuk menghilangkan parsing xml otomatis pada ketika pengeditan file di template blogger. Anda dapat menghilangkanya bila perlu.

Pemasangan Pada Web Lain

Jika ingin memasang instruksi diatas pada halaman web caranya hampir sama menyerupai diatas hanya saja kita hanya mengambil scriptnya tanpa instruksi tag pola langkah-langkahnya dibawah ini:
1. Salin instruksi css nya dan tempel diatas instruksi 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 instruksi javascript nya dan paste diatas instruksi 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 sasaran = document.getElementById('sticky-ad');   if(window.pageYOffset > 300){    target.style.bottom = "0";   } },false); </script> 

Nah untuk instruksi iklan atau bannernya anda buat dan pasang sendiri mau pake iklan adsense ataupun hanya memakai gambar. Dan ukuran iklan idealnya 320×50 atau dapat juga memakai ukuran agak sedikit besar yaitu 320×100 tapi akan mengganggu halaman dan iklan lebih cepat di skip. Letakan instruksi iklan atau gambar anda dibawah komentar yang saya beri warna merah.

Read:  Rahasia Dibalik Aplikasi Flyexam Browser Rp 3000,-

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

You May Also Like