Make Any Blogger Widget Sticky - Get More Attraction to Your Blog / Website

Hi friends, some of you may be heard about the sticky widgets. For example famous websites like Facebook, twitter has navigation bar that comes with or stick at the bottom when we scrolled down. I think now you got the term sticky widget. It is mainly stands for attracting the users by highlighting certain widgets like popular posts, recent posts, advertisement and so on. Here you can directly get code for this widget. Simply follow the steps.

* 1. Log in to your blogger account.

* 2. Select layout form side bar.

* 3. Click on edit widget or add new gadget.

* 4. Select HTML/Java Script.

* 5. Copy and paste below code.

---

<script>

//<![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> 

---

* 6. Now you have to get your widget id and add that instead of "YOUR  
       WIDGET ID" at the code.

* 7. To get the Widget ID click edit button of widget which has to make as 
       sticky widget. See image below.

* 8. Now a pop up window will come. look at it's toolbar, at the last you will 
       find widget id=

      It look like HTML 10, HTML 11, HTML 12 or something else. Put this ID 
     instead of  red colored label in the code.

* 9. You have done.

ENJOY :-)

Tweet