Amazing Blogger Tricks

The navigation links/buttons are very much important when we have large number of posts on a blog page. The navigation links/buttons will always be very important in case the blog has a lot many number of posts being displayed or the posts are too long. If all such cases it will be very frustrating to scroll up and down to go through the posts we have on the blog. We can avoid scrolling if we have a button that can do the scrolling for us.

The buttons that we are going to add to the blogger have a cool effect of fade in and fade out. The buttons will be faded out when the during the process of scrolling by clicking any one of the buttons.

Let us see the process of adding "Go to Top" and "Go to Bottom" buttons to blogger.

1. Go to Dashboard -> Template -> Edit HTML

2. Search for the below piece of code
]]></b:skin>

3. Add the below mentioned code just before ]]></b:skin>

/* Up and Down Buttons with jQuery
----------------------------------------------- */
.button_up{
padding:7px; /* Distance between - border and the icon */
background-color:white;
border:1px solid #CCC; /* Button's Border Color */
position:fixed;
background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggJccDAjdbfgRW51oKjtfBg6-kvMZxylupBrAHQk6RTyPicwW5YkPpfn-E_v1FmeD3eDIktsTLEjM09SBtGX4FAQu5P0ZYdVmiFRGSLkZ_0_jtIZM9BdbvwrL7snKVuELUvvcrrz3TU9hE/s1600/arrow_up.png) no-repeat top left; /* Go to Top Button Image */
background-position:50% 50%;
width:20px; /* Button's width */
height:20px; /* Button's height */
bottom:280px; /* Distance from the bottom of the page */
right:5px; /* Change - right to left if you want the buttons on 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 - border and the icon */
background-color:white;
border:1px solid #CCC; /* Button's Border Color */
position:fixed;
background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5AQexs9Ld3KAHU1vPC0P_jB7xeXs9jMsMlI5YWirtiSFcw_A2AsDF3VVY7GLfuhTg3dg00oPyO3I4dcHsQDqVlurK-ZuQk_VUaUdGER3hi9RW8nZPsZFFf6SNCkzyOPQAhO-oWqXSXvVM/s1600/arrow_down.png) no-repeat top left; /* Go to Top Button Image */

background-position:50% 50%;
width:20px; /* Button's width */
height:20px; /* Button's height */
bottom:242px; /* Distance from the bottom of the page */
right:5px; /* Change - right to left if you want the buttons on left */
white-space:nowrap;
cursor: pointer;
border-radius: 3px 3px 3px 3px;
opacity:0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}

NOTE: We can make changes to the above code if we want to change the buttons width, height, background etc., as mentioned as comments in the above code.

4. Now search for the below code
</body>

5. Add the below code just before the </body>

$(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>

6. Save the template and view blog to see the changes.

Now the blog should get updated and the buttons "Go to Top" and "Go to Bottom" should be displayed.

NOTE: If we don't need "Go to Top" button remove the below part of code from the above script.
<div class='button_up' id='button_up' style='display:none;'/>
And if we don't need "Go to Bottom" button then remove the below part of code from the above script.
<div class='button_down' id='button_down' style='display:none;'/>

If you like the post, take a couple of minutes to comment and share.
Your comments are most valuable and would help me come up with better posts.