Tuesday 20 August 2013

// // Leave a Comment

How to make a blog widget sticky

 Hi everyone, how's you? I think you all are fine and are making your blogs prosper more and more everyday with each and every post by you.
Today I'm going to help you know how to make a blogger blog widget sticky. You can make any widget sticky like Facebook like box, Google+ Follow me, Popular post, Labels, etc. These all widgets if used as sticky can increase traffic to your blog and also increase your follows and likes too. If labels are made sticky they can stop reader to stay on your blog for more time.
You can even make your menu sticky with this code which also enhances your blogger template and also increase traffic.

How to make a blog widget sticky?

  1. Firstly, Go to your blogger dashboard.
  2. Now click on Template > Edit Html.
  3. Search for the following code
</body>
     4.  Paste the below code just above/before </body>

<script>//<![CDATA[
bs_makeSticky("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>
+ Replace Widget_Id with the widget id which you want to make sticky. Example- If the widget id is HTML99 than place the code as
bs_makeSticky("HTML99"); // enter your widget ID here
Now click on save the template and refresh your blog. Scroll down your blog and check the stickiness.
Stay in touch

0 comments:

Post a Comment

Your comments are most welcome. But don't spam.