Breaking News
Home / HOW TO / How To Add A Back To Top Button In Blogger

How To Add A Back To Top Button In Blogger

Adding  a back to top button to a blog in blogger is very important because it helps a blog visitor to move to the top of your blog easily. Most especially if your blog has long content.

In this article, i will show you  how to add a back to top button to a blog in blogger.

Step one:

Login to blogger   admin dashboard and click on theme at the left corner of the admin dashboard. just Copy the code below

<script src=’http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js’></script>

Step two:

click on Edit HTMLedit html

locate the <head> opening tag to  past the code you copied.

and click on save theme

back to top sidebar

 

 

Now let us add the back to top button to the front end of the blog.For the sake of this tutorial, i will be adding the back to top button to the right sidebar of the blog.

Step Three:

Click on layout at the left corner of the blogger admin dashboard.

Step Four:

Click on the add gadget button and locate the HTML/JavaScript gadget and paste the code below in the content column.

<script>
jQuery(document).ready(function() {
var offset = 220;
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery(‘.back-to-top’).fadeIn(duration);
} else {
jQuery(‘.back-to-top’).fadeOut(duration);
}
});
jQuery(‘.back-to-top’).click(function(event) {
event.preventDefault();
jQuery(‘html, body’).animate({scrollTop: 0}, duration);
return false;
})
});
</script>
<style>
div#page {
max-width: 900px;
margin-left: auto;
margin-right: auto;
padding: 20px;
}
.back-to-top {
position: fixed;
bottom: 2em;
right: 0px;
text-decoration: none;
color: #000000;
background-color: rgba(235, 235, 235, 0.80);
font-size: 12px;
padding: 1em;
display: none;
}
.back-to-top:hover {
text-decoration: none;
}
</style>

https://3.bp.blogspot.com/-wZp8-bKYFbg/WR9Gjq08AiI/AAAAAAAAI1U/yuVBG5cW5HMaazrlxsi9VzBOtR390QsfgCLcB/s1600/4.%2BBack-To-Top%2BButton%2B-%2BTechtspot.png

Conclusion: To see the back to top button, just reload your blog and see the magic. Thank you so much for taking your time to read this article.If you find it useful please use the comment box because it will go a long way to encourage  me.Please show some love by using the share button

 

Check Also

Federal University of Technology Akure (FUTA)

FUTA POST UTME RESULT CHECKER

Following the conclusion of the Post utme exercise by the management of  Federal University of …

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.