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 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
1 comment:
No lo he entendido de todas forma gracias
Post a Comment