How to Make Any Widget Sticky in Blogger?

You can observer that 70% of the Successful Blogs/Websites are using Sticky Widgets. Sticky means, Fixing the Gadget at a Constant Position (or) It just sticks to the Website and even though you Scroll top to Bottom, It sticks there. Still confused? Ok. Have you listened about StickyBar or Hellobar? It's just like that. Have a Demo in this Blog, Check the Random Posts widget. Most of the People are using this Trick for Ads purpose and Wise people are using it for Random Posts widget. Here, I'm presenting the Easiest way to Make any Widget sticky.

How to Make Sticky Widgets in Blogger Blogs?

First Go to Blogger > Your Blog Layout > Add New Gadget and Create the Widget according to your Requirement. Note the Widget ID first as shown in the Below image.

Now, Go to Template > Edit HTML.
Find for </body> tag and Just above it, Paste the Following code.

<script>//<![CDATA[
sticky_widget("ATKWIDGETID");function sticky_widget(elem){var sticky_widget_function=document.getElementById(elem);var scrollee=document.createElement("div");sticky_widget_function.parentNode.insertBefore(scrollee, sticky_widget_function);var width=sticky_widget_function.offsetWidth;var iniClass=sticky_widget_function.className + ' sticky_widget_function';window.addEventListener('scroll', sticky_widget_css, false);function sticky_widget_css(){var rect=scrollee.getBoundingClientRect();if (rect.top < 0){sticky_widget_function.className=iniClass + ' sticky_widget_css';sticky_widget_function.style.width=width + "px";}else{sticky_widget_function.className=iniClass;}}}//]]></script><style>.sticky_widget_css{background:#f5f5f5 !important; position:fixed !important; top:41px; z-index:9999; box-shadow:0px 10px 4px -5px rgba(0,0,0,0.3); margin-top: 0; position:relative\9 !important;}</style>

Now, Replace ATKWIDGETID with the Noted Widget ID and Save your Template.

That's it! Let's have a Look at you Blog. Your widget is now with Sticky Effect!