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

Spread the love

If you are having a blog and your post are large enough or your blog post have many comments then your webpage becomes so lengthy. It becomes difficult for your readers to navigate your blog. IF your blog readers use mobile to browse your blog than it become more lengthy web page. The same things happen in your Blog homepage for your all blog post. This is a disadvantage for your blog. If your blog is not easy to navigate than you might lose your visitors. This problem can be solved by a Go to up button or Go to bottom bottom. By Go to up button your visitor can go to the bottom  of your blog page through one click. Your visitor can also can go bottom to starting of your page  by one click. This makes your blog navigation easy for your readers.

Those Buttons have fade-IN  and fade-Out effects and you can set left or right side on your Blog.You can also customize the icon of arrow and the color of those bottoms. So those bottoms are completely customizable .

Add Go to Top and Go to Bottom Buttons on Blogger

Do want to add Go to up and Go to bottom buttons to your  Blog ? Then this tutorial can help you a lot. In This tutorial we will learn how to setup those buttons on your Blog. To add those buttons on your blog you have to follow those simple steps.

Step 1.   At first you have to go at Blogger Dashboard, then go to Template >> Edit HTML.

How to Add Go to Up and Go to Bottom Buttons on Blogger

Step 2. Now click anywhere inside the code and press CTRL + F key to get search box inside the HTML box. You will see the search box at the top right side of HTML box.

How to Add Go to Up and Go to Bottom Buttons on Blogger

Step 3.  Now type or copy and paste this tag inside the search box to find the code in the HTML box. After that just hit enter.

The tag have given here:

[wpsm_codebox style=”1″]]]></b:skin>[/wpsm_codebox]

Step 4. If you have found  the tag in the HTML box, then copy and paste this code before the tag you have just found now.

The code have given here:

[wpsm_codebox style=”1″]/* Up and Down Buttons with jQuery
———————————————– */
.button_up{
padding:7px; /* Distance between the border and the icon */
background-color:white;
border:1px solid #CCC; /* Border Color */
position:fixed;
background: white url(http://4.bp.blogspot.com/-7zE5N9GdDUk/T6rH17KE6II/AAAAAAAACeQ/aEcKRyEhxsE/s16/arrow_up.png) no-repeat top left;
background-position:50% 50%;
width:20px; /* Button’s width */
height:20px; /* Button’s height */
bottom:280px; /* Distance from the bottom */
right:5px; /* Change right to left if you want the buttons on the left */
white-space:nowrap;
cursor: pointer;
border-radius: 3px 3px 3px 3px;
opacity:0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
.button_down{
padding:7px; /* Distance between the border and the icon */
background-color:white;
border:1px solid #CCC; /* Border Color */
position:fixed;
background: white url(http://3.bp.blogspot.com/-sukwuViZaYY/T6rH15A8niI/AAAAAAAACeM/YErd0S8lPGA/s16/arrow_down.png) no-repeat top left;
background-position:50% 50%;
width:20px; /* Button’s width */
height:20px; /* Button’s height */
bottom:242px; /* Distance from the bottom */
right:5px; /* Change right to left if you want the buttons on the left */
white-space:nowrap;
cursor: pointer;
border-radius: 3px 3px 3px 3px;
opacity:0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
[/wpsm_codebox]

Note: IF you want to change those arrow icons, just replace those blue URLs with your own.

– To change the color of those buttons you have to change those “white” with your color name.

– you can change the position of those buttons right to left by replacing those “right” text with left.

5 Step. Now again search this tag in HTML box by using search box(CTRL+F).

[wpsm_codebox style=”1″]</body>[/wpsm_codebox]

6 Step. After that, just copy and paste this code above the tag you have found just  now in HTML box.

The code have given here:

[wpsm_codebox style=”1″]

<script src=’http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js’ type=’text/javascript’/>
<div class=’button_up’ id=’button_up’ style=’display:none;’/>
<div class=’button_down’ id=’button_down’ style=’display:none;’/>
<script>
//<![CDATA[
(function(){var special=jQuery.event.special,uid1=’D’+(+new Date()),uid2=’D’+(+new Date()+1);special.scrollstart={setup:function(){var timer,handler=function(evt){var _self=this,_args=arguments;if(timer){clearTimeout(timer)}else{evt.type=’scrollstart’;jQuery.event.handle.apply(_self,_args)}timer=setTimeout(function(){timer=null},special.scrollstop.latency)};jQuery(this).bind(‘scroll’,handler).data(uid1,handler)},teardown:function(){jQuery(this).unbind(‘scroll’,jQuery(this).data(uid1))}};special.scrollstop={latency:300,setup:function(){var timer,handler=function(evt){var _self=this,_args=arguments;if(timer){clearTimeout(timer)}timer=setTimeout(function(){timer=null;evt.type=’scrollstop’;jQuery.event.handle.apply(_self,_args)},special.scrollstop.latency)};jQuery(this).bind(‘scroll’,handler).data(uid2,handler)},teardown:function(){jQuery(this).unbind(‘scroll’,jQuery(this).data(uid2))}}})();
$(function() {
var $elem = $(‘body’);
$(‘#button_up’).fadeIn(‘slow’);
$(‘#button_down’).fadeIn(‘slow’);
$(window).bind(‘scrollstart’, function(){
$(‘#button_up,#button_down’).stop().animate({‘opacity’:’0.2′});
});
$(window).bind(‘scrollstop’, function(){
$(‘#button_up,#button_down’).stop().animate({‘opacity’:’1′});
});
$(‘#button_down’).click(
function (e) {
$(‘html, body’).animate({scrollTop: $elem.height()}, 800);
} );
$(‘#button_up’).click(
function (e) {
$(‘html, body’).animate({scrollTop: ‘0px’}, 800);
} );});
//]]>
</script>
[/wpsm_codebox]

Note: IF you want to remove Go to up button then just delete the code with bold red color. For removing Go to bottom Bottom you have to delete the blue colored text from code.

Step 7. After all customization and hard work now can click “Save template” button to save your settings.

Without any customization your Go to top and Go to bottom buttons should look like this:

How to Add Go to Up and Go to Bottom Buttons on Blogger

If you need any help please comment here or contact us and send your questions and problems.

bnewtech Editorial Staff

Editorial Staff at Bnewtech is a team of reviews and tutorial writing experts led by BTS. Page maintained by BTS.


Spread the love

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.