» » Cara Membuat Widget Sticky di Sidebar Blog

Cara Membuat Widget Sticky di Sidebar Blog - Halo sobat di pagi hari ini saya akan memberikan tutorial sedikit mengenei tentang bagaimana  Cara Membuat Widget Sticky di Sidebar Blog . sobat pasti sudah tau apa itu widget sticky . yups benar sekali widget stiky adalah widget yang selalu menempel atau melayang meskipun kita scroll kebawah . untuk demonya sobat coba scroll ke bawah dan lihat disidebar saya pasti ada widget sticky nya yang selalu menempem atau melayang pada sidebar .

cara-membuat-widget-sticky

Berikut cara mudah membuat widget sticky pada sidebar blog. :
Ada dua langkah untuk membuat widget sticky ini

A. DENGAN 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;
}

B.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. Taraaa selamat anda sudah dapat membuat widget sticky pada blog sobat . Demikian artikel saya tentang Cara Membuat Widget Sticky di Sidebar Blog semoga bermanfaat bagi anda , jika ada pertanyaan silahkan bertanya pada saya . ok akhirul kalam wassalaammualaikum wr.wb.

About Redi

Hi there! I am Hung Duy and I am a true enthusiast in the areas of SEO and web design. In my personal life I spend time on photography, mountain climbing, snorkeling and dirt bike riding.
«
Next
Newer Post
»
Previous
Older Post

No comments:

Leave a Reply