Sunday, May 12, 2013
Well, now i'd like to talk about How To Add Go To Top & Bottom Buttons On Blogger Blog. These buttons could make senses on your blog, these will help your visitors a lot in case of navigating on your site from top to the bottom side or vice versa. It's sometimes such an hard time for us when we are visiting a webpage and then we are scrolling up and down too much, it's usually happening on a long website, maybe isn't like that on the short ones.

There are some good points of the buttons that you'll likely love. First good point, the buttons that i'm going to give to you here doesn't make use of javascript code, wich you too know that javascript code itself will cost such another load for a website. Second good point, the code the buttons take is surprisingly short. And third good point, there are also a Home and Reload buttons in addition to the top and bottom buttons, but you can also get rid of these buttons suppose that you don't feel comfort with these, and that it will make the code even shorter again.

Adding Go To Top & Bottom Buttons To Blogger Blog

This require you to edit your template code, so go to Edit HTML tab on your blogger, and don't forget to back up your template code before you start editing.

1. Find the closing tag ]]></b:skin> among your template code and copypass the following code before it.

#Bottom-top_nav {display:scroll; position:fixed; bottom:1px; right:1px; z-index:99;}
#Bottom-top_nav a {filter:alpha(opacity=65); -moz-opacity:0.65; opacity:0.65; border:0;}
#Bottom-top_nav a:hover {filter:alpha(opacity=100); -moz-opacity:1; opacity:1;}
#Bottom-top_nav img {border:0;}

2. Find the tag <body> among your template code and copypass the following code below it.

<div id='Bottom-top_nav'>
<a href='#' onClick='window.location.reload()' title='Reload page'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizr6lB7XyPUXTyF3i6NaYvxuHBtyhJYq8kPFbCfIgjW1jXC_IWcSiUXn-sqJ3w3vh5HV2ckO5js9JGaXQukGzwYybrc7gHm9-MhVWClTted1uAvUsiIeaAMaGYTONvHpogSCL-Vs-RIfbW/s52-c/Reload%252520page-792350.png'/></a>
<a expr:href='data:blog.homepageUrl'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhG6bic1uTUO8dTerToRu6usuyTTK91Ej577mutZ2jjB5EE9IQCyEdRwhf0VIHG6Ohr2QNL75FkDb6EhiU_coV6QExBx9rpC3MVQYCGXDRHVFhx8CUJjjeL6yvipemvSLaSwveFU6SDMMvg/s52-c/Home-791077.png'/></a>
<a href='#' title='Go to top'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVOaMZnpeVWMMVUPVXL2uGqeXzbA4IXWSIYXaUsvkB7WF1niKQYSA59Rr2_8ct2yg3kKZE5MQZLnobHCgwlv-JJ8hVXg6ljpcF9XNK4Dhu5ebs8ePcl6ukrhzczwA3bC2-x1ZEuBztN8fp/s52-c/Go%252520to%252520top-790059.png'/></a>
<a href='#footer' title='Go to bottom'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeItBJOBR-fay4aJUdhF3pajk3YZoe3N-_ppH-CWv6VlEeM39PqAseZ7PZKjUWmBX0P2yTYFTQ3uAqwlW_UxPanss0DJIVGstg8dgM_WMQKJJpf0Vk3nobp-TH8ADBBcsoCgCNHGrzN1a0/s52-c/Go%252520to%252520bottom-787526.png'/></a> </div>

3. Save your changes and you are done.

Editing Instructions

-You can choose to get rid of the images and replace those with a plain text
-you can change the "#footer" with another (CSS command) code as existing in your template code. And that, if your template doesn't contain the code #footer, such the bottom button above will not work, you have to replace it with the existing one in your template

Simple Go to top & bottom Buttons

If you prefer to use the simplier version, then ignore the above tutorial and follow the following. There is only a single step to do, find the closing tag </body> among your template code and then copypass the following code above it.

<a href='#' title='Go to top'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVOaMZnpeVWMMVUPVXL2uGqeXzbA4IXWSIYXaUsvkB7WF1niKQYSA59Rr2_8ct2yg3kKZE5MQZLnobHCgwlv-JJ8hVXg6ljpcF9XNK4Dhu5ebs8ePcl6ukrhzczwA3bC2-x1ZEuBztN8fp/s52-c/Go%252520to%252520top-790059.png'/></a>
<a href='#footer' title='Go to bottom'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeItBJOBR-fay4aJUdhF3pajk3YZoe3N-_ppH-CWv6VlEeM39PqAseZ7PZKjUWmBX0P2yTYFTQ3uAqwlW_UxPanss0DJIVGstg8dgM_WMQKJJpf0Vk3nobp-TH8ADBBcsoCgCNHGrzN1a0/s52-c/Go%252520to%252520bottom-787526.png'/></a>

That's it. Adding go to top & bottom buttons on blogger blog, simple and/or advanced version. If you face any trouble to implement the buttons on your blog, you post a comment and let me fix that.

0 comments:

Post a Comment