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
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.
Oh!
I have cleared the whole process of creating a sticky sidebar widget in the sidebaro of your Blogger blog.
It’s your turn to create your own.
If you have any problem you can ask me by droping comments.
Your feedback is welcome.
Good Luck!

 

Hi. This is Faizan Gul. I am an Engineering Student and tech enthusiast. I love to practice new things and then write about them. In this blog, i would be writing about how to tech guides, tricks and tips and Tech Gadgets Reviews.

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 *