Friday, September 18, 2020
Home Blogging Tips & Tweaks How to Add a Back to Top And Bottom Button In Blogger

How to Add a Back to Top And Bottom Button In Blogger

The lengthiness of a post is sometimes considered to indicate the quality of a good write up by some individuals but the truth is that not all lengthy post/articles are interesting or informative. If you are fond of writing and publishing very lengthy post, then you should try to add an option in your blog page that will allow your blog visitors simply go to the bottom or top of the page with ease. I have in the past shown you guys How to Add a Floating Back to Top Button to Blogger which when added in a blog page, allows users go directly to the top of the page when clicked on without the need of using the browser’s scroll bar in a situation where the page’s content is too lengthy.

Have you ever wondered what will happen when a visitor click on the back to top button and is taken to the top of your blog’s page, only to realize that there was an information which he/she has missed from the bottom of the page and urgently need it? You don’t expect such visitor to start scrolling down your blog page gradually using his/her browser’s scroll bar in a situation where the page contains a very lengthy article. Do you? Well you need not worry because I have taken the liberty to make changes to the Back to Top button widget I showed you guys earlier by adding a back to bottom button that will enable your blog visitors go directly to the bottom of your blog page once at the top of the page. One fascinating feature of this widget is the fade-in and fade-out effect as one scrolls close to or away from where the button is expected to start appearing.

To add this widget to your Blogger page so that visitors can either go to the top or bottom of your blog page depending on where they are in the page, then follow the easy step by step guide below

  • Login to your Blogger Dashboard.
  • Navigate to Template >>> Edit HTML.
  • With the help of Ctrl + F, search for
]]></b:skin>
  • Copy the below CSS code and paste just before/above ]]></b:skin>
/* Start Back to Up and Down Buttons from EdHelper Lab.

----------------------------------------------- */

.button_up{

padding:7px;

background-color:white;

border:1px solid #CCC;

position:fixed;

background: white url(https://www.educativehelper.com/wp-content/uploads/2019/12/EdHelper_arrow_up.png) no-repeat top left;

background-position:50% 50%;

width:20px;

height:20px;

bottom:280px;

right:5px;

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;

background-color:white;

border:1px solid #CCC;

position:fixed;

background: white url(https://www.educativehelper.com/wp-content/uploads/2019/12/EdHelper_arrow_down.png

) no-repeat top left;

background-position:50% 50%;

width:20px;

height:20px;

bottom:242px;

right:5px;

white-space:nowrap;

cursor: pointer;

border-radius: 3px 3px 3px 3px;

opacity:0.7;

filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);

}

/* End Back to Up and Down Buttons from EdHelper Lab.

----------------------------------------------- */
  • Next search for </body> using Ctrl + F.
  • Copy the code below and paste immediately after/below the </body> tag.
<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>

OPTIONAL CHANGES TO MAKE:

If you wish to change the back to top or back to bottom buttons, you can do so by replacing http://2.bp.blogspot.com/-Kb8yWfjoejE/VAoyhexAFvI/AAAAAAAACck/4UPILAAqZTU/s1600/ET_arrow_up.png and http://4.bp.blogspot.com/-zkt93ZN0PCA/VAoyhLOR3sI/AAAAAAAACcg/9vL6Nazf8FA/s1600/ET_arrow_down.png with the URL of your own buttons.

  • Finally click on Save Template to apply the widget to your blog page and make it start appearing.

For questions and inquiry, feel free to use the comment box below. Don’t forget to share with friends and family if you found this tutorial interesting and helpful.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

- Advertisment -

Most Popular

List of All JavaScript Arithmetic Operators With Examples

JavaScript offers several operators to help us work with numbers. All these operators are binary operators, which means they operate on two operands. The operands...

How to Find a Website’s RSS Feed’s URL

Having access to the RSS feed of a website gives you the opportunity to stay up-to-date on everything that website publishes. Whether that’s a...

Laravel: String data, right truncated: 1406 Data too long for column (SOLVED)

I was working on a project today when i ran into the error message "String data, right truncated: 1406 Data too long for column...

How to Enable or Disable Chrome’s Autofill on Android Devices

Storing your login details and other information in Chrome and/or your Google Account isn’t as secure as using an encrypted password manager, but it’s...

Recent Comments