rss

Sunday, August 22, 2010

Adding a Floating Back To Top Button

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/AVvXsEiwEXTA68u0trAL8gUFCpP1dEBrQe1YPciiG9y6L7pDkk6uIAmNOxuMSxfGGqvjWrehYkIkDniqnc45Z0IN6UZuJAX1YtoxScV9XtEyQYDNHC-qJGwwpSMIVa8ODSF3ELLeg0Gnlu_fRjg/s1600/up+b.png'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoWdGbOFDrjnJsr9hrPl62qKwe_qmeN0Zl7EEMatg5Qao68b3zs2UPjn9TOz15nMt8AhJNxXFOnzPD4ud3sROlMNymUcLWNNLOsRS-z3OypZrOLcJxku9k_YolYXw5ZmEG9DTqluFRfyA/s1600/up+s.png" onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoWdGbOFDrjnJsr9hrPl62qKwe_qmeN0Zl7EEMatg5Qao68b3zs2UPjn9TOz15nMt8AhJNxXFOnzPD4ud3sROlMNymUcLWNNLOsRS-z3OypZrOLcJxku9k_YolYXw5ZmEG9DTqluFRfyA/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 "Everything About Blogging", so that you do not miss out anything that can be valuable to you and your blog!!

Spread It : Share On Facebook ! Share On Google Buzz ! Add To Del.icio.us ! Share On Digg ! Share On Reddit ! Share On LinkedIn ! Post To Blogger ! Share On StumbleUpon ! Share On Friend Feed ! Share On MySpace ! Share On Yahoo Buzz ! Get These Share Buttons ! Share On Google Reader ! Google Bookmark ! Send An Email ! Blog Feed !


0 comments:


Post a Comment

 

Recent Posts

Followers

Recent Comments