Add a go to top and go to bottom button On Your Blog

This is the tutorial on how to create expandable post summaries in blogger templates so as to show Your Post Summary in at the home page and Show the whole post when The "Read More Link" Is clicked....
a) CSS Code: Copy and paste the following code between and . Most advisable place would be just before
]]> or

.gototop{
background:url(http://wolverinehacks.googlepages.com/arrow_top.gif)no-repeat;
display:block;_display:none;
position:fixed;
z-index:9999;
text-indent:-9999px;
width:17px;
height:17px;
overflow:hidden;
outline:none;
left:3px;
bottom:30px;}

.gotobottom {
background:url(http://wolverinehacks.googlepages.com/arrow_down.gif)no-repeat;
width:17px;
height:17px;
display:block;
_display:none;
position:fixed; z-index:9999;
text-indent:-9999px;
overflow:hidden;
outline:none;
left:3px;
bottom:5px;
}

b) HTML Code: Copy and paste the following code between
and
.

TopBottom

Save it and check your blog.

How to customize CSS and HTML Code

a) CSS Code:

.gototop{
background:url(http://wolverinehacks.googlepages.com/arrow_top.gif)no-repeat;
display:block;_display:none;
position:fixed;
z-index:9999;
text-indent:-9999px;
width:17px;
height:17px;
overflow:hidden;
outline:none;
left:3px;
bottom:30px;}

.gotobottom {
background: url(http://wolverinehacks.googlepages.com/arrow_down.gif)no-repeat;
width:17px;
height:17px;
display:block;
_display:none;
position:fixed; z-index:9999;
text-indent:-9999px;
overflow:hidden;
outline:none;
left:3px;
bottom:5px;
}

1. Change the background image link in red to the desired image source.
2. To change the position of these Buttons, change the values as per ur requirements.left:3px;bottom:5px;. For example if you want to place these buttons to right bottom, then replace left:3px;bottom:5px; to right:3px;bottom:5px;

b) HTML Code:

Top#footer' title='Go to Bottom'>Bottom

Go to bottom button is set to #footer. If you do not have #footer in your CSS then, search for #footer-wrapper or #footer-wrap.

Posted in: Blogger, Tutorials