Membuat Iklan Melayang di Sidebar atau di Footer

Melayang di Bawah Blog atau Footer Blog dengan Tombol Close agar tidak mengganggu. Penasaran dan Ingin Mencobanya ? Yo kita praktekan bersama !! Berikut langkah-langkahnya :

1. Login ke Akun Blognya

2. Pada Dashboard pilih Opsi Tata Letak >> Tambahkan Gadget >> Pilih HTML/JavaScript >> Dan Paste code script dibawah ini ke dalam kotak yang telah disediakan >> 

<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:0;
cursor:pointer;
}
</style>
<div style='height: 0px;'></div>
<div align='center' id='btm_banner' style='height: 90px; z-index: 9999;'>
<div style='text-align: right; width: 900px; height: 6px;'>
<img id='closed' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhh7xOJhRh2JUAouNG9qScHfeKL7OvbzxvVT6MZEK6fxqEGeZ7kWujtEbkx0ghmaYGog0WMbYDtY81iwtf8K8E1tXlTrQunDSp7KjULODjZA_W4Txiza9qWIkNwAZYpQPl1AKWnh3lIkWYP/s1600/close3.png'/></div>
<div style='clear: both;'></div>
<p>
<p><center>
<a href="http://kebal-online.blogspot.com/" target="_blank"title="Pasang Iklan"><img src="http://i.imgur.com/lAck3To.gif"  border="0"/></a>
</center></p>
</p>
</div>

Keterangan :

- Script berwarna merah silahkan rubah dengan kode script iklan Sobat

- Script berwarna biru silahkan sesuaikan ukuran banner / iklan sesuai selera masing2

3. Jika sudah klik Save/ Simpan dan lihatlah hasilnya . . 

di sidebar Blog

Menambah kode CSS

1. Login ke Blogger
2. Klik Template > Edit HTML
3. Tambahkan kode CSS di bawah ini di atas ]]></b:skin>

.sticky {
  position:fixed;
  top:10px;/* jarak dari atas*/
  z-index: 100;
}

Tambahkan JavaScript

Simpan kode ini di atas </body>

<script type='text/javascript'>
$(document).ready(function() {
var stickyWidgetTop = $('#HTML7').offset().top; 
var stickyWidget = function(){
var scrollTop = $(window).scrollTop();     
if (scrollTop > stickyWidgetTop) { 
    $('#HTML7').addClass('sticky');
} else {
    $('#HTML7').removeClass('sticky'); 
}
};
stickyWidget();
$(window).scroll(function() {
    stickyWidget();
});
});
</script>

Ganti #HTML7 dengan ID widget yang akan dibuat sticky.

Membuat Iklan Melayang di Sidebar atau di Footer 2014-10-21T18:34:00-07:00 Rating: 4.5 Diposkan Oleh: blog rbf