How to make sticky widget on blogger blog

This is an important piece of information for those who want to create a sticky  widget on top of the posts in the main page on Blogger blog. There is a easy way to do it. Most Popular blogs have sticky widget that scroll along when visitors move up and down. The effect is usually applied to navigation menu or subscription box, but what kept most people thinking is how they can add the effect to their blog widget. Does that sound like you? This effect will make a widget float downward when visitors scroll down and stay on its original position when visitors scroll up and reach the widget position. The trick is applicable to any widget so far it has a unique ID, regardless of its location, be it top, bottom or sidebar.

Install it on blogger

How to find code in new Updated HTML Template Editor..

Just in HTML Code Area and Press CTRL+F Your will see Search box on the right top corner in HTML Template Editor. like screenshot Below.

Note:-  Don’t search in Browser Search Box.

 

1. Go your Blogger Dashboard>> Template>> Edit HTML>> and press CTRL+F And find the Following Code.

</body>

2. Paste the following code above the </body> tag in your template.

Or if you prefer not to touch the template, you can simply paste it in a HTML/Javascript (in Blogger) or a Text widget (in WordPress). If you choose this route, make sure you position this widget below (after) the widget that you want to make sticky.

<script>
// Sticky widget by Bloggersentral.com

// Tutorial at http://www.bloggersentral.com/2013/04/how-to-make-any-widget-sticky.html

// Free to use or share, but please keep this notice intact.

//<![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; top:0; z-index:9999; box-shadow:0px 10px 4px -5px rgba(0,0,0,0.3);}
</style>

3. Get the ID of the widget or element you want to make sticky and enter it in line 6 (replacing "YOUR_WIDGET_ID"). For example let's say the widget ID is HTML9, then code line 6 would become:

bs_makeSticky("HTML9");

4. Preview before saving.

If you have still any problem please feel free to post queries below in comment box. Thanks for reading our post. Blessing Pals….