How To Add A Back To Top Button In Blogger

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

 

please join our mailing list

Got Something To Say:

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

*

z