Adding a Floating Back To Top Button

Add This To Del.icio.us Tweet/ReTweet This Share on Facebook StumbleUpon This Add to Technorati Digg This

If you have very long posts or a long line of comments, your visitors find it difficult to surf through your blog. So that's when you need to add a back to top button, and it's configurations are very easy too.

Login To Blogger Go To > Design > Page Elements.

Simply add a Gadget of HTML/JavaScript type.

add this code in to it:

<!--BACK2TOP-STARTS-->

<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Back to Top"><img onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhX2Ftlq9Lak1oFnS-IUSMju01wEZxYqg2eJjA_Kkjb9g7mRVcX_VxMCEHJZUiJeJK6923luFQA98FNtHq75KLC2IqD8joQgsBPy0mNwnZYqFlAI03LM5zCgn1Yc83PkyR5SA4gDZf5ctc/s1600/up+b.png'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSYe9N1H_VtFA-az8uZ7LkJO1NOL-bY5cNfNhoRfFOzYw-drUgRudmHaQOeiw56ICwEQl0EebsqCqQkRbu5cmn_Zk8C4EIJ5EwnJOwhWv4uq65BrvwItOj91R4YHQqv8VTlEEAeDtfAtM/s1600/up+s.png" onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSYe9N1H_VtFA-az8uZ7LkJO1NOL-bY5cNfNhoRfFOzYw-drUgRudmHaQOeiw56ICwEQl0EebsqCqQkRbu5cmn_Zk8C4EIJ5EwnJOwhWv4uq65BrvwItOj91R4YHQqv8VTlEEAeDtfAtM/s1600/up+s.png'"/></a>

<!--BACK2TOP-STOPS-->

you can change the pics if you wish to.The one ending with "up+b.png"(blue) should be replaced with your larger image and the other one(red) with the small image.

Just save your widget and view your blog with a floating Back-To-Top button at the bottom-right corner of your homepage.

Subscribe to this Blog via Email:

Click here to Subscribe to FREE email updates from "Blogger Tutorials", so that you do not miss out anything that can be valuable to you and your blog!!

Spread It :