How to Make your Sidebar Widget Sticky in Blogger

Let me quickly explain what sticky sidebars are. Have you ever visited a blog with our PC, and you find out that while you are scrolling down, you discover that the sidebars still remains there, That is because they are sticky.

Having a sticky sidebar can be a blessing and also a problem in disguise. If you are an Adsense publisher you will notice that that is against their policy, Implementing the sticky sidebars may not get you kicked out from Adsense program but your chances of having an issue with their policy are why I urge people to stay away from making their sidebars sticky.

The blessing, if you have used any sticky sidebars with Adsense you will notice that it can really increase you CTR.

It would really be nice if you can implement the sticky sidebars with an E-mail subscription form or any other 3rd party Ads, etc. But definitely not with Adsense.

Let's Make your Sidebars Sticky

A short description of what we are going to do.

We are just going to install a JS plugin and then select which widget we want to be sticky in the sidebars. Pretty easy right?

Let's get started,

Login to your Blogger >Layout. Then select the widget you want to be sticky in your sidebars. Click edit, then locate the widget ID from the URL Above.

Copy down the widget ID. It's then time to make your sidebars sticky.

In your blogger dashboard > theme > edit HTML.

--You will need to use CRTL+F to locate

</body>

It's usually one of the last code in your HTML After you have found it you will paste the code below directly above it,

//<![CDATA[
bs_makeSticky("YOUR_WIDGET_ID"); // enter your widget ID here
function bs_makeSticky(elem) {
var bs_sticky = document.getElementById(elem);
var scrollee = document.createElement("div");
bs_sticky.parentNode.insertBefore(scrollee, bs_sticky);
var width = bs_sticky.offsetWidth;
var iniClass = bs_sticky.className + ' bs_sticky';
window.addEventListener('scroll', bs_sticking, false);
function bs_sticking() {
var rect = scrollee.getBoundingClientRect();
if (rect.top < 0) {
bs_sticky.className = iniClass + ' bs_sticking';
bs_sticky.style.width = width + "px";
} else {
bs_sticky.className = iniClass;
}
}
}
//]]>
</script>
<style>
.bs_sticking {background:#f2f2f2 !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:relative\9 !important;}
</style>