Adsense Melayang Di Bawah Versi Wordpress

Adsense melayang di bawah layar versi blog WordPress untuk tampilan desktop. Sebelumnya Info BLogger telah menuliskan cara membuat iklan Adsense billboard dengan tombol Show Hide. Nah, dalam postingan yang sedang sobat baca ini masih tentang teknik penempatan iklan khususnya adsense tetapi posisinya yang berbeda. Jika di artikel sebelumnya meletakkan iklan adsense di bawah judul (atau tempat lain) jenis billboard lengkap dengan tombol Close Ad, kali ini penempatannya adalah melayang di bagian bawah screen atau sticky.

Skrip yang digunakan unuk membuat iklan Adsense melayang di bawah versi WordPress ini adalah kode yang diposting Kang Adhy Suryadi di Blognya, Kompi Ajaib.

Tampilan dari iklan adsense yang berhasil dibuat akan berada di bagian bawah blog secara sticky. Artinya, meski layar discroll iklan akan tetap diam di tempat dan tidak mengikuti arah scroll. Agar iklan sticky di bawah versi wordpress ini berjalan dengan baik, sobat cukup meletakkan kode atau skrip yang akan ditampilkan nanti di di paragraf lain pada Info Blogger ini.

Cara Membuat Iklan Adsense Sticky Di Bawah Versi WordPress

Berikut ini adalah cara membuat iklan adsense sticky di bawah blog untuk blog wordpress.

1. Install dulu plugin Ad Inserter di blog WordPress sobat
2. Silahkan salin dan simpan CSS style berikut pada menu wordpress sobat Appearance » Customize » Additional CSS
   

     
   .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;
   margin-left:300px;
   }
   .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
   }
   

3. Kemudian simpan kode berikut di blok plugin Ad Inserter yang sudah sobat install

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

4. Angka 300 berfungsi untuk mengatur kapan iklan muncul, Sobat bisa menyesuaikan dengan keinginan yang diinginkan misalnya menggantinya dengan angka 100
5. Gunakan iklan ukuran 728×90

Sedangkan pengaturan di Ad Inserter adalah sebagai berikut:

1. Letakkan di salah satu blok yang ada
2. Contreng semua (post, static page, homepage, search page,  category page, tag/archive page)
3. Pada tulisan “insertion”,  pilih footer. Dan alignment pilih center
4. pada tab devices, contreng tulisan “use clint-side detection to” dan contreng desktop pada tulisan “only on” (karena ingin menampilkan iklan hanya pada desktop)
5. kemudian klik tab “server-side device detection”, pilih desktop device
6. Terakhir klik tombol “Save Setting”

Demikian Info Blogger seputar cara membuat iklan adsense sticky di bawah blog untuk blog wordpress.