Cara Membuat Iklan Melayang Responsive Dibawah Blog dengan Tombol Close

Cara Membuat Iklan Melayang Responsive Dibawah Blog dengan Tombol Close

AdityaTekno.com - Kali ini saya akan membagikan Cara Memasang / Membuat Iklan Melayang di bawah Blog dengan Tombol Close dan Iklan Tampil Responsive. Membuat space iklan baik iklan banner dan text di bawah postingan atau dengan efek floating biasanya diterapkan pada blog yang sudah terkenal yang banyak menyediakan space iklan. Penggunaan posisi iklan semacam ini tentu saja untuk menghasilkan dan mencari keuntungan dari blog tersebut.
Cara Membuat Iklan Melayang Responsive dengan Tombol Close

Baca Juga : Cara Memasang Banner Iklan Melayang Disamping Kanan Kiri Blog

Dan anda jangan khawatir loading blog menjadi lambat, karena dasar script pembuatan iklan melayang di bawah blog dengan tombol close ini sangat simple dan sederhana hanya menggunakan sedikit JavaScript dan tidak memerlukan perangkat jQuery library.

Baca Juga :

Nah, bagi anda yang tertarik mencobanya, silahkan simak tutorialnya dibawah ini.

Cara Membuat Iklan Melayang Responsive Dibawah Blog dengan Tombol Close


Pertama, buka Blogger >> Tema >> Edit HTML.

Letakkan kode berikut diatas / sebelum 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>

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.

Kemudian klik Simpan Tema.

Untuk melihat hasilnya seperti apa, bisa klik tombol dibawah ini.

Baca Juga : Memasang Dua Iklan Google Adsense Ditengah Artikel

Demikian Cara Membuat Iklan Melayang Responsive Dibawah Blog dengan Tombol Close. Semoga bermanfaat dan terima kasih sudah berkunjung. Salam AdityaTekno.com