Membuat Iklan Responsive Melayang di Bawah Blog

Salah satu kelebihan pemilik blog, terlebih jika blognya ramai pengunjung adalah dia bisa memasang iklan di dalamnya. Pemilik blog tersebut bisa memasang iklan PPC, iklan adsense, atau bahkan iklan dari produk dia sendiri. Inilah keuntungan yang bisa didapat jika seseorang memiliki blog.

BACA: Trik Mudah Agar Pengunjung Blog Ramai

Setelah sahabat memiliki blog, apalagi blognya sudah ramai, sekarang sahabat bisa memasang iklan. Eits, jangan keburu memasang iklan sembarangan ya. Pertimbangkan dulu, dimana iklan tersebut akan dipasang. Hal ini akan mempengaruhi juga penampilan blog sahabat semua ya. Bayangin aja, sandal yang bagus dan harganya mahal takkan elok dipandang jika sandal tersebut ditaruh di atas kepala. Ingat itu...hehe. Diantara tempat iklan yang baik adalah berada di samping header, di atas postingan, di bawah postingan, di tengah postingan, dan di posisi sidebar. Bahkan ada juga yang menaruh di bawah blog dengan melayang.

BACA: Cara Mudah Memasang Iklan di Tengah Postingan

Sahabat tertarik untuk memasang iklan melayang di bawah blog? Atau, sahabat berkehendak untuk memasang iklan adsense melayang di bawah blog dengan responsive? Tenang saja, mudah sekali caranya. 

Trik milik bung franki ini tergolong ampuh dan kelebihan lainnya adalah tidak begitu mempengaruhi loading blog sahabat. Mengingat resep ini tidak menggunakan jQuery. Kelebihan lagi, trik yang sahabat Ngonline06 akan dapatkan ini responsive. Artinya, tetap enak dipandang di berbagai macam media, baik desktop, tablet, ataupun mobile.

Cara Membuat Iklan Responsive Melayang di Bawah Blog

Berikut adalah cara membuat iklan responsive melayang di bawah blog. Lakukan 3 langkah mudah ini, maka iklan sahabat siap tampil dan cepat alias tak malu-malu untuk menunjukkan dirinya:

1. Silahkan login ke blog sahabat, menuju template > edit HTML.
2. Cari kode </body> dan letakkan kode di bawah ini di atas kode </body> (Manfaatkan ctrl + F untuk memudahkan pencarian)
<script type='text/javascript'>
        $(document).ready(function() {$(&#39;img#closed&#39;).click(function(){$(&#39;#btm_banner&#39;).hide(90);});});
</script>
        <!--start: floating ads-->
        <div id='floatads' style='width:100%;margin:auto; text-align:center;float:none;overflow:hidden; display:scroll;position:fixed; bottom:0;z-index:9999'>
         <div><a id='close-floatads' onclick='document.getElementById(&apos;floatads&apos;).style.display = &apos;none&apos;;' style='cursor:pointer;'><img alt='close' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKKpAp4iJw1J_zif34KtFPnJNSZsmof4pf5CwH7_zS8aXfXNBWY8eZVdTscen_29zY3e9LCqe9uFChtRp0lMTXiz4H6vP2BS9dWapXwYyi2_w4_yuOUCdUlKKviQtAdBCinp0LCkqrC4A/s1600/btn_close.gif' title='close button'/></a></div>
    <div style='text-align:center;display:block;max-width:728px;height:auto;overflow:hidden;margin:auto'>
        <!--Script iklan-->
<a href='ngonline06.blogspot.co.id' title='Banner Iklan'><img style='max-width:100%;height:auto' alt='Banner Iklan' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAI8GC8nwMFa1RTEt7OufIvN40QWLH6xspTD0O6HVHj97aAp4OhJqe-yV12D1QZbUtzy-h6x6_UC-ZeprD4FfEmLelztW1Z7PDujCcf7e9TIiW_wy_mTHWBrlt2C-nIKk_Gm55VvRqHcs/s1600/advertise-728x90.png'/></a>
<!--Akhir script iklan-->
        </div>
 </div><!--end: floating ads-->
KETERANGAN:

• Kode berwarna merah adalah ukuran maksimal lebar iklan. Jika iklan sahabat Ngonline06 lebih lebar dari itu, misalnya 970px, maka silahkan diganti 728 menjadi 970. Namun jika lebih kecil, maka tak perlu diganti.
• Kode berwarna biru adalah script iklan sahabat. Silahkan diganti sesuai dengan iklan yang akan ditampilkan atau adsense sahabat semua.
3. Save template.

Tralala, iklan sahabat sekarang sudah tampil dengan responsive dan easy loading tentunya. Silahkan jika ada hal yang belum jelas, bisa dicorat-coret pada kolom komentar. Untuk membuktikan bahwa iklan tersebut responsive, silahkan gunakan alat responsive di bawah ini:

Alat untuk Mengecek Responsive Template Blog