If you look at the bottom of this blog, there is a picture arrow pointing to the top. The image useful as a quick launch a header toward the top of the blog. How to produce it is not too difficult. You only need to add some little code in your blog template. You want to try?
If you look at the bottom of this blog, there is a picture arrow pointing to the top. The image useful as a quick launch a header toward the top of the blog. How to produce it is not too difficult. You only need to add some little code in your blog template. You want to try?
Go to Edit the HTML directly to your blog template and add the following code before </body> code :
<a href=’#’ style=’display:scroll;position: fixed; bottom:5px;right:5px;’ title=’Back to Top’><img src=’http://lh3.ggpht.com/_XXrP_Jobycw/STTl0OdmZ6I/AAAAAAAAADY/61hPxUpuwXU/top.jpg’/></a>
that’s it and save your work !
You can change the position of the button to the right or left to change the part of this script like this :
<a href=’#’ style=’display:scroll;position: fixed; bottom:5px;left:5px;’ title=’Back to Top’><img src=’http://lh3.ggpht.com/_XXrP_Jobycw/STTl0OdmZ6I/AAAAAAAAADY/61hPxUpuwXU/top.jpg’/></a>
Or you can changes the picture and destination URL. like ads link .
<a href=’http://url destination’ style=’display:scroll;position: fixed; bottom:5px;let:5px;’ title=’Back to Top’><img src=’http://your.image.location’/></a>
You can edited the button with your imagination. Happy Blogging!
Update
Make Your Large Or Changing Like My Blog Has
Note: You required Two Images If You Want To Make Image Larger Then You Required one large and same small image.
If you want changing image then you required Two different images.
Go to Dashboard > Layout > Edit HTML
Search For </head> . Before </head>
Add This Code :
<script type=’text/javascript’>
function mouseOver()
{
document.getElementById("b1").src="http://2.bp.blogspot.com/_4fVBL4fjrFI/SWJFdnGHKDI/AAAAAAAABtk/Vdn-WUg6nC8/s1600/Back2Top_2.jpg"
}
function mouseOut()
{
document.getElementById("b1").src="http://4.bp.blogspot.com/_4fVBL4fjrFI/Sa6g-Gqz9uI/AAAAAAAAClU/V4ImwYVHpCw/s1600/B2T_Small.jpg"
}
</script>
Then Go To Bottom Of Your Blog And Add This Code :
<a href=’#’ onmouseout=’mouseOut()’ onmouseover=’mouseOver()’ style=’display:scroll;position:fixed;bottom:5px;right:5px;’>
<img alt=’Back To Top’ border=’0′ id=’b1′ src=’http://4.bp.blogspot.com/_4fVBL4fjrFI/Sa6g-Gqz9uI/AAAAAAAAClU/V4ImwYVHpCw/s1600/B2T_Small.jpg’/></a>
Replace The : http://4.bp.blogspot.com/_4fVBL4fjrFI/Sa6g-Gqz9uI/AAAAAAAAClU/V4ImwYVHpCw/s1600/B2T_Small.jpg
With Your Image You Need When There Is no Mouse On It
And Replace :
http://2.bp.blogspot.com/_4fVBL4fjrFI/SWJFdnGHKDI/AAAAAAAABtk/Vdn-WUg6nC8/s1600/Back2Top_2.jpg
With The link Of The Image You Required When There Is mouse On The Image