Sobat, Kali ini saya akan berbagi trik yang bermanfaat.Trik ini saya ambil dari template
DroidPluss Milik
Kang Ismet.Caranya Cukup Mudah sob, tinggal di tambahin Javascript,HTML, dan CSS.Gimana ? Tertarik dengan trik ini ? silahkan di simak yah sobat.
CSS
/* STYNKI */
.sticky {
position:fixed;
top:10px;
z-index: 100;
width:274px;
}
#stickywidget {
display: block;
clear: both;
background: #409FC5;
padding: 15px;
width: 280px;
margin: 0px 0px 10px 0px;
}
#stickywidget h3 {color: #fff !important;
padding: 5px 0px 15px 0px !important;
margin: -1px -1px 0;
font-weight: normal;
text-shadow: 1px -1px 2px #ccc;
}
HTML
<div id='stickywidget'>
<h3>Sosial Media</h3>
<div class='fb-like' data-action='like' data-href='https://www.facebook.com/adik.yasdil' data-layout='standard' data-share='false' data-show-faces='false' data-width='285' style='margin-bottom:5px'/>
<div><a class='twitter-follow-button' data-lang='id' href='https://twitter.com/MaverickZetta'>Ikuti @MaverickZetta</a></div>
<script type='text/javascript'>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<div class='g-follow' data-annotation='bubble' data-height='20' data-href='//plus.google.com/102300855950251107036' data-rel='author'/>
<div class='g-plusone' data-count='true' data-href='http://yasdil-blog.blogspot.com/' data-size='medium' data-width='100'/>
</div>
Javascript
<script type='text/javascript'>
$(document).ready(function() {
var stickyWidgetTop = $('#stickywidget ').offset().top;
var stickyWidget = function(){
var scrollTop = $(window).scrollTop();
if (scrollTop > stickyWidgetTop) {
$('#stickywidget ').addClass('sticky');
} else {
$('#stickywidget ').removeClass('sticky');
}
};
stickyWidget();
$(window).scroll(function() {
stickyWidget();
});
});
</script>
Cara Pemasangan
1. Pemasangan CSS
- Taruh Kode CSS yang saya berikan tepat di ATAS kode </style> atau ]]></b:skin>
2. Pemasangan HTML
- Taruh Kode HTML yang saya berikan tepat di BAWAH kode Sidebar Wrapper
3. Pemasangan Javascript
- Taruh Kode Javascript yang saya berikan tepat di ATAS kode </body>
Nah, Gimana sobat ? cukup bermanfaat artikel kali ini kan :D .Sampai berjumpa di Artikel Berikutnya yah ^_^