Create Your Own Sticky Or Floating Widgets in Blogger

Most big blogs have sticky widget that scroll along when visitors move up and down at the top or at the bottom. The effect is usually applied to navigation menu,subscription box.Now in this article I am sharing How to Stick Widgets in Blogger ?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.Just place the position of that widget.

Check out below code and implement that code into your theme to create Your Own Sticky Or Floating Widgets in Blogger.

$Most big blogs have sticky widget that scroll along when visitors move up and down at the top or at the bottom. The effect is usually applied to navigation menu,subscription box.Now in this article I am sharing How to Stick Widgets in Blogger ?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.Just place the position of that widget. How To Add Sticky Widget in Blogger ? Go to Template > Edit HTML Search for </body> and paste the following code above it. <script> // Sticky Widget By triposoft.com //<![CDATA[ rb_makeSticky("WIDGET ID HERE"); // enter your widget ID here function rb_makeSticky(elem) { var rb_sticky = document.getElementById(elem); var scrollee = document.createElement("div"); rb_sticky.parentNode.insertBefore(scrollee, rb_sticky); var width = rb_sticky.offsetWidth; var iniClass = rb_sticky.className + ' rb_sticky'; window.addEventListener('scroll', rb_sticking, false); function rb_sticking() { var rect = scrollee.getBoundingClientRect(); if (rect.top < 0) { rb_sticky.className = iniClass + ' rb_sticking'; rb_sticky.style.width = width + "px"; } else { rb_sticky.className = iniClass; } } } //]]> </script> <style> .rb_sticking {background:#f2f2f2 !important; position:fixed; top:0; z-index:9999; box-shadow:0px 10px 4px -5px rgba(0,0,0,0.3);} </style> Just Replace WIDGET ID HERE with your widget ID. How To Find Widget ID in Blogger ? First Log-in into your dashboard. Then Right click on the edit icon. Just Copy the Link Location. You should be having something similar to the code given below http://www.blogger.com/rearrange?blogID=****************&widgetType=HTML&widgetId=HTML**&action=editWidget&sectionId=crosscol Copy the widget ID after the line &widgetId= and place it in the line specified above. If you have any still doubt feel free to ask us by dropping an comment in comment box given.Stay Tuned at Triposoft.com$

Read This Also : ADD WP Style Follow Widgets for Blogger

How To Add Sticky Widget in Blogger ?

Go to Template > Edit HTML
Search for </body> and paste the following code above it.

<script>
// Sticky Widget By triposoft.com
//<![CDATA[
rb_makeSticky(“WIDGET ID HERE“); // enter your widget ID here
function rb_makeSticky(elem) {
var rb_sticky = document.getElementById(elem);
var scrollee = document.createElement(“div”);
rb_sticky.parentNode.insertBefore(scrollee, rb_sticky);
var width = rb_sticky.offsetWidth;
var iniClass = rb_sticky.className + ‘ rb_sticky’;
window.addEventListener(‘scroll’, rb_sticking, false);
function rb_sticking() {
var rect = scrollee.getBoundingClientRect();
if (rect.top < 0) {
rb_sticky.className = iniClass + ‘ rb_sticking’;
rb_sticky.style.width = width + “px”;
} else {
rb_sticky.className = iniClass;
}
}
}
//]]>
</script>
<style>
.rb_sticking {background:#f2f2f2 !important; position:fixed; top:0; z-index:9999; box-shadow:0px 10px 4px -5px rgba(0,0,0,0.3);}
</style>