Cara Memasang Iklan Melayang Responsive dengan Tombol Close di Blog dengan Mudah

Cara Membuat Iklan Melayang Responsive dengan Tombol Close di Blog
Ketika seseorang mempunya keinginan untuk membangun sebuah blog, maka sudah pasti orang itu mempunyai tujuan. Ketika berbicara tentang tujuan membuat suatu blog maka tidak semua orang sama tujuannya. Ada orang yang membuat blog hanya untuk menghabiskan waktu senggang, ada juga yang membuat blog hanya untuk mencurahkan isi hatinya, ada juga yang membuat blog hanya sebagai hobinya saja, sedangkan ada sebagian yang membuat blog untuk kepentingan komsersial atau kepentingan bisnis.

Orang yang membuat blog dengan tujuan bisnis, sudah pasti mempercantik blognya dengan beragam postingan yang menarik, dan membuat template blognya agar menjadi responsive dan SEO agar mudah berada di rank atas pencarian google.

Salah satu hal pendukung dalam blog bisnis adalah iklan banner yang ada di blognya. Di beberapa blog atau website pasti anda sudah menemukan iklan banner melayang dengan tombol closenya. Tombol close sendiri berfungsi agar jika pengunjung blog tidak tertarik dengan iklan yang ditayangkan maka dia dapat mengclosenya tanpa harus keluar dari blog itu. Nah sekarang untuk sahabat saya akan bagikan cara memasang iklan melayang responsive dengan tombol close di blog dengan memanfaatkan kode script di bawah ini.

Cara Memasang Iklan Melayang Responsive dengan Tombol Close


1. Login ke blogger

2. Masuk ke Editor template lalu cari kode </body> (gunakan ctrl+f untuk mempermudah pencarian)

3. Setelah ditemukan Letakkan kode di bawah ini tepat 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="-webkit-transform: translatez(0); bottom: 0; float: none; margin: auto; overflow: hidden; text-align: center; width: 100%; z-index: 999;">
<div>
<a href="https://www.blogger.com/null" id="close-fixedban" onclick="document.getElementById('fixedban').style.display = 'none';" style="cursor: pointer;"><img alt="close" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwA2uf_edndsM5hvwIgvoGq23ncOniJCtnbfz8xmIygl1rXqGGPBpwWiDle8gTi16hm7t1DhHC-Ndazd1lJwPGwsFMMq7uuFb7e7aPxOk3y00daAD0uKXxvcar6hzDNKIS1fCvKL4auBWc/s1600/btn_close.gif" style="vertical-align: middle;" title="close button" /></a></div>
<div style="display: block; height: auto; margin: auto; max-width: 728px; overflow: hidden; text-align: center;">
<a href="#" title="Banner iklan disini"><img alt="Banner iklan disini" src="#" style="height: auto; max-width: 100%; vertical-align: middle;" /></a>
</div>
</div>

4. Ganti kode yang width:720 sesuai dengan ukuran iklan dan kode iklan yang anda miliki.

5. Setelah selesai simpan template blog, lalu lihat hasilnya.

Demikian tutorial singkat tentang cara memasang iklan melayang responsive dengan tombol close di blog semoga membawa manfaat bagi pembaca sekalian.

Jufri Derwotubun

Saya hanyalah seorang pengembara yang suka berpetualangan, menulis, dan membaca alam semesta.

Posting Komentar

Lebih baru Lebih lama