UrduBloggingHub | Informatvie Blog About SEO & Blogging: Make Normal Blogger Widgets Sticky In Blogger That Scrolls With Page

Sticky widgets are very popular these days. Most of the websites or blogs use sticky bars, menus, subscription boxes or even sticky header. Creating a sticky widget is very easy process. It can be done with help of a small script. In this post we will discuss about converting any normal widget in your blogger blog into a stylish sticky widget.

What is a sticky widget ?

A sticky widget is a normal widget which sticks to the top or bottom of the screen when we scroll the webpage up or down and remains there. When we move the webpage to the original location then this widget will automatically placed on its initial position.

Create any widget sticky in blogger blog:

Step 1: Login to your blogger dashboard.

Step 2: Select your blog.

Step 3: Select Template option and click on Edit HTML option.

Step 4: In the Template code find </head>

Step 5: Paste following code just above it and save the template.


Note: – In the following code replace wchnav1 with your own widget ID

Code:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
    var wc_widget_top = $('#wchnav1').offset().top;
    var wc_sticky_widgets = function(){
        var wc_current_top = $(window).scrollTop();
           
        if (wc_current_top > wc_widget_top) {
          $('#wchnav1').css({ 'position': 'fixed', 'top':0, 'z-index':999999 });
        } else {
            $('#wchnav1').css({ 'position': 'relative' });
        }  
    };
    wc_sticky_widgets();
      $(window).scroll(function() {
         wc_sticky_widgets();
    });
});</script>

How to find widget ID ?

Step 1: Login to your blogger dashboard and select your blog.

Step 2: Select Template option and Click on Edit HTML option.

Step 3: In the template editor window click on Jump to widget option and select the required widget you want to make sticky.

Step 4: It will automatically leads cursor to the required widget code. Now you can find your widget ID in that code for example HTML1, Blog1, HTML2 etc.