Blogger widgets play a vital role for your blog. Widgets are most frequently used to customize blog sidebars. Each widget represents an area of content, which bloggers can populate with ads, text, links, images, and more. This tutorials will give you the idea on how to make sticky or fix sidebar widget in your blog purposely to emphasize the content of your widget or any other purpose it may serve depending on you.
Demo, you can see Popular post of this Blog.
Let us begin with the tutorial, simply follow the steps below:
Step #1: Log in to your
Blogger Account and Go to your
Blogger Dashboard.
Step #2: Click
Template --> Edit HTML.
Step #3: Find
</head> by Pressing
CTRL + F (Windows) or CMD + F (MAC)
Step #4: Now paste the below code above/before
</head> tag.
<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 = $('#widget Id').offset().top;
var ks_sticky_widgets = function(){
var ks_current_top = $(window).scrollTop();
if (ks_current_top > ks_widget_top) {
$('#widget Id').css({ 'position': 'fixed', 'top':0, 'z-index':999999 });
} else {
$('#widget Id').css({ 'position': 'relative' });
}
};
ks_sticky_widgets();
$(window).scroll(function() {
ks_sticky_widgets();
});
});</script>
Step #5: Change the
widget ID of your widget that you want to make sticky and Save your template.
How to find
widget ID?
Widget ID is unique ID of each of your widget. How to find widget ID, simply go to your
DASHBOARD select
LAYOUT then click EDIT on the widget then you can see on widget ID.
Refer of the screenshot below:
That's it for this tutorial. Happy Blogging!
