Sticky Bar with jQuery Plugin

Menengok blog sobat Beben kayaknya dia keseng-sem sama trik ;)) Membuat garis lurus tipis transparan dengan posisi fixed dibawah. Biar cantik mungkin dikasih line lempeng² macam entuh :"> Karena Beben Koben si bloglang anu ganteng kalem tea ini selalu mementingkan gaya dalam hal trik apapun juga, maka cekarang cama eikeh dikacih deh yang gaya punya buat garis lurus fixed bottom dan bisa transparan jiga discroll kebawah, lalu bisa ditutup juga b-) \m/ Tentunya dengan bantuan jQuery tercintah duong :x yg sering kita panggil jQuery plugin :P Pokonya mah fungkeh coy...cek get dot

View Live demo
How bro and bri, are you like that with "Sticky Trending Bar Using jQuery And CSS" You want get that!!! Don't move your channel, panteungin terus blog full stylish ini. Mari kita acak-acak cara dan memasukan kedalam blogspot :-"

jQuery Plugin

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
(function() {
//settings
var fadeSpeed = 300, fadeTo = 0.5, topDistance = 30;
var sibar = function() { $('#stickybar').fadeTo(fadeSpeed,1); }, stbar = function() { $('#stickybar').fadeTo(fadeSpeed,fadeTo); };
var inside = false;
//do
$(window).scroll(function() {
position = $(window).scrollTop();
if(position > topDistance && !inside) {
//add mouseover events
stbar();
$('#stickybar').bind('mouseenter',sibar);
$('#stickybar').bind('mouseleave',stbar);
inside = true;
}
});
//close
$('#closebtn').live('click', function(event) {
$('#stickybar').toggle('show');
});
})();
});
//]]>
</script>

Letakin script plugin tersebut dibawah script jQuery inti →

, kalau mau mencoba bisa sobat letakin diatas tag </body>

Kode CSS

#stickybar {
background: #333;
font-size: 15px;
color: #FFF;
padding: 10px 20px;
position: fixed;
bottom: 0;
left: 0;
z-index: 2000;
width: 100%;
text-align: center;
}
#stickybar a {
color: #FFF;
text-decoration: none;
}
#stickybar a:hover {
color: red;
}
#closebtn {
background: #333 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidOSYInzoWGFpMMuDlDJLbnJEqtf15MVNHlPTzVmO3qp5VLNax00nLAeSF7rylbv-KKJmwsEffnYNx3-G7113BFWeLmf5X8GeAhQluVKZ554fesgXAtc351TwwfRECfQ-Xu48ZJwkEvGQ/s1600/close.png') no-repeat center center;
border: none;
margin-left: 5px;
position: absolute;
width: 20px;
height: 20px;
cursor: pointer;
}

Tauk dong harus dimana memasukan kode CSS pada basis blogspot, yaaa benar sekali diatas genteng =)) </b:skin>

Kode HTML

<div id='stickybar'>



This is Demo for Sticky trending Bar <a href='your add url here'>Your title goes here</a>



<input type="button" id="closebtn" />



</div>

Masukin didalam tag <body> template. Awas jangan bentrok ama penutup tag lainnya ;))

SAVE!

Enjoy it my broder moy4n, you now have the great sticky bar with jQuery plugin on your blog. Come else blogger, put it too in your blog b-)
Resource by: .
Happy sticky \m/