Add "Back To Top" And "Go Down" Links To Blogger Blog

Back To Top n Go Down


If you check my blog, on the Right Side you will see two arrows pointing in the opposite direction. Try clicking on both of them. The one pointing up will take you to the Top of the Page, while the one pointing down will take you to the Bottom of the Page. You must have seen the Back To Top of Page link in many blogs, but I felt that there is a need of a Go Down button. Yup, that's what I am calling it, a "Go Down" link because that's the work it does. You can also call them Scroll To Top and Scroll To Bottom links.


Now adding this Widget/Gadget/Plugin to your Blogger Blog is very easy and requires simple HTML code. Adding the Back To Top Page Icon is very easy, but for the Go Down Icon you will have to add a single line of HTML code in your blog template. But its very easy to do.

Step 1:
Login to your Blogger account. Visit the Layout of the blog for which you want to add these buttons. Now click on Add A Gadget option and select the HTML/Javascript option and paste the following code in it


<a style="display:scroll;position:fixed;bottom:260px;right:5px;" href="#" rel="nofollow" title="Back to Top"><img style="border:0;" src="http://i31.tinypic.com/2vtqqt3.png"/></a>

<br/>

<a style="display:scroll;position:fixed;bottom:225px;right:5px;" href="#GoDown"><img style="border:0;" src="http://i32.tinypic.com/16lle91.png"/></a>


Click on Save and refresh your blog.

Step 2:
Now you will be able to see both the icons on your blog. However you have one more step remaining. Now click on Edit HTML option and select the Expand Widget Templates option.

Now search </body> in the blog template and paste the following code just above it .

<a name='GoDown'/>

Now click on Save Template and refresh your blog. The Back To Top and the Go Down will be working properly.

Now there will be some people who would like to customize this Widget for their blog. So for them I have highlighted some of the code in Red colour. Here are the following modifications that you can make.

1. Widget appears on Left Side
2. Increase/Decrease the distance of the Icons from bottom
3. Add different icons

1. If you want the widget to appear on the Left hand side instead of Right side, then replace right:5px; with left:5px; at both the places in the code.

2. If you want to Increase/Decrease the distance between the icons or from the bottom, then change the value of bottom:260px; and bottom:225px;

3. If you want different icons then just replace the url in red with the url of your icon. Important: It would be better if you copy the image and upload it yourself. Both the image url's are highlighted in Red colour. Just replace it with your own image url


0 comments: