Sticky widget is a any widget that will stick or float on its original position and will not move while you are scrolling your blogger article downwards.

how-to-make-blogger-sticky-widget-tutorial

But before anything else, what are the main reasons why you want to make a widget to stick and never move from its position? Maybe;

a. You have a very long article, and you want a certain widget to be seen every time even though your reader is already at the bottom of your page.

2. Or maybe, you want your ad to float and also always be seen by your readers.

For this tutorial, I will show you how to make any blogger widget sticky. I can only say that the process is too easy. See the steps below.

1. First, you need to know the ID of the widget that you want to make sticky. Go to Blogger Layout, find the widget click Edit. And in the page that will popup, you can find the ID in its URL. See the image below.


2. After getting the ID, copy and paste it in a Notepad. Now, go to Blogger Theme. Click Edit HTML.


3. Now, inside your theme html editor, press CTRL + F (Find) and type </body> (see image below). Then press Enter key to find the line of code of closing body tag.


4. Above </body> tag, copy and paste the given code below.

<script>//<![CDATA[
HG_makeSticky("HTML7"); //
function HG_makeSticky(e){function t(){var e=c.getBoundingClientRect()
e.top<0?(n.className=i+" HG_sticking",n.style.width=a+"px"):n.className=i}var n=document.getElementById(e),c=document.createElement("div")
n.parentNode.insertBefore(c,n)
var a=n.offsetWidth,i=n.className+" HG_sticky"
window.addEventListener("scroll",t,!1)}
//]]></script>

Note: Change HTML7 to the exact ID of your widget. Example: Label3, HTML5, etc.

5. Now, repeat step No. 3 but this time, type </style> and then press Enter key. Below </style> closing tag copy and paste the given code below.

<style>
.HG_sticking {position:fixed !important;top:2%;z-index:9999; margin-top:0;position:relative9 !important}
</style>

6. After that, click "Save theme" button to save your work. Done!

7. Test your sticky widget now if it is working or not.

If you want a tutorial video of this tutorial watch the video below.

The live example of this tutorial is find right here on our website. You can see the sticky Google Adsense links ad on the right side bar below the Category widget.

If you have any question, please feel free to leave your comments below. Thanks a lot.