How To Create Sticky Floating Widget In Blogger

A sticky floating widget is a widget which takes a fixed position in your blog. Its position does not depends on or change on scrolling the page. It will float to the same position as your scroll up or down the web page.
This type of widgets are very useful and becoming in trends these days. People mostly use this feature in their subscription widget to increase their number of subscribers. You can also use it to show a news, notice or any product about your blog. Some people also use it in their ad to increase their earnings. It depends on your choice of using this feature.

Create Sticky Floating Widget In Blogger

Note :
1. Google AdSense don’t like their ads to be sticky. So they might ban your account.
2. Avoid adding too many floating widgets because it may annoy the users and also make other widgets less effective.

In this post, I will show you how you can make your widgets to be floating or sticky. Follow the steps given below carefully.

Create Sticky Floating Widgets In Blogger

Step 1 : First, you have to create a simple widget. Go to Layout>>Add a Gadget. Give a name for it. Here, I am using ‘Sticky Floating Widget’ as an example.
Step 2 : Now, go to Template>>Edit HTML.
Create Sticky Floating Widget In Blogger
Step 3 : Click anywhere inside the codes and using the keys Control+F, open the search box.
Create Sticky Floating Widget In Blogger
 
Step 4 : Search for </body> and paste the following code just above it.
             <script>
/*<![CDATA[*/
// Sticky Plugin
// =============
// Author: Kewal Dubey
(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(){
    $(“#mblfloater”).sticky({topSpacing:0});
   });
 </script>
Step 5 : Now, search for the name of your widget. Here, I am searching for ‘Sticky Floating Widget’. Look for the code similar to shown below.
<b:widget id=’HTML2′ locked=’false’ title=’Sticky Floating Widget’ type=’HTML’>
            <b:includable id=’main’>
  <!– only display title if it’s non-empty –>
  <b:if cond=’data:title != &quot;&quot;’>
    <h2 class=’title’><data:title/></h2>
  </b:if>
  <div class=’widget-content’>
    <data:content/>
  </div>
</b:includable>
          </b:widget>
Step 6 : Replace the above code with the code given below.
            <b:widget id=’HTML2′ locked=’false’ title=’Sticky Floating Widget’ type=’HTML’>
            <b:includable id=’main’>
<div id=’mblfloater’>
  <!– only display title if it’s non-empty –>
  <b:if cond=’data:title != &quot;&quot;’>
    <h2 class=’title’><data:title/></h2>
  </b:if>
  <div class=’widget-content’>
    <data:content/>
  </div>  </div>
</b:includable>
          </b:widget>
Step 7 : Save the template and you are done with it.
You have successfully created a floating widget for your blog.
I hope this tutorial helped you to create a sticky floating widget for your blog. If you faced any problem in it then feel free to comment your problem below.

Add a Comment

Your email address will not be published. Required fields are marked *