Sticky (Fixed) Sidebar Widget for Blogger That Scrolls With You
Sticky sidebar widgets are helpful for highlighting or promoting any particular element of your blog. Floating sidebar widget gets more attention than a regular sidebar widget. So you can use this sticky sidebar widget for blogger, to promote your most important post, affiliate links, advertisement and get 100 times better result than a normal widget.
I have seen many sticky widgets which are built for blogger, but most of those are not suitable with bloggers. Different type of issues remains for the maximum sticky widget. Even blogger’s sticky widget create issues for responsive blogger templates.
In this post, I will show you how to use sticky blogger widget with responsive themes. I will provide a small script. I will also show you how to configure and use this floating sidebar widget in your blogger blog without any problem.
Notes :
- This script will float one of your blogger sidebar widgets.
- The widget will not overlap with your footer are.
- It will be hidden for the mobile devices if you are using a responsive template.
Sticky Sidebar Widget For Blogger:
1. Login to your blogger account. Go to the “Template” > “Edit HTML” section.
2. Search for the “jQuery” module in between two <head>…</head> section. If you are already using this, then avoid this step. Otherwise, copy the module and paste it right above the </head> tag in your Blogger template.
jQuery Module:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'/>
3. Now search for the ending “</body>” tag. Copy the script given below and paste it right above the “</body>” tag.
Code :
<script type='text/javascript'>
//<![CDATA[
$(function() {
if ($('#PopularPosts1').length) {
var el = $('#PopularPosts1');
var stickyTop = $('#PopularPosts1').offset().top;
var stickyHeight = $('#PopularPosts1').height();
$(window).scroll(function() {
var limit = $('#footer-wrapper').offset().top - stickyHeight - 20;
var windowTop = $(window).scrollTop();
if (stickyTop < windowTop) {
el.css({
position: 'fixed',
top: 20
});
} else {
el.css('position', 'static');
}
if (limit < windowTop) {
var diff = limit - windowTop;
el.css({
top: diff
});
}
});
}
});
//]]>
</script>
Note :
Replace the above highlighted widget ID with your sidebar widget ID.
Replace the highlighted footer div ID with your footer div ID to stop floating the widget over the footer.
Replace the above highlighted widget ID with your sidebar widget ID.
Replace the highlighted footer div ID with your footer div ID to stop floating the widget over the footer.
4. In my case, the sidebar widget I want to float is “Popular Post Widget”. The ID of my Popular Post Widget is “PopularPosts1”. You can see in the above image. I have replaced it with this. And my footer area started with the div ID “footer-wrapper”. So I have replaced it with “footer-wrapper”.
5. Now click on the “Save Template” button. Open your blog in a web browser. You will see that your widget is floating while scrolling down.
Adding CSS for The Sticky Sidebar Widget:
In this stage, we have to define our sticky sidebar widget’s maximum width. Because, when it will start floating, it will come out from our defined sidebar area. For resolving this problem and determine our sticky widget’s width, we can put a small piece of CSS code in our template.
Code:
#PopularPosts1{width:100%;max-width:320px} @media only screen and (min-width:260px) and (max-width:989px){ #PopularPosts1{display: none!important;}}
Note: This sticky sidebar widget could create issue for responsive template. If you are using responsive template then my suggestion is to hide this sticky widget for mobile devices. Otherwise this will float over your entire site if someone browses from mobile or tab.
Go to “Template > Edit HTML” and search for “]]></b:skin>”. Simply copy the code and paste it right above this. Replace the widget ID “PopularPosts1” with yours. You can also define the highlighted maximum width of your sticky sidebar widget based on your requirement.
Now click on the “Save Template” button. Go to your blog and reload it in the browser. Scroll down to see if it is working correctly or not. I hope you have successfully added the sticky sidebar widget in your blogger blog. If you like this widget, then please share it.
Sticky (Fixed) Sidebar Widget for Blogger That Scrolls With You
Reviewed by Ankit Sharma
on
21:53
Rating:
Reviewed by Ankit Sharma
on
21:53
Rating:
No comments: