Cara Membuat Iklan di blog Melayang

Tips blog kali ini ialah cara memasang  iklan (banner-text) melayang di bawah blog dengan tombol close dan iklan tampil responsive. Membuat atau menyediakan 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.

Dasar script pembuatan iklan melayang di bawah blog dengan tombol close ini sangat simple nan sederhana hanya menggunakan sedikit JavaScript dan tidak memerlukan perangkat jQuery library. Sehingga tidak akan mengganggu loading blog.

Hanya saja jika iklan (misalnya iklan banner) dengan lebar 728px atau 970px tampilannya menjadi terpotong jika tayang diperangkat mobile/ponsel. Maka dari itu pada tutorial ini ditambahkan beberapa sentuhan CSS agar iklan banner tersebut akan tampil responsive untuk semua device.

Anda tertarik menambah space iklan melayang seperti yang dicontohkan pada gambar di atas? Mari ikuti caranya berikut ini.

1. Login ke blogger, masuk ke dasbor, klik Template > Edit HTML.
2. Cari kode </body> dan letakkan kode berikut ini di atasnya

<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/AVvXsEj2q_qMjAT2pfIcPjJLMpENQI017bOas_fuMVF4luSlx3gY4yTIP07lkW9irGIZ6D6pE8TQNB3SlrnccFvv1geBakpJtJWcDqJh5vguJO3IPkznADk3zPdB-ukstUEf8Da1wOY6jLlQb1g/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.bungfrangki.com' title='Banner iklan disini'><img style='max-width:100%;height:auto' alt='Banner iklan disini' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjgAQpJcd_HJl_wCrCO-hFamUg7jeJyh0i4T1c2it2Co7ehk2-t24DVndeHcbhdVOcWZuaKW28CEONz55OhGfDS5r_vwJiAUA9G2KKMlYN2X1JRawyDoR64Mam-WboOPE-lSPPq-GiC8U/s1600/advertise-728x90.png'/></a>
<!--Akhir script iklan-->
        </div>
 </div><!--end: floating ads-->

• Kode yang berwarna biru 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 yang berwarna merah adalah script iklan, ganti dan sesuaikan dengan kode iklan anda.

4. Simpan template, lihat hasilnya dengan membuka kembali blog.

 Demikian tutorial tentang cara membuat iklan melayang dengan tombol close di bawah blog. Semoga membantu dan sukses selalu.