How to Make Sidebar widget Fixed in Blogger While Scrolling Page

Blogger is a great platform, though it is a little behind in the plugins department.

Here we are talking about the sidebar widget fixed in Blogger while scrolling the page.

It looks quite cool if a user scrolls a page and a sticky widget in the sidebar goes down till the post ends.

It’s quite obvious, it can have a higher click-through rate(CTR) as well. Because it can grab the attention of the reader entirely.

If you have something important to show to the readers, you can display it in the blogger sidebar widgets.

Saying important it could be any kind of updates which you think your visitor should know.
For Instance – Exclusive Deals, Updates, Popular Posts, Sign Up forms, sticky social bar. I have seen some blogs even place Advertisements as well. Even that is quite sensible.

So here we are going to create a sticky widget with minimum effort and less amount of code as well.

Also Read: How to Add Contact Form In Blogger

Make the sidebar Widget Fixed In Blogger

Let us move forward, and get into action.

#1. Create a Widget/Gadget

Step 1. Login to your Blogger account

Step 2. Navigate towards the Layout and click on it.

Step 3. Now we are supposed to add a widget, so click on Add a Gadget.

Step 4. A pop-up window will appear with a lot of gadgets in the option.

Step 5. Find “HTML/JavaScript,” and click the (+) icon shown in the above image.
Now here we are about to add our code in the box. You can find the code below.

#2. Add code in the HTML/JavaScript box to make a floating sidebar widget

Now copy the below code into that, but don’t save it now

<script>
//<![CDATA[
HG_makeSticky(“WIDGET_ID”); // enter your widget ID here
function HG_makeSticky(elem) {
var HG_sticky = document.getElementById(elem);
var scrollee = document.createElement(“div”);
HG_sticky.parentNode.insertBefore(scrollee, HG_sticky);
var width = HG_sticky.offsetWidth;
var iniClass = HG_sticky.className + ‘ HG_sticky’;
window.addEventListener(‘scroll’, HG_sticking, false);
function HG_sticking() {
var rect = scrollee.getBoundingClientRect();
if (rect.top < 0) {
HG_sticky.className = iniClass + ‘ HG_sticking’;
HG_sticky.style.width = width + “px”;
} else {
HG_sticky.className = iniClass;
}
}
}
//]]>
</script>
<style>
.HG_sticking {background:#ffffff !important; position:fixed !important; top:0; z-index:9999; box-shadow:0px 10px 4px -5px rgba(0,0,0,0.3); margin-top: 0; position:relative9 !important;}
</style>

#2. Replace the Widget ID HTML/JavaScript box.

Step 1. Go back to the blogger layout, and click on “Edit” of that particular widget, which you want to make sticky in the sidebar.

Step 2. Once you click on the edit button you will be able to see a “Widget ID” in the top bar of it. See the below image for better insights.

Step 3. Copy that Widget ID and replace it with the source code.

Step 4. Once the actual widget ID is replaced, Hit the save Button.

Step 5. And also Click on Save Arrangement in the Blogger Layout.

There you go, you are done and your widget will be sticky in the sidebar.

In fact, not only at the sidebar you can make the widget sticky anywhere you would like to, following the same process.

By simply copying the Widget ID and replacing the same in the code as well.

Do let us know if you face any issues creating a sticky widget in the comment section below, we would be happy to help you out with this.

Also Read: How to Backup and Restore Blogger Template