Archive Pages Design$type=blogging

How To Float A Gadget With Animation In Blogger

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.

how to float blogger widgets with animation

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:

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.

COMMENTS

BLOGGER: 2
Loading...
Beginner to blogging Bing webmaster tools tutorials blogger adsense Blogger menus Blogger Seo(Search Engine Optimization Blogger templates Blogger templates / themes Blogger Tips And Tricks Blogger Widgets And Gadgets Domains / Blogger earn money blogging Facebook widgets in blogger Google rich snippets blogger Google Webmaster Tools tutorials Mobile Blogging Related posts widget blogger social buttons blogger Yandex webmaster tools tutorials
false
ltr
item
101Helper - Blogger tips,tricks,widgets,menus,seo,earn money: How To Float A Gadget With Animation In Blogger
How To Float A Gadget With Animation In Blogger
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.
https://3.bp.blogspot.com/-NJzHBWDxLpM/V-zdjulsK4I/AAAAAAAAGGA/yZlNGn6B3o0Jj_hOjeuyXxcNfpuwxzVYACLcB/s400/how%2Bto%2Bfloat%2Bblogger%2Bwidgets%2Bwith%2Banimation.jpg
https://3.bp.blogspot.com/-NJzHBWDxLpM/V-zdjulsK4I/AAAAAAAAGGA/yZlNGn6B3o0Jj_hOjeuyXxcNfpuwxzVYACLcB/s72-c/how%2Bto%2Bfloat%2Bblogger%2Bwidgets%2Bwith%2Banimation.jpg
101Helper - Blogger tips,tricks,widgets,menus,seo,earn money
https://101helper.blogspot.com/2014/11/how-to-make-sidebar-floating-sliding-in-blogger.html
https://101helper.blogspot.com/
https://101helper.blogspot.com/
https://101helper.blogspot.com/2014/11/how-to-make-sidebar-floating-sliding-in-blogger.html
true
3767912102518445221
UTF-8
Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago