Cara Membuat Banner Iklan Melayang Responsive di Bawah Blog

Cara membuat iklan melayang di bawah blog (gambar: pediaku.id)

Pediaku ID - Saat membuka halaman artikel kadang kita melihat muncul sebuah iklan yang melayang di bawah blog tersebut, iklan melayang atau disebut sticky banner ternyata cukup mudah untuk membuatnya, kita hanya perlu menggunakan beberapa script iklan melayang yang saya bagikan berikut

Memasang iklan floating atau melayang di blog bertujuan untuk menambah slot banner di situs kita, diharapkan pendapatan dari iklanpun akan meningkat dan juga akan meningkatkan klik karena posisinya yang otomatis muncul di halaman depan blog, sehingga orang atau pembaca blog akan melihat iklan tersebut

Cara membuat iklan melayang di blog sangat mudah, pada bagian pembahasan tutorial blogger ini kita akan membahas tuntas cara memasang banner melayang di bawah blog dengan tombol close.

Untuk memasang iklan floating atau sticky di bawah blog kamu hanya perlu memasang script singkat, dan tidak usah khawatir membuat loading blog menjadi lambat, karena scipt yang akan saya bagikan hanya perpaduan kode HTML banner iklan dan tambahan sedikit kode iklan Java Script yang sangat ringan dan tidak akan mempengaruhi speed loading blog.

Cara Membuat dan Memasang Iklan Melayang Responsive di Bawah Blog dengan Tombol Close

1. Buka blogger >> Tema >> Edit HTML
2. Letakkan script iklan berikut tepat diatas 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='http://1.bp.blogspot.com/-_A83iDM6JYc/VhtxROLILrI/AAAAAAAADK4/aM4ikIA6aqI/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://1.bp.blogspot.com/-gCPv2kRPw84/XhFTWBVolsI/AAAAAAAACFo/8s0eGpqmhBc5RG55yxS6GjBRgR3KKwtGACLcBGAsYHQ/s1600/banner-728x90-adityatekno.png'/></a>
</div>
</div>

3. Klik Simpan

Catatan : Ganti kode #, Banner Iklan Disini, dan https://1.bp.blogspot.com/-gCPv2kRPw84/XhFTWBVolsI/AAAAAAAACFo/8s0eGpqmhBc5RG55yxS6GjBRgR3KKwtGACLcBGAsYHQ/s1600/banner-728x90-adityatekno.png sesuai keinginan anda. Dan jika anda ingin merubah lebar iklan, bisa ubah kode max-width:728px.

Penutup

Dengan menerapkan panduan diatas kamu sudah bisa membuat iklan melayang muncul di bagian bawah blog dengan tombol close, jadi demikian tutorial tentang cara membuat iklan melayang responsive di bawah blog semoga dapat membantu