How to Install a Back to Top SEO Landing Page Button on Blogger

How to create, display, or install a SEO Friendly & Responsive Back to Top button on the Blogspot Blog. 

Back to Top BUTTON (BtT Button) is an icon or small image at the bottom of the blog to make it easier for visitors to return to the top of the blog without having to scroll the mouse. 

Back to Top Button allows your website visitors to easily scroll back to the top of the page -letting users jump to the top of the page. 

What is meant by the SEO Friendly & Responsive "Back to Top" button is that it does not affect loading speed and is mobile friendly. 

IS IT IMPORTANT? 

Important not important. If your blog page is short, it doesn't matter. But if the writing is long, it becomes important. 

That's right, users can click the "Home" link, but that's right, it leads to the front page, not to the top (top of page). in detail,

This post "only" shares the back to top questions posted on this Demo Blog, at the bottom right. 

How to Install SEO Friendly Back to Top Button on Blogger

1. Click Theme > Edit HTML

2. Scroll down and copy and paste the following code just above the </body> code

<span class='back-to-top'><a href='#'> &#8593; </a></span>
<style>
.back-to-top {position: fixed ;bottom:20px;right:10px;z-index:9999999}
.back-to-top-a {font-size:10px;z-index:9999999;opacity:0.2;position:fixed;bottom:0;}
.back-to-top a {font-size: 30px ;background-color: #DD3434 ;color:#FFF;-webkit-transition:all .3s ease;-moz-transition:all .3s ease;transition:all .3s ease;padding:12px 18px 20px;text-decoration: none}.back-to-top a:hover {background-color: #272727 ;text-decoration: none}
</style>

That;s it! Just "Save Template" and the Back to Top SEO Friendly and Responsive buttons have appeared on your blog. 

Alternative Back to Top Button

The back to top code above keeps appearing, even though the page doesn't scroll down. If you want a new back to top button to appear when the page is scrolled down, use the following code. 

Copy the following code above the </body> code

<div class='back-to-top'><a href='#' id='back-to-top' title='back to top'>
<i class='fa fa-chevron-up'></i>
</a></div>
<script>
$(window).scroll(function() {
if($(this).scrollTop() > 200) {
$('#back-to-top').fadeIn();
} else {
$('#back-to-top').fadeOut();
}
});
$('#back-to-top').hide().click(function() {
$('html, body').animate({scrollTop:0}, 1000);
return false;
});
</script>

Place this CSS code above the ]]></b:skin> code

#back-to-top {background:#000000;color:#ffffff;padding:8px 10px;font-size:24px;border-radius: 22px;box-shadow: 0 1px 2px 0 rgba(0,0,0,.15), 0 1px 1px 0 rgba(0,0,0,.30);}
.back-to-top {position: fixed !important;position: absolute;bottom: 25px;right: 20px;z-index: 998;}

Attach a link to Awesome Fonts:

Make sure your blog template has a Link to Awesome Font installed above the code </head> like this:

<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>

If it's not there, copy the code above the </head> code.

That's How to Make a Back to Top Button - Back to Top on Blogger (http://curhatspiritual.blogspot.com)

Hope it is useful.*