How to Create a Floating "Sticky" Sidebar Widget in Blogger

Advertisements
Elements that float along your screen are pretty cool and attention grabbing. They are more commonly known as the “Sticky” floating widgets that stick to your screen as you scroll and tend to have a higher click through rate. This is the reason why at MyBloggerLab, we are using a Floating subscription widget in the sidebar that has been quite useful for us. Many of our users kept on emailing us about how they can create a “Sticky” floating sidebar widget in Blogger. In the past, we have already shown you how to make a Sticky Floating Footer bar in Blogger. In this article, we will show you how to create a floating “sticky” Sidebar widget in Blogger?

Remember: This works pretty well with all kinds of widgets present in your sidebar. It is not necessary that a person can only use if for email subscription boxes. You can use it for promotion of your items, galleries, popular posts, Instagram photos, and basically everything that you wish for. 

Step#1: Adding a New Widget: 

The First thing you need to do is to add a new widget in your sidebar so that later on you can make it sticky. Go to Blogger.com >> Layout >> Add a Gadget >> Add HTML/JavaScript >> and name the widget as “My Sticky Gadget”. Now writing anything in the HTML body and once everything is down press “Save” button located at the end of the page.

Step#2: Installing a “Sticky” Plugin:

Now after properly adding a new widget in your blog, it’s time for some serious work. This time go to Template >> Edit HTML >> and search for the ending </body> tag and just above it paste the following JavaScript code.

<script>
/*<![CDATA[*/
// Sticky Plugin
// =============
// Author: Syed Faizan Ali
(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#3: Creating a Widget “Sticky” in Blogger:

After adding the JavaScript code, you have to search for the name of your widget. Since, we have named it as "My Sticky Gadget". Therefore, in the template coding search for "My Sticky Gadget". To be able to search correctly it is essential that you must use the built-in search box provided by the Blogger template editor.

Note: To enable the search box click anywhere in the template editor and press "CTRL+F". Now on finding "My Sticky Gadget" you will able to see a code similar to the the following one.

<b:widget id='HTML32' locked='false' title='My Sticky Gadget' 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>

Now after finding the code as mentioned above, just replace it completely with the following coding.

<b:widget id='HTML32' locked='false' title='My Sticky Gadget' 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>

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

All done: Once everything is done, press the "Save Template" button to finish the process.

Sticky floating sidebar widgets can bring a lot of growth in your sign ups. They help in increasing user engagement. You can also use multiple floating widgets in sidebar. However, this act might annoy your visitors. Make sure you have a balanced design, so that it don't annoy your users

We hope that this article have helped you in creating a Sticky floating sidebar widget in your Blogger website. This plugin is robust enough to be used in any element of your sites. Let us know what you think in the below comments.
Advertisements

The Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).

Comment With:
OR
Choose Wisely!

33 comments

June 2, 2013 at 12:52 PM

yaar faizan intahai talented boy hai.

June 2, 2013 at 10:06 PM

Of course!

June 4, 2013 at 10:55 PM

can i use this floating widget on google adsense ads in my blog sidebar..I have seen others using it but i want to know if it is against the Adsense TOS...You are doing a great job here....Thanks

Editorial Team MOD
June 5, 2013 at 2:21 AM

Well not exactly, Google has mentioned in there policy that Floating ads are not allowed. But I have seen on my big sites that they are using Adsense Floating ads.

So, to keep yourself on the right side don't apply them. Cheers

June 5, 2013 at 7:00 AM

The floating technique can be used to google adsense ads? (floating or drifting)

Editorial Team MOD
June 5, 2013 at 7:55 AM

Anything you want!

June 18, 2013 at 3:45 PM

Hi Syed,
Unfortunately ran into a problem...

The sticky widget is working fine but other sidebar widgets are overlapping it when scrolling down. In other words, it is not being shown properly like yours. Please go here to see what I mean:

http://cricketnns.blogspot.com

Thank you very much for all the help! Really appreciate it!

Editorial Team MOD
June 19, 2013 at 12:31 AM

You are using a Defected Template. So can't really help. Try using different themes. May be anyone from Templateism.com

