Add a go to top and go to bottom button On Your Blog- Learn Latest Computer And MObile hacking Tricks


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 <head> and </head>. Most advisable place would be just before
]]></b:skin> or </b:skin>

.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
<body> and
</body>.

<a class='gototop' href='javascript:scroll(0,0)' title='Scroll to top of this page'>Top</a><a class='gotodown' href='#footer' title='Go to Bottom'>Bottom</a>

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:


<a class='gototop' href='javascript:scroll(0,0)' title='Scroll to top of this page'>Top</a><a class='gotobottom' href='#footer' title='Go to Bottom'>Bottom</a>

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.

0 Responses to “Add a go to top and go to bottom button On Your Blog- Learn Latest Computer And MObile hacking Tricks”

Post a Comment

Subscribe to: Post Comments (Atom)