Blogger Widget in Fixed Position

In this post, we will show you how to make Widget position fixed or sticky on blogger websites.

We will see how to make a widget sticky in the blogger sidebar. We recently did this on this website and it is the easiest way to make the sidebar widget sticky in blogger.

Blogger Widget in Fixed Position

Follow the below steps:
1. Go to layout and create a Widget

2. Once you created the Widget then add content to the Widget.

3. Now move the tab called Template and choose the Edit HTML option to move to the blog code.

4. In the editor, do a ctrl+F and search the name of the widget you want to make sticky (which you copied). In my case, it is “HTML4”.

5. Once you will find that widget in the code, copy the ID of the widget. Usually, it will be something like HTML5 or HTML6, etc. Copy it!

6. Again do a ctrl+F and search for </head>

7. Now paste the below code above the </head> tag and change the widget ID with the ID you copied-
<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 = $('#WidgetId').offset().top;
		var ks_sticky_widgets = function(){
			var ks_current_top = $(window).scrollTop(); 
				
			if (ks_current_top > ks_widget_top) { 
			  $('#WidgetId').css({ 'position': 'fixed', 'top':0, 'z-index':999999 });
			} else {
				$('#WidgetId').css({ 'position': 'relative' }); 
			}   
		};
		ks_sticky_widgets();
		  $(window).scroll(function() {
			 ks_sticky_widgets();
		});
	});
</script>
Make sure to replace the #WidgetId with the ID you copied in earlier steps. One more thing you should note here is, if your blog already has the ajax.googleapis.com then don’t paste the below line else it won’t work.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>

Now just save your code and you are good to go. Check your blog and the widget you have made sticky will be showing even when you will scroll to the bottom.

You can see below our website example:


This was all about how to make a widget sticky in the blogger sidebar. This is the easiest way to make the sidebar widget sticky in blogger.


Comments