How To Add Back To Top Button In Blogger

Hey viewers, previously I shared you How To Customize Scrollbar in Blogger on Blogger Tricks. Now the time is for new Blogger trick. In this Blogger trick I will show you how to add Back To Top button in Blogger. If your blog page is very large and contains lots' of words then it will surely help your users to scroll back to top. It will give your blog more professional look. More you help your users more people will like your blog. So, without wasting more time here let's start the tutorial about adding Back To Top button in Blogger.

Add Back To Top Button In Blogger

Add Back To Top Button in Blogger

First and foremost backup your template. I am 100% sure this blogger trick will help you in adding back to top button in Blogger. But if by mistake you don't follow these simple steps carefully then it may be difficult for you to restore your template. And if you have backup template then you can use it anytime without any sort of risk. Since you have made a backup of your Blogger template so we can now continue to the tutorial on adding smooth scrolling back to top button for Blogger.

Follow these steps carefully to add back to top button in your blog:

• First of all go to Blogger Home.
• Then click on Dashboard.
• After that you have to go to Template. Then click on 'Edit Html'.
• Now search for "]]></b:skin>" without Quotes.
• After you find that code. Paste the code given below just above/before "]]></b:skin>".

#hackersthiefs{
padding:5px;
position:fixed;
bottom: 5px;
right: 5px;
cursor:pointer;
}
#hackersthiefs:active {
position:fixed; bottom:0.7px;
}
#hackersthiefs img:hover {
opacity:1;
}

• Now the time for next step. Search for "</head>"  without Quotes.
• Now paste the code given below just before/above "</head>.

<!-- Back To Top Button Starts -->
&lt;script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js'
type='text/javascript'&gt;&lt;/script&gt;
&lt;script language=&quot;javascript&quot;&gt;
$(window).ready(function(){
$('#hackersthiefs').click(function(e){
e.preventDefault();
$('html, body').animate({scrollTop:0}, 'slow');
});
});
&lt;/script&gt;
<!-- Back To Top Button End -->

• After you paste the above code search for "</body>" without Quotes.
• Time to paste the code given below. Just paste the below code just before/above "</body>".

<a href="#" id="hackersthiefs"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOlP_emvuVL-19DxdDWuTopOU2OLHUYvZjA1qjHilMiZzPhRG1jTwtaVVD4WlubwJh1hEnnutCXKLHc1qpiALhJCXylfN9ev9K948hI_8vaPu0JogKETUDugTKYZ3Dchy_PSWhKl21T00/s1600/Arrow-Up2.png" alt="Back To Top" title="Back To Top" /></a>

• Quickly preview the Template.
• Save the Template.
• That's It. You just created Back To Top button for your Blogger blog.

Further Customization

1. You can use your own image in Back To Top Button. Just replace the url in red from the above code with the url of your custom image.

Are you facing any problem. Don't hesitate to comment.

Do you like this Blogger Trick. If yes then you can subscribe for our free newsletter to get latest Blogger Tricks in your inbox.