TutorialWebForBlogger

TW4B It's about a blog that talking about blogging widgets, blogger template tutorials, search engine optimization SEO and other useful blogging tips

Go to top and go to bottom buttons on your blog : 1. Go to Dashboard, click Design, click Edit HTML 2. Find code of HTML below : ]]&... nopict

How to Add Go to Top and Go to Bottom Buttons in Blogger

Go to top and go to bottom buttons on your blog :

1. Go to Dashboard, click Design, click Edit HTML

2. Find code of HTML below :

]]></b:skin>

you can use (Ctrl+F)

3. Right Before ]]></b:skin> place code of HTML below :

.gototop{
background:url(http://sites.google.com/site/blogfuelblogfuel/widgets-js/orange_arrow_up.png)no-repeat;
display:block;_display:none;
position:fixed;
z-index:9999;
text-indent:-9999px;
overflow:hidden;
outline:none;
width:128px;
height:256px;
right:88px;
bottom:8px;}
.gotobottom {
background: url(http://sites.google.com/site/blogfuelblogfuel/widgets-js/orange_arrow_down.png)no-repeat;
width:128px;
height:256px;
display:block;
_display:none;
position:fixed; z-index:9999;
text-indent:-9999px;
overflow:hidden;
outline:none;
right:8px;
bottom:8px;
}

NOTES :

You can change:
  • http://sites.google.com/site/blogfuelblogfuel/widgets-js/orange_arrow_up.png

  • http://sites.google.com/site/blogfuelblogfuel/widgets-js/orange_arrow_down.png

  • width:128px;

  • height:256px;

  • bottom:8px;

  • right:8px;

  • right:88px;

4. Find code of HTML below :

</body>

you can use (Ctrl+F) to find easily

5. Right Before </body> place code of HTML below :

<a class='gototop' href='javascript:scroll(0,0)' title='Top Page'>Top</a><a class='gotobottom' href='#footer' title='Bottom Page'>Bottom</a>

6. Click Save Template.

Done. Now, you've already added go to top and go to bottom buttons on your blog.

There are no comments yet for 'How to Add Go to Top and Go to Bottom Buttons in Blogger'