3

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 Mytrickschool.com
// Free to use or share, but please keep this notice intact.
//<![CDATA[
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 (rect.top < 0) {
mts_sticky.className = iniClass + ‘ mts_sticking’;
mts_sticky.style.width = width + "px";
} else {
mts_sticky.className = iniClass;
}
}
}
//]]>
</script>
&nbsp;
<style>
.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);}
</style>
[/xml]

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.

How To Make Blogger Widget Sticky
Rate this post
Md. Hamim Mondal
 

Hello Readers, welcome to my Blog MyTrickSchool.com. I'm Md. Hamim Mondal, an entrepreneur Blogger from India. Here I write Blogging, SEO, WordPress and Make Money Online related Posts.

Click Here to Leave a Comment Below 3 comments