How to Make Sticky Widget Sidebar in Blogger


How to Make Sticky Widget Sidebar in Blogger -In terms Sticky website means being ahead or always follow though kept in a scroll mouse. While Sticky Widget Sidebar means to make the sidebar widget that always sticks though we scroll mouse.

To view the DEMO, please scroll to the bottom of this blog and see to the right of this blog. You'll find a widget that always follow, it is called 'Sticky Widget'.

How to Make Sticky Widget Sidebar in Blogger

Sticky widgets to make it, there are three easy steps, please refer to the one-by one of the following ways:

1. Adding CSS code
2. Adding JavaScript code


Adding CSS code:

1. Login to Blogger
2. Click the Template >> Edit HTML
3. Add the following CSS code above ]]></b:skin>
.sticky {
position:fixed;
top:10px;/* distance from the top*/
z-index: 100;
}


Add JavaScript

Save this code above the </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>


Replace # HTML7 the widget ID that will be made sticky.

id widget

4. Save Template


yX Media - Monetize your website traffic with us
yX Media - Monetize your website traffic with us