Monday, November 20, 2017

Memasang Iklan Melayang di Bawah Blog dengan Tombol Close Responsif

Kali ini, saya ingin share lagi sebuah artikel mengenai Cara Memasang Iklan Melayang di Bawah Blog dengan Tombol Close Responsif. Jenis iklan melayang yang berada di bawah blog biasanya lebih sering dilihat oleh pengujung blog kamu karena ya, Iklannya melayang bersamaan dengan pengunjung menscroll halaman blog kita. Sebenarnya membuat Memasang Iklan Melayang di Bawah Blog dengan Tombol Close Responsif lumayan cukup simple. Hanya dibutuhkan sedikit kesabaran dan kamu pasti bisa membuat jenis iklan seperti itu. 


Dasar script iklan melayang di bawah blog dengan tombol close ini lumayan simple nan sederhana, menggunakan tidak banyak Javascript  dan tidak membutuhkan jQuery Library . Sehingga tidak bakal mengganggu loading blog kamu.

Hanya saja, iklan dengan ukuran width 728px atau 970px tampilannya menjadi terpotong saat tayang diperangkat mobile/ponsel. Maka, pada tutorial ini ditambahkan sejumlah sentuhan CSS supaya iklan banner itu akan tampil responsive untuk seluruh device.

Cara Memasang Iklan Melayang/Floating Ads dengan Tombol Close Responsif


1. Login ke Blogger, kemudian masuk ke Dashboard dan pilih Tema > Edit HTML.
2. Cari kode <body> , kemudian letakkan kode di bawah ini di atas kode tadi.
Kamu dapat mencari kode <body> dengan menggunakan CTRL+F

<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://3.bp.blogspot.com/-ZZSacDHLWlM/VhvlKTMjbLI/AAAAAAAAF2M/UDzU4rrvcaI/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='WWW.WEBSITEKAMU.COM' title='Banner iklan disini'><img style='max-width:100%;height:auto' alt='Banner iklan disini' src='https://4.bp.blogspot.com/-Af0Oi3py79s/VOtDq_sCXhI/AAAAAAAADcg/mE6LpkpQpbA/s1600/advertise-728x90.png'/></a>
<!--Akhir script iklan-->
        </div>
 </div><!--end: floating ads-->

  • Kode max-width:728px adalah lebar iklan, jika ingin memasang iklan lebih lebar dari ukuran itu contoh 970px, ubah  max-width:728px  menjadi  max-width:970px . Namun kalau lebar iklan lebih kecil dari 728px maka tidak perlu mengubah kode (ukuran) tersebut.
  • Kode <a href="https://www.blogger.com/WWW.WEBSITEKAMU.COM" title="Banner iklan disini"><img alt="Banner iklan disini" src="https://4.bp.blogspot.com/-Af0Oi3py79s/VOtDq_sCXhI/AAAAAAAADcg/mE6LpkpQpbA/s1600/advertise-728x90.png" style="height: auto; max-width: 100%;" /></a> <!--Akhir script iklan--> adalah script iklan, ganti dan sesuaikan dengan kode iklan kamu
4. Simpan Template

Hanya dengan menambahkan kode di atas, sekarang kamu suda selesai memasang iklan ,melayang / floating ads di bagian bawah blog kamu dengan tombol close responsif. Demikian artikel dari saya mengenai Memasang Iklan Melayang di Bawah Blog dengan Tombol Close Responsif, semoga dapat membantu.

Referensi: -bungfrangki.com

Load disqus comments

0 komentar