Cara Membuat Iklan Melayang di Bawah Blog Dengan Tombol Close Dan Responsive

Cara memasang/membuat 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. Penggunaan posisi iklan semacam ini tentu saja untuk menghasilkan dan mencari keuntungan dari blog tersebut.

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.

Cara Membuat Iklan Melayang/Floating Ads Responsive dengan Tombol Close

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/AVvXsEhdkCqY860ZyA8AVtG4NdFU_1G4VzRNM255XRD-xOD1ocymGI8yx2axQikybtIDC1a3IRnq9njkN6MbIqQGt-_vVOcUem7Me4TygdIDCO1WT4Gk0iHHPwyexpdo6CCRenAdY9dfPA4ugLI/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='https://www.idniez.com' title='Banner iklan disini'><img style='max-width:100%;height:auto' alt='Banner iklan disini' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVn-5_WHq-WwoOrcenzYDXaCoSwRiMCrVHsgVDCwUCqpQWGCqWk691XnDefBEtRs26CJ95QbB6LyBCkqkpW2XQPfl737AA85YjMVgVxc0yP0c6SNmw2uoq1YwGfgjO78hixbfCZI3O7xA/s1600/advertise-728x90.png'/></a>
<!--Akhir script iklan-->
        </div>
 </div><!--end: floating ads-->

• Kode yangberwarna biruadalah 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 merahadalah script iklan, ganti dan sesuaikan dengan kode iklan anda.

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

Bagaimana, cukup gampang bukan? Demikian tutorial tentang cara membuat iklan melayang dengan tombol close di bawah blog. Semoga membantu dan sukses selalu.

 

Baca juga: