What Are Sticky Widget?
The widgets which keeps scroll with the scroll of the mouse. These widgets will visible all the time while the visitors scrolls.As per now blogger do not have any default option for sticky widget but it can be done by simple steps.
Well if you wanna check out the demo then you can check my Header, you should be seeing Follow Us widget being scrolling with you automatically when you come down.
How To Make Any Widget Sticky?
Step 1: Go To Template>Edit HTML.
Step 2: Find </head> and right above it paste the below codes.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
var ks_widget_top = $('#HTML8').offset().top;
var ks_sticky_widgets = function(){
var ks_current_top = $(window).scrollTop();
if (ks_current_top > ks_widget_top) {
$('#HTML8').css({ 'position': 'fixed', 'top':0, 'z-index':999999 });
} else {
$('#HTML8').css({ 'position': 'relative' });
}
};
ks_sticky_widgets();
$(window).scroll(function() {
ks_sticky_widgets();
});
});</script>
The widgets which keeps scroll with the scroll of the mouse. These widgets will visible all the time while the visitors scrolls.As per now blogger do not have any default option for sticky widget but it can be done by simple steps.
Well if you wanna check out the demo then you can check my Header, you should be seeing Follow Us widget being scrolling with you automatically when you come down.
How To Make Any Widget Sticky?
Step 1: Go To Template>Edit HTML.
Step 2: Find </head> and right above it paste the below codes.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
var ks_widget_top = $('#HTML8').offset().top;
var ks_sticky_widgets = function(){
var ks_current_top = $(window).scrollTop();
if (ks_current_top > ks_widget_top) {
$('#HTML8').css({ 'position': 'fixed', 'top':0, 'z-index':999999 });
} else {
$('#HTML8').css({ 'position': 'relative' });
}
};
ks_sticky_widgets();
$(window).scroll(function() {
ks_sticky_widgets();
});
});</script>
Step 3: Changes In HTML Codes.
a. Change Green text to your widget id whom you want to make sticky.
b. If you have already included the script in yellow text please do not add it again.
c. Red text shows the widget position.
The location of widget with the current code will be top left.
Change Red text with 'top':0, 'right':0 to change its position to Top Right.
Change Red text with 'bottom':0, 'right':0 to change its position to bottom Right.
Change Red text with 'bottom':0, 'left':0 to change its position to bottom left
