How To Float A Gadget With Animation In Blogger

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:

DEMO - See a Paratrooper floating with Animation

Step 1: Go to Blogger Dashboard and click on template.

Step 2: Click on Edit Html and in the Html page click anywhere in the Html code and search for </head>.

Step 3: 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 = $("#ID OF GADGET").offset();

            var topPadding = 33;

            $(window).scroll(function() {

                if ($(window).scrollTop() &gt; offset.top) {

                    $("#ID OF GADGET").stop().animate({

                        marginTop: $(window).scrollTop() - offset.top + topPadding

                    });

                } else {

                    $("#ID OF GADGET").stop().animate({

                        marginTop: 0

                    });

                };

            });

        });

    </script>

Step 4: Now click on save template and you are done!

Replace #ID OF GADGET with your Gadget's ID which you are wanting to float or scroll when you scroll.

It is very easy to float a gadget in blogger, you just need to add the above code and replace #ID OF GADGET with your gadget ID. You can also make the whole right sidebar float with animation by replacing #ID OF GADGET with .column-right-outer.

If you don't know how to find ID of a gadget then click here

Note: Make sure to replace ID three time in code.

Also If you are floating a gadget with is located above all your gadgets in sidebar then whole sidebar will start to float not only the gadget. If you want to float only a specific gadget than include following CSS code in your template above ]]></b:skin>

#ID OF GADGET {
Position:absolute;
}

And Also keep that gadget below all in sidebar in your layout!

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.

Tweet