Membuat Sticky Widget Sidebar di Blogspot/Blogger

Sticky Widget | Pada kesempatan kali ini sya akan membagikan tutorial yang sangat singkat ini.

Sticky dalam Bahasa Indonesia artinya menempel. Sticky Widget Sidebar berarti membuat widget yang selalu menempel walaupun mouse kita scroll. Untuk demonya sendiri bisa dilihat di samping blog kang vanno.

Untuk membuat Sticky widget ini, ada tiga langkah mudah, silahkan simak satu persatu.
1. Menambakan kode CSS
2. Menambah kode JavaScript

Berikut Tutorialnya

Langkah 1 : Tambahkan CSS di atas kode </style> / ]]></b:skin>
.sticky {
  position: fixed;
  top: 10px; /* jarak dari atas*/
  z-index: 100;
}
Langkah 2 : Simpan Javascript 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.


Selamat berkreasi dengan Sticky widget.....

http://blog.kangismet.net/2012/10/membuat-sticky-widget-sidebar-di.html
Previous
Next Post »

3 comments

Click here for comments
Unknown
admin
July 13, 2014 at 6:46 AM ×

Kerenn gan..widgetnya
Saling follow GFC + Tukar link yuks..

http://tipsfadhil.blogspot.com

Reply
avatar
dangta.id
admin
August 12, 2014 at 8:32 PM ×

Info yang bermanfaat,izin pasang di blog saya gan...:2thumbup

Reply
avatar

Berkomentarlah dengan sopan.
Berkomentarlah sesuai topik yang dibahas #ThinkHIGH! ^_^ ConversionConversion EmoticonEmoticon