7/27/2014

How To Make A Blogger Widget Sticky

                                           
How To Make A Blogger Widget Sticky


Making a blogger widget sticky is a great way to capture visitor eyes and force him to make clicks . It can use for adsense ads, social sharing widget or anything on which you want more clicks . 


How to /

*  Log in to your blogger account

* Go to Dashboard > Layout > Add a Gadget > Html/JavaScript
 
* Then, a pop up window will appear

* Now paste the below code in the Content  area





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


* Now, replace  You widget Id  with the widget id which you want to make sticky.

                                                     
How to get widget id /

* Go to Dashboard > Layout > Choose a widget > ( which you want to make sticky ) .

* Then click on Edit ..

                                   
* Now , a pop up window will appear

* Now, click on address bar, and find out widget id,

                   
How To Make A Blogger Widget Sticky


                                                                     
 Tips :- Now , Replace the PopularPosts1 ( or which you want )  With  Your Widget Id ( which you have seen above code ). done