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
Letakin script plugin tersebut dibawah script jQuery inti →<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>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js' type='text/javascript'></script>
, 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/AVvXsEh9c1QCICH469iclD_OCJdgfJH-Mxhih5q0bgcEvkSuzM5F3dK4iQJWv_JOH9bssdWQxcGzQPraxFswsxSNV9f2R0f5QFGccjq5RaZxLH-11Du-PC02U5vzCKOMn-6ksv2lWtxw9Y9LCaA/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>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/AVvXsEh9c1QCICH469iclD_OCJdgfJH-Mxhih5q0bgcEvkSuzM5F3dK4iQJWv_JOH9bssdWQxcGzQPraxFswsxSNV9f2R0f5QFGccjq5RaZxLH-11Du-PC02U5vzCKOMn-6ksv2lWtxw9Y9LCaA/s1600/close.png') no-repeat center center;
border: none;
margin-left: 5px;
position: absolute;
width: 20px;
height: 20px;
cursor: pointer;
}
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: BloggerMint.
Happy sticky \m/
Tidak ada komentar:
Posting Komentar