June 27, 2013 at 6:11 AM

but how to make the widget gone / dissapear when user reach comment box, email me : aliefrezki555@gmail.com

Editorial Team MOD
June 27, 2013 at 12:08 PM

We will soon release that one. Stay tuned!

July 5, 2013 at 2:24 AM

Why this Floating sticky sidebar don't work with Dazzling theme,
Please help me, Thanks before :)

Editorial Team MOD
July 5, 2013 at 2:35 AM

We cannot use two floating items at a time. Dazzling has Floating header so it cannot have Floating Sidebar! Cheers

July 5, 2013 at 4:41 AM

Thanks for replying, but i still have 1 question..
i already used the template without floating header, is there any
way to solve this problem ?

Thanks before :)

July 15, 2013 at 11:26 PM

Good idea...compliments!

July 17, 2013 at 1:00 AM

i added widget directly in templete but my hellobar and right side 300*600 adsense ad gets over this while scrolling

July 18, 2013 at 5:38 PM

i used the widget and it shows up fine on the blog...however when I go to edit it, it says....invalid widget, error 400


Any ideas?

July 22, 2013 at 1:21 AM

Nice Tutorial.. I have one problem.. This floating widget scrolls too much down until it covers the footer..How can I stop the scrolling until a certain point? Please help

Editorial Team MOD
July 24, 2013 at 4:33 PM

We tried hard but Blogger is not robust enough to stop this scrolling

August 1, 2013 at 12:22 PM

hi Syed, thanks for this widgets, it works great! but, I have 1 query. sometimes the widgets hides behind other widgets.
I want to specify
z-index: 100;
in css to bring the widget container in front of other widgets. is there any way to specify this in you java script code. Thanks for this great java script, realty liked it. keep it up!

Editorial Team MOD
August 2, 2013 at 2:13 PM

That might happen because those other widgets might be set to position:absolute; so make sure they are not. Hope that helps!

Cheers!

September 17, 2013 at 11:10 PM

I have the same problem which Dinesh mentioned on my blog tweaksformypc.com. Could you please explain how can I fix it. I am not a programmer, so step by step instruction is much appreciated. Thank you

September 22, 2013 at 1:16 PM

So what about 9gag? they are also using it

Editorial Team MOD
September 23, 2013 at 10:22 AM

They are Premium Adsense Publishers

October 15, 2013 at 4:33 PM

Nice Post,,,,

October 29, 2013 at 2:15 PM

thanks for yor reply
It worked on some widgets, but some widgets are still hiding behind.
still I want to specify "z-index: 100;" , any idea?

Editorial Team MOD
November 3, 2013 at 4:21 AM

You need to provide lower z-index to those widgets which are overlapping

November 5, 2013 at 2:54 PM

i fixed it by adding another java script which changes the z-index,, thanks for your help, its see how it is working on my blog brain-of-computer.blogspot(dot)com

January 12, 2014 at 5:19 AM

Hey! I have a problem the widget is transparent is does not overlaps can you suggest?

January 28, 2014 at 1:06 AM

Thanks! This is really great!

How do I make my sticky sidebar gadget have a solid background. Right now it's transparent and doesn't look good when it moves over other gadgets.

Thanks!

Editorial Team MOD
January 28, 2014 at 8:36 AM

Can you please provide your BLOG URL?

January 28, 2014 at 8:48 AM

I have made it solid background but the problems is it could not overlap the adsense.

Editorial Team MOD
January 28, 2014 at 8:50 AM

Thats why i am saying to provide blog url so i can provide you a fix.

January 28, 2014 at 9:02 AM

http://liveminimally.blogspot.com/

It's started to do this weird thing where it only shows my recent blog list. If this link doesn't take you to the main page just click on any of the links on the list shown and that should take you there.

You'll see 2 different sticky menus. One on the main page and a second conditional one here >>> http://liveminimally.blogspot.com/p/blog-page_25.html

Thanks so much for your help!!

Post a Comment

We’re eager to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.

Helping You to do Cool Things With Blogger Since 2012™.

© Copyright 2012 - 2014. MBL Networks, All Rights are Strictly Reserved.