How to Make Widget or element sticky in your blogger blog.

Elements that float along your screen are pretty cool and attention grabbing. They are more commonly known as the “Sticky” widgets that stick to your screen as you scroll and tend to have a higher click through rate. The main idea here is that these sticky elements/widget need to be contained in some way. Obviously, when scrolling up a page, the sticky element needs to stop sticking when it returns to its original position. But I would argue that almost equally important is having a bottom boundary on the page where the sticky element will stop sticking so that it doesn't spill into the footer or even outside of the page itself. This works very well with all kinds of Elements present in your blogger blog page. You can use it for Events, Popular Posts, Updates and  everything that you want make a sticky.

 

 

Now time to make widget sticky

1. Go To blogger dashboard>>template>>edit html

2. paste the below jquery script before/above </body> tag.

 

   <script>
/*<![CDATA[*/
// Sticky Plugin
// =============
(function($) {
    var defaults = {
            topSpacing: 0,
            bottomSpacing: 0,
            className: 'is-sticky',
            center: false
        },
        $window = $(window),
        $document = $(document),
        sticked = [],
        windowHeight = $window.height(),
        scroller = function() {
            var scrollTop = $window.scrollTop(),
                documentHeight = $document.height(),
                dwh = documentHeight - windowHeight,
                extra = (scrollTop > dwh) ? dwh - scrollTop : 0;
            for (var i = 0; i < sticked.length; i++) {
                var s = sticked[i],
                    elementTop = s.stickyWrapper.offset().top,
                    etse = elementTop - s.topSpacing - extra;
                if (scrollTop <= etse) {
                    if (s.currentTop !== null) {
                        s.stickyElement.css('position', '').css('top', '').removeClass(s.className);
                        s.currentTop = null;
                    }
                }
                else {
                    var newTop = documentHeight - s.elementHeight - s.topSpacing - s.bottomSpacing - scrollTop - extra;
                    if (newTop < 0) {
                        newTop = newTop + s.topSpacing;
                    } else {
                        newTop = s.topSpacing;
                    }
                    if (s.currentTop != newTop) {
                        s.stickyElement.css('position', 'fixed').css('top', newTop).addClass(s.className);
                        s.currentTop = newTop;
                    }
                }
            }
        },
        resizer = function() {
            windowHeight = $window.height();
        };
    // should be more efficient than using $window.scroll(scroller) and $window.resize(resizer):
    if (window.addEventListener) {
        window.addEventListener('scroll', scroller, false);
        window.addEventListener('resize', resizer, false);
    } else if (window.attachEvent) {
        window.attachEvent('onscroll', scroller);
        window.attachEvent('onresize', resizer);
    }
    $.fn.sticky = function(options) {
        var o = $.extend(defaults, options);
        return this.each(function() {
            var stickyElement = $(this);
            if (o.center)
              var centerElement = "margin-left:auto;margin-right:auto;";
            stickyId = stickyElement.attr('id');
            stickyElement
                .wrapAll('<div id="' + stickyId + 'StickyWrapper" style="' + centerElement + '"></div>')
                .css('width', stickyElement.width());
            var elementHeight = stickyElement.outerHeight(),
                stickyWrapper = stickyElement.parent();
            stickyWrapper
                .css('width', stickyElement.outerWidth())
                .css('height', elementHeight)
                .css('clear', stickyElement.css('clear'));
            sticked.push({
                topSpacing: o.topSpacing,
                bottomSpacing: o.bottomSpacing,
                stickyElement: stickyElement,
                currentTop: null,
                stickyWrapper: stickyWrapper,
                elementHeight: elementHeight,
                className: o.className
            });
        });
    };
})(jQuery);
/*]]>*/
</script>
<script type='text/javascript'>
   $(document).ready(function(){
    $(&quot;#mbtsticky&quot;).sticky({topSpacing:0});
   });
</script>

 

Now If you want to make blogger official widgets sticky you need to edit widget code in your blogger template. For example. we add blogger official follow me by email widget and make this widget sticky. Follow the steps below.

 

1. Go to your blogger>> dashboard>> layout and select Follow By Email Gadget.

2. and click on save. widget is added successfully.

3. Go to your blogger dashboard>> template>> edit html and find the following text ( your widget title)

4. in our case we find “Follow by email” our widget code look like this.

 

<b:widget id="FollowByEmail1" locked="false" title="Follow by Email" type="FollowByEmail"> <b:includable id="main"> <b:if cond="data:title != &quot;&quot;"><h2 class="title"><data:title/></h2></b:if> <div class="widget-content"> <div class="follow-by-email-inner"> <form action="http://feedburner.google.com/fb/a/mailverify" expr:onsubmit="&quot;window.open(\&quot;http://feedburner.google.com/fb/a/mailverify?uri=&quot; + data:feedPath + &quot;\&quot;, \&quot;popupwindow\&quot;, \&quot;scrollbars=yes,width=550,height=520\&quot;); return true&quot;" method="post" target="popupwindow"> <table width="100%"> <tr> <td> <input class="follow-by-email-address" name="email" placeholder="Email address..." type="text"/> </td> <td width="64px"> <input class="follow-by-email-submit" type="submit" value="Submit"/> </td> </tr> </table> <input expr:value="data:feedPath" name="uri" type="hidden"/> <input name="loc" type="hidden" value="en_US"/> </form> </div> </div> <span class="item-control blog-admin"> <b:include name="quickedit"/> </span> </b:includable> </b:widget>

 

5. add div tag with your sticky id. final code look like this.

 

<b:widget id="FollowByEmail1" locked="false" title="Follow by Email" type="FollowByEmail"> <b:includable id="main"> <div id='mbtsticky'> <b:if cond="data:title != &quot;&quot;"><h2 class="title"><data:title/></h2></b:if> <div class="widget-content"> <div class="follow-by-email-inner"> <form action="http://feedburner.google.com/fb/a/mailverify" expr:onsubmit="&quot;window.open(\&quot;http://feedburner.google.com/fb/a/mailverify?uri=&quot; + data:feedPath + &quot;\&quot;, \&quot;popupwindow\&quot;, \&quot;scrollbars=yes,width=550,height=520\&quot;); return true&quot;" method="post" target="popupwindow"> <table width="100%"> <tr> <td> <input class="follow-by-email-address" name="email" placeholder="Email address..." type="text"/> </td> <td width="64px"> <input class="follow-by-email-submit" type="submit" value="Submit"/> </td> </tr> </table> <input expr:value="data:feedPath" name="uri" type="hidden"/> <input name="loc" type="hidden" value="en_US"/> </form> </div> </div> </div> <span class="item-control blog-admin"> <b:include name="quickedit"/> </span> </b:includable>

 

6. That’s it your done!!  save it and take a new look of your blog.

7. If you want to make any other widget or element use id “mbtsticky” with div.

<div id=”mbtsticky”>

Your widget code goes here.

</div>

Remember: The ID of your widget should be unique. For example, if you are using id='followbyemail'  in any of your widget then you cannot use the same ID for others.

Sticky sidebar Elements, widget can bring a lot of growth Making Your subscribers. They help in increasing user engagement. You can also use multiple sticky widgets in sidebar. However, this act might Aggravate your Readers. Make sure you have a equal design, so that it don't Irritate your Readers.

Please let us know of your precious views so that we could improve it further if needed. Peace and blessings buddies. Subscribe to our blog via email or RSS and Like our Facebook page to receive free future updates. Enjoy! Thanks for reading our post.