How to change your sidebar to a floating bar?. This  tutorial explains, how to change your existing sidebar in to floating bar. This technique can be applied to a single widget instead of whole sidebar, so that widget only floats along with scrolling.

This can be achieved by adding a Javascript code to your blog. First check whether you have included jQuery in your blog template. This can be done by going Blog template > Edit HTML > Proceed. Then search for this code

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'/>

If it is there, then fine. Otherwise add the above code just below the below code by finding using Cntrl+F and search.

]]></b:skin>

Then search any one of below codes. In default templates

<div class='column-right-outer'>

Or in most of the custom blogger templates(warning!: If you can’t find it out, your id is different)

<div id='sidebar-wrapper'>

Just copy the below code and paste it above the above code.

<script type="text/javascript">
$(function() {
var offset = $(".column-right-outer").offset();
var topPadding = 15;
$(window).scroll(function() {
if ($(window).scrollTop() > offset.top) {
$(".column-right-outer").stop().animate({
marginTop: $(window).scrollTop() - offset.top + topPadding
});
} else {
$(".column-right-outer").stop().animate({
marginTop: 0
});
};
});
});
</script>

Replace the green colored text with your corresponding value(if you are using other templates). For custom templates, the value can be anything like sidebar-wrapper, for example. If it is id=”somevalue”, replace green colored code with #somevalue and if it is class=’somevalue’, then replace with .somevalue.
If you want to animate any other widget, find its Id or class and replace it with green colored text. If you have any doubt, let me know.


Share this article