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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6_kJ_Wac8F0f7dOWPoc2leHmmPJ0u0SHYYuAUxwPbpiN2fxm_fS7IagOMIfKJflTb3dAu9AZ77QTsSWLYwkccuH8bm_UTiKUk7SCjraaFaQtmPW73ZR454G3rWr47kdklJ_x6E_t-WWw/?imgmax=800" title="Linkification: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6_kJ_Wac8F0f7dOWPoc2leHmmPJ0u0SHYYuAUxwPbpiN2fxm_fS7IagOMIfKJflTb3dAu9AZ77QTsSWLYwkccuH8bm_UTiKUk7SCjraaFaQtmPW73ZR454G3rWr47kdklJ_x6E_t-WWw/?imgmax=800">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6_kJ_Wac8F0f7dOWPoc2leHmmPJ0u0SHYYuAUxwPbpiN2fxm_fS7IagOMIfKJflTb3dAu9AZ77QTsSWLYwkccuH8bm_UTiKUk7SCjraaFaQtmPW73ZR454G3rWr47kdklJ_x6E_t-WWw/?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
Posts
How can I add back to bottom like the back to top plz help me But I need help
@ 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
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.
@Jyo: thanks for the correction and visit