Cara Membuat Widget Iklan Melayang Responsive

Oleh Syafdillah

17 Februari 2016

Keberadaan sebuah iklan dalam suatu blog adalah selain sebagai "pemanis buatan" juga sebagai fasilitas menangkap rupiah atau dollar. Kali ini akan dibahas cara pembuatan iklan melayang pada template responsive yang terinspirasi dari sobat Arlina sebagai owner dari www.arlinadzgn.com

Iklan ini memiliki ukuran yang fleksibel, sobat bisa tentukan sendiri ukuran iklannya. Bisa 728x90 pixel, 300x250pixel, atau ukuran billboard (970x90 pixel) yang terpenting tidak mengganggu pengunjung yang akan mencari artikel diblog sobat.

Letak iklan ini di bagian footer atau bawah dan tetap, akan terlihat melayang jika sobat menggulung layar ke atas. Ada tombol x(close) untuk menghilangkan iklan tersebut. Kurang lebih seperti itu iklan yang dimaksud kali ini.

Mari kita langsung saja pada tutorialnya

1. Login ke Blogger lalu pilih blog sobat yang akan dipakai untuk percobaan memasang widget iklan melayang pada template responsive
2. Sudah dipilih blognya, lalu pilih "TEMPLATE" dan "EDIT HTML" kemudian cari kode </body>, gunakan fungsi CTRL+F agar memudahkan dalam pencarian
3. Lalu copy kode dibawah ini dan letakkan persis di atas kode </body>
   
   

   <script type='text/javascript'>
   $(document).ready(function() {$(&#39;img#closed&#39;).click(function(){$(&#39;#bl_banner&#39;).hide(90);});});
   </script>
   <div id='fixedban' style='width:100%;margin:auto;text-align:center;float:none;overflow:hidden;display:scroll;position:fixed;bottom:0;z-index:999;-webkit-transform:translateZ(0);'>
   <div><a id='close-fixedban' onclick='document.getElementById(&apos;fixedban&apos;).style.display = &apos;none&apos;;' style='cursor:pointer;'><img alt='close' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhn9fVkSoA5laTe2nSE7ayQQhzeCtMYq5-iZ_Ey_p8qJF1Jkzu5PgrJx_Z7-ArQahBAvHQpIbhlXnxWitVsHgjZTbAodiBp4nvuxbVRj8Fg5R4-356p0DeR30CZwXa95D86NIx6f60vRxnz/s1600/btn_close.gif' title='close button' style='vertical-align:middle;'/></a></div>
   <div style='text-align:center;display:block;max-width:728px;height:auto;overflow:hidden;margin:auto'>
   <a href='#' title='Banner iklan disini'><img style='max-width:100%;height:auto;vertical-align:middle;' alt='Banner iklan disini' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWe60oy7gJZS80O7FBf8FLzA16smrsKesC5fP07elGpezldU3tZvYw0liqK9n501hWcFkpPAvTNlACZj35no4bUc7C3gar_yaSNmNSks-rX0M0iNPwhKutW9ET2WxpVynuErQfeK0OrizZ/s1600/arlina-tea.png'/></a>
   </div>
   </div>

4. Simpan pekerjaan sobat, dan lihat hasilnya.

Ayo Like Facebooknya

Tag : Blogging