myBizznet: Floating Bottom Banner Dengan Tombol Close

Floating Bottom Banner adalah sebuah widget yang akan muncul pada bagian bawah/footer halaman blog sobat. Widget ini bermanfaat buat sobat yang ingin menambahkan extra space untuk iklan maupun untuk meletakkan gambar, animasi maupun link ke sosial media seperti facebook, twiter, instagram dan lain-lainnya.

Cara membuatnya-pun sangat mudah tidak perlu merubah kode apapun sobat hanya perlu menambah kan sebuah gadget baru kemudian copy beberapa baris kode dan selesai. untuk lebih jelasnya berikut akan Bizznet jelaskan secara lebih mendalam tentang cara pembuatannya.

Langkah awal seperti biasa sobat login dahulu ke akun blogger sobat.

Kemudian pilih layout atau tata letak dan pilih add a gadget/tambahkan gadget.

Pada jendela Add a Gadget/Tambahkan Gadget klik simbol + pada HTML/JavaScript

Copy script dibawah ini dan paste di kolom gadget HTML/JavaScript yang baru saja sobat buat tadi.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'>
</script><br />
<script type='text/javascript'>
$(document).ready(function() {
$('img#closed').click(function(){
$('#btm_banner').hide(90);
});
});
</script>
<style type='text/css'>
div#btm_banner {
bottom: 0;
position: fixed;
width:100%;
opacity: 0.9;
left: 0;
}
div#btm_banner img{
border:2;
cursor:pointer;
}
</style>
<div style='height: 0px;'></div>
<div align='center' id='btm_banner' style='height: 80px; z-index: 9999;'>
<div style='text-align: right; width: 468px; height: 6px;'>
<img id='closed' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj18xLigVwWLf2w9ZZpkiBwJWglcKYh5NPNVfwjaFFx0xcF0heW5gqM5YEsT8Z2iEVvHfvUfP9PsRAGGi1-OYeUnCaXl7UPwiRd61dMVVosSET_EZh5v6tseNQxwjSx418YyCKn13dVr8-m/s1600/close-icon.png'/></div>
<div style='clear: both;'></div>
<p>
<p><center>

Letakkan kode banner disni

</center></p>
</p>
</div>