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
- 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
Step 1: Create a Widget
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.
- 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.
Step 2: Find Widget ID Which You Want To Make Floating
- 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.
Step 3: Adding Floating Widget Code in Blogger Template
- 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.
- 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.
<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>
<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.
- 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.
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.
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.
Leave a Reply
Want to join the discussion?Feel free to contribute!