If you want to make your blog stylish than every blogger then you should work better. Many bloggers are doing this by simply adding a responsive template to their blogs or adding floating share buttons, menus, etc. Some bloggers are uploading cool images in background of the blog or adding a slideshow in background. But if you want to make a smarter blog then you have to work better than others, you should try something that other blogs don't have such as a sliding/floating sidebar? Normally sidebar is stable and doesn't move like you can see on your left hand side on your blog. But how would it look when you scroll down and it also scrolls? it would be so cool! so this time I am sharing this trick with which you would be able to make your blog sidebar float/slide for those who wants to make their blog better than others.
This trick not only makes your blog smarter but also makes your blog navigation excellent, how? the answer is that for example if a visitor scrolls your post page from top to bottom it would be more helpful for him that popular posts are scrolling down so he doesn't need to go to top. This is a unique trick and may be any other blog haven't shared it before me. Its very simple to make your blog sidebar float, you just need to add some scripts in your blog template and all will be done. So to make your blog's sidebar floating/sliding follow below mentioned steps:
- Go to Blogger Dashboard and click on template.
- Click on Edit Html and in the Html page click anywhere in the Html code and search for </head>.
- Copy below code and paste it just below </head>.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2' type='text/javascript'/>
<script type='text/javascript'>
$(function() {
var offset = $(".column-right-outer").offset();
var topPadding = 33;
$(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> - Now click on save template and you are done!
It is very easy to make sidebar float in blogger, you can use this code for other widgets and gadgets also to make them float but to do so you have to make some changes in the above code. To make any other widget float you have to write its id in this code the id of sidebar is .column-right-outer so you have to replace it with the widget's/gadget's id, to find id of your widget go to layout, edit that gadget which you want to float, select its link and in the end of the list you can see id=whatever. Just replace the id with .column-right-outer save your template and check your widget/gadget for changes. Note that widget and gadget are two different things widget is provided by blog or site(built-in) and gadgets are created by bloggers and programmers. As you can see that dot(.) is used with .column-right-outer because it is built-in(provided by blogger) but if you are trying to make a gadget float which you added to your blog from other blogs or site use Hash(#) with it for example a gadget's id is Html and I want to make it float then I have to replace .column-right-outer with #Html
Note: Make sure to replace .column-right-outer three time in code.
I hope you like this post and it helped you. If you have any problem ask in comments or contact me. Follow and subscribe for latest news about blogger tricks.
Search Tags: How to make sidebar floating/sliding in blogger, sliding gadgets, sliding effect for blogger blog, how to make gadgets float in blogger, how to make sliding effect in blogger widgets.
EmoticonEmoticon