How To Make Blogger Widget Sticky

When we surf websites, we are very often see sticky widgets. Now day’s sticky widget very popular in bloggers.  Sticky widget is a widget stick on your webpage if you scroll down your webpage it remain stick on your webpage top and when you scroll up it go back its original position.

Why make widget sticky?

Sticky widget is the best way to grab reader attention.  You can make navigation menu sticky for increasing page view or make email subscriber box sticky for more subscribers or make adsense ads sticky to get more click. You can do any widget sticky which have widget ID. Sticky widget definitely increases your website click through rate.

You might find in the web tons of tutorials how to make blogger widget sticky. So here is another step by step tutorial that teach you how to make widget sticky in blogger.

How to make blogger widget sticky?

Log into blogger account.

Go, Dashboard >>Template >> Edit HTML

Before make any changes first take backup your blogger template. (Read- how to take backup blogger template)

Now using CTRL+F find </body> code. Paste below code before </body> code.

[xml] <script>
// Sticky widget by
// Free to use or share, but please keep this notice intact.
mts_makeSticky("YOUR WIDGET ID"); // enter your widget ID here
function mts_makeSticky(elem) {
var mts_sticky = document.getElementById(elem);
var scrollee = document.createElement("div");
mts_sticky.parentNode.insertBefore(scrollee, mts_sticky);
var width = mts_sticky.offsetWidth;
var iniClass = mts_sticky.className + ‘ mts_sticky’;
window.addEventListener(‘scroll’, mts_sticking, false);
function mts_sticking() {
var rect = scrollee.getBoundingClientRect();
if ( < 0) {
mts_sticky.className = iniClass + ‘ mts_sticking’; = width + "px";
} else {
mts_sticky.className = iniClass;
.mts_sticking {background:#0000 !important; position:fixed !important; top:0; z-index:9999; box-shadow:0px 0px 0px 0px rgba(0,0,0,0.3);}

Now above script change YOUR WIDGET ID word with your preferred widget ID that you want to make sticky.

After adding Widget ID it will look like this –

[xml] mts_makeSticky("HTML1"); // enter your widget ID here [/xml]

Here HTML1 is my preferred widget ID. Now find your exact widget ID which you want to make sticky.

Styling –Style changes can apply on 27th line.

Now save template and enjoy. J

This widget surely increase your webpage click through rate. In this process if you face any issue, feel free leave a comment below.

3 thoughts on “How To Make Blogger Widget Sticky”

  1. Thanks hamim,
    To tel us how to make a sticky widget on our blog, I was searching for this type of artical for long even, I get some article but they are not much clear but in your article is cristrial clear how to create this
    Manish Kumar

  2. Hi Hamin,

    Am not really much of a blogger blogger LOL! But this article will surely help me when i decide to get on the train! Still imagining what it’s going to be like.

    Top stuff you just shared here… Bravo!!!

Leave a Comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.