You're here » Home » widget » Back To Top Widget For Blogger

Back To Top Widget For Blogger

Diposkan oleh Unknown di Monday, January 03, 2011

You might have seen a Scroll to Top or Back To Top button on many sites and blogs.
What is the advantage of using a scroll to top or back to top widget?

When you add the scroll to top widget you will get a button on the right corner and when a user clicks on it he can get back to the top of the blog.

How to Install the Back to top widget for Blogger?

Sign in your Blogger account
Go to Layout > Page Elements
Click on add a Gadget
Click on HTML/JavaScript
Now copy paste the code below into the HTML / JavaScript widget


<style type="text/css">
.backtotop a:hover {background:none;}
</style>
<div class="backtotop">
<a style="display:scroll;position:fixed;bottom:5px;right:5px;" class="backtotop" href="#" rel="nofollow" title="Back to Top">
<img style="border:0;" src="<a class="linkification-ext" href="http://lh6.ggpht.com/_7wsQzULWIwo/SgXYJAl0TcI/AAAAAAAABDc/_gSevr05V18/Up1Blue%5B9%5D.png?imgmax=800" title="Linkification: http://lh6.ggpht.com/_7wsQzULWIwo/SgXYJAl0TcI/AAAAAAAABDc/_gSevr05V18/Up1Blue%5B9%5D.png?imgmax=800">http://lh6.ggpht.com/_7wsQzULWIwo/SgXYJAl0TcI/AAAAAAAABDc/_gSevr05V18/Up1Blue%5B9%5D.png?imgmax=800</a>"/>
</a>
</div>

Finally save your widget and view your blog with a floating Back to Top Button at the bottom right corner of your homepage

Posted in: Back to top,widget

4 Responses so far.

Athaullah Shahed says:

June 30, 2011 at 8:28 AM

How can I add back to bottom like the back to top plz help me But I need help
Unknown says:

July 4, 2011 at 4:30 AM

@ Md.Athaullah Shahed
Forgive me for being late replying to your question, I hope my answer can help you

1. Go to Design -> Edit HTML -> search code </body>,
copy and paste the following code at the top of </body>
<a name='to-bottom'></a>
save

2. Copy the following code:

<style type="text/css">
.tobottom a:hover {background:none;}
</style>
<div class="goto">
<a style="display:scroll;position:fixed;bottom:5px;right:5px;" class="goto" href="#to-bottom" rel="nofollow" title="Go to Bottom">
<img style="border:0;" src="http://4.bp.blogspot.com/_rJyl7MtUcdY/S9QFncHAkrI/AAAAAAAAAeo/dklrey4DVTk/s320/next-icon2.png?imgmax=800"/></a>
</div>

Go to page element -> add gadget -> HTML/Javascript -> paste the code -> save
Jyo says:

August 4, 2011 at 10:25 PM

AWESOME widget!! Thanks for sharing this! I just want to point out that the code above has an extra "}" at the end... but otherwise it works great.
Unknown says:

August 4, 2011 at 11:53 PM

@Jyo: thanks for the correction and visit