How to Create a Floating (Sticky) Sidebar Widget in Blogger

/0 Comments/in , /by

How to Create a Floating (Sticky) Sidebar Widget in Blogger

How to Create a Floating (Sticky) Sidebar Widget in Blogger
How to Create a Floating (Sticky) Sidebar Widget in Blogger

Floating sidebar or widgets are very helpful for increasing the click through rate (CRT).
Floating sidebar are also useful when you want to put something in front of your reader e.g. if you want to place AdSense Ads in the sidebar of your blog, then floating sidebar widget will be very useful because these widgets just stick to the sidebar even if the users scroll the pages down. Hence your visitors look these widgets more than any other part of the page.
I have personally checked the floating widget for AdSense and the results were incredible they increased the Click Through Rate (CRT) very well.

Now you will be clear about the importance or benefits of Floating (Sticky) sidebar widget.
But there is a problem it is not easy to add a Floating (Sticky) Sidebar widget in Blogger.
The method which I have presented below is very useful for adding Floating (Sticky) sidebar widget to your blog.

Benefits of Floating (Sticky) Sidebar Widget

There are many benefits of using a Floating (Sticky) sidebar widget on your blog some of them are listed below.
  • Increases the click through rate (CRT)
  • Useful for increasing Adsense Revenue.
  • Use Sticky Email newsletter subscription widget for getting more subscribers.
  • Forces users to check your contents by displaying the content on 1/3 part of the page.

How to Create a Floating (Sticky) Sidebar Widget in Blogger

To create a floating widget in the sidebar of your blogger blog just follow the steps given below.

Step 1: Create a Widget

The first thing you need to do is to add a widget to the sidebar of your blog so follow below steps to add a widget to your blog.
If you want to make a present sidebar widget sticky then leave this step.
  • Login to your Google Account and select the blog where you want to add a floating sidebar widget.
  • Go to the menu and click on the Layout option.
    click on the Layout option
  • In the Sidebar click the link “Add a Gadget” and select HTML/JavaScript option there and put your HTML code or anything in the box.
    click the link "Add a Gadget" and select HTML/JavaScript

Step 2: Find Widget ID Which You Want To Make Floating

Once you have successfully created a widget the next step is to find the Widget ID.
Widget ID is a unique identity number (code) assigned to each and every widget of your blog, every widget will have different ID than others.
Finding widget ID is just like a breeze.
  • Click Edit to the widget whose ID you want to find.
  • In the new window, look at the URL and go to the end of URL there you will find words like null&widgetId=HTML1, here HTML1 is Widget ID.
    Find Widget ID Which You Want To Make Floating

Step 3: Adding Floating Widget Code in Blogger Template

This is the most important step for adding a floating (sticky) widget to your blog because in this step we will play with coding.
Don’t worry you don’t need to code for your blog’s template, instead, this is a very simple process and I will provide you with all the important codes below. So just follow the below steps.
  • Go to the Template Section of your blog by clicking on the Template option in the left menu panel and then click on Edit HTML button.
    Adding Floating Widget Code in Blogger Template
  • Click on the template editor and press CTRL + F keys together to open the Search Box.
  • In the search box search for http://ajax.googleapis.com/ajax/libs/jquery/ if you found this code in your template then copy the code number one from below otherwise copy code number two.
    Adding Floating Widget Code in Blogger Template
Code Number One


 <script type=”text/javascript”> 
$(function() {
var ks_widget_top = $(‘#widget Id‘).offset().top;
var ks_sticky_widgets = function(){
var ks_current_top = $(window).scrollTop(); 
if (ks_current_top > ks_widget_top) { 
$(‘#widget Id‘).css({ ‘position’: ‘fixed’, ‘top’:0, ‘z-index’:999999 });
} else {
$(‘#widget Id‘).css({ ‘position’: ‘relative’ }); 
} 
};
ks_sticky_widgets();
$(window).scroll(function() {
ks_sticky_widgets();
});
});</script>

Code Numer Two


 <script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js” type=”text/javascript”></script>
<script type=”text/javascript”> 
$(function() {
    var ks_widget_top = $(‘#widget Id‘).offset().top;
    var ks_sticky_widgets = function(){
        var ks_current_top = $(window).scrollTop(); 
            
        if (ks_current_top > ks_widget_top) { 
          $(‘#widget Id‘).css({ ‘position’: ‘fixed’, ‘top’:0, ‘z-index’:999999 });
        } else {
            $(‘#widget Id‘).css({ ‘position’: ‘relative’ }); 
        }   
    };
    ks_sticky_widgets();
      $(window).scroll(function() {
         ks_sticky_widgets();
    });
});</script>

 

  • Replace the Widget ID with your own unique Widget ID which you had found in the above step.
  • Now find </head> tag of your template and paste the copied code just above the </head> tag.
    Adding Floating Widget Code in Blogger Template
  • Click Save Template button and look at the sidebar of your site’s homepage. You will find your Sidebar widget sticky even if your scroll down.
Note: If you didn’t name your widget then it will not work for you.

Final Words

Floating widget is good for a blog but make sure you’re adding important article in your widget or add such post which can attract people. Only then you’ll take benefits from this widget. If you add useless thing it can harm your users experience on your site. So, always go for users satisfaction because it always works for you. This method is easy you just have to copy this code and paste it in your blog. And your job will be done. Blogger is a CMS which only works with codes. Any kind of template not work here. So, if you are web designer, then it is easy for you to use blogger like a pro but if you are not, then it may be technical a little bit for you but not hard because you can find any template code from Google and can use it in your blog.

So, this was our guide about adding a sticky widget in sidebar we hope you’ll like it. By writing this guide for you, our job is done and now it is up to you that when you implement is on your blog. So, good luck and share this post with others so they can also use this code in their blog. Feel free to ask questions about your problems in the comment section. Our team is here to guide you step by step. Remember to add quality content in the widget that can increase your site user experience.

More from my site

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

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