Membuat Banner Iklan Melayang Di Blogger

Pada kali ini Saya bakal menyatakan bagaimana Cara Membuat Banner Iklan Melayang Responsive dengan Tombol Close di Blog yang bisa anda gunakan buat meningkatkan performa iklan Anda.

Banner iklan yang bakal Saya bahas disini bersifat melayang atau sticky dengan ukuran yang dapat menyesuaikan secara otomatis serta terdapat tombol close di bagian atas buat menghilangkan banner iklan tersebut apabila pengunjung merasa terganggu.

Baca Juga

Iklan banner yang melayang yang terdapat tombol close boleh menjadi sering Kalian temukan di situs-situs besar. Bagi Kalian yang hendak memaksimalkan iklan terutama iklan dari Google AdSense, maka widget banner ini boleh menjadi bisa anda coba.

Cara Membuat Banner Iklan Melayang

Silahkan buka dasbor Blogger, kemudian pilih menu Template, lalu klik Edit HTML. Silahkan salin kode dibawah ini serta tempatkan sebelum kode </body> pada template Anda.

<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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxFTN5oTEKnc-C6Eu_cereVYatPtzDg5FBmbuU01QJC3g37ij1ts8EeOkNLctt4fsXLAd8X0k01iy_zHTVmswSa3TxZrAYdYSTD70VCVTCNoqg_8iCg8XfWKhkLZuyhUHLDTmvh90MYb7j/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiq5IVBgFyPNN1eXvakzX_zc6N6yS50YlMxWOUD58t_F1eFNQhTXjZuNtONbk7-qB_Zbwy7pqKIhuFcDLGbV6d7HqPM3mfmOxLYwx-m1iuehvE1mNiyhp1l6t50HMlromApXyRqb-u-k16B/s1600/arlina-tea.png'/></a> </div> </div>

Selanjutnya, silahkan Simpan Tema, kemudian lihat hasilnya.

Membuat banner iklan yang melayang memang mudah. Apabila Kalian tidak hendak menampilkan banner iklan ini di tampilan versi mobile, maka silahkan gunakan kode dibawah ini:

<b:if cond='data:blog.isMobileRequest == "false"'> <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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxFTN5oTEKnc-C6Eu_cereVYatPtzDg5FBmbuU01QJC3g37ij1ts8EeOkNLctt4fsXLAd8X0k01iy_zHTVmswSa3TxZrAYdYSTD70VCVTCNoqg_8iCg8XfWKhkLZuyhUHLDTmvh90MYb7j/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiq5IVBgFyPNN1eXvakzX_zc6N6yS50YlMxWOUD58t_F1eFNQhTXjZuNtONbk7-qB_Zbwy7pqKIhuFcDLGbV6d7HqPM3mfmOxLYwx-m1iuehvE1mNiyhp1l6t50HMlromApXyRqb-u-k16B/s1600/arlina-tea.png'/></a> </div> </div> </b:if>

Kalau Kalian hendak menampilkan iklan dari Google AdSense, maka gunakan kode dibawah ini:

<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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxFTN5oTEKnc-C6Eu_cereVYatPtzDg5FBmbuU01QJC3g37ij1ts8EeOkNLctt4fsXLAd8X0k01iy_zHTVmswSa3TxZrAYdYSTD70VCVTCNoqg_8iCg8XfWKhkLZuyhUHLDTmvh90MYb7j/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'> Letakkan kode iklan adsense anda disini </div> </div>

Berikut contoh tampilannya:

Demikian pembahasan mengenai Cara Membuat Banner Iklan Melayang Responsive semoga bermanfaat buat Anda. Kalau ada hal yang hendak ditanyakan, silahkan bertanya pada kolom komentar dibawah ini.