How To Make A Sticky Widget In Blogger

Views:

Friends, You know what is sticky widget. It is simple, when we scrolling down a page, some widget is stick on page with scrolling its position is fixed for viewers attention. Later i share some sticky menu bars options. But this is very interesting one. You can make any widget like sticky. It is not like an overly method. So you can also apply this features to your ad services. It make an attention to people and you will get more income by accidental clicks. It is very simple trick. You can install this sticky option to widget by reading this article. I found this trick by searching on internet. Finally i tested it. It is 100% working with my template. Add this sticky option and enjoy…

First Log in your Blogger account.

Go to Template option.

Click on Edit HTML option.

Then find (CTRL+F) </body> tag.

Copy below code and paste it above </body> tag.

<script>
// Sticky widget by Internet Explora (Master Hacks)

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