The “Back to Top” button is a tiny little feature that makes it easier for your website visitors to get back up without the need for a mouse scroll. Today i am answering a query “How to Add Back to Top to Blogspot Blog”. This feature amazingly increases the user experience on long pages, it saves time and effort for users who would go back to the top manually. Back to top button is especially helpful for sites with a lot of content implemented, to boost overall site navigation.
This tutorial will guide you through adding a “Back to Top” button on your Blogspot blog. We are going to know how to add the “Back to Top” button on your Blogspot blog, styling it with CSS, and definitely make that work.
Table of Contents
Understanding Blogspot’s Template System
Blogspot provides customization through its template system, which gives you access to edit the HTML and CSS code. You can also edit the code of the template by yourself which helps you to add the “Back To Top” button. That will help you get introduced to the proper section to put in your code and how Blogspot’s template system works so that you are able to include a button.
Steps for How to Add Back to Top to Blogspot Blog
Accessing the Blogspot Dashboard
- Go to your Blogspot dashboard by visitng blogspot website.
- Select the blog you want to edit.
- Click on the “Theme” option in the sidebar.
4. Click on the down arrow which is beside the customize option and then click on the edit HTML option. Follow the steps shown in the image below.
5. Now your HTML code file will be open now scroll to the bottom and find the closing body tag </body>. As shown in the image below.
6. Insert Button Code: Paste the given code below before closing the body tag.
<style>
#sbtbacktotop{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8oqHv9LPGaZC6Nebs0HyCIpM2t9ixwSYFySuP_YmB1akaKNA3NsxDsHrM801SLZ0-bXoMSDOSBdrFABkYYXZrUrepILiRW-JxYVMCJ_uKHjZxG4H_DbV46k6DmS7lMHsEY2JvLAJ2itlQ/s1600/back-to-top-sprite-30224d9b.png) 0 0 no-repeat;
height: 130px;
width: 72px;
padding:5px;
position:fixed;
bottom: 5px;
right: 5px;
cursor:pointer;
transition:none;
z-index:15;
}
#sbtbacktotop:hover{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8oqHv9LPGaZC6Nebs0HyCIpM2t9ixwSYFySuP_YmB1akaKNA3NsxDsHrM801SLZ0-bXoMSDOSBdrFABkYYXZrUrepILiRW-JxYVMCJ_uKHjZxG4H_DbV46k6DmS7lMHsEY2JvLAJ2itlQ/s1600/back-to-top-sprite-30224d9b.png)no-repeat;
background-position: 0 -142px;
}
</style>
<!-- Back to top button by SBT -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js'/>
<script type='text/javascript'>
//<![CDATA[
$(window).scroll(function(){if($(this).scrollTop()>100)
{$("#sbtbacktotop").removeAttr("href");$("#sbtbacktotop").stop().animate(
{bottom:"0"},{duration:100,queue:false})}
else{$("#sbtbacktotop").stop().animate({bottom:"30000"},
{duration:8000,queue:false})}});$(function()
{$("#sbtbacktotop").click(function()
{$("html, body").animate({scrollTop:0},"slow");
return false})});
//]]>
</script>
<!-- Code provided to you by sbt -->
<a href='#' id='sbtbacktotop'></a>7. Go back to your Blogspot blog and you will see a back-to-top button will be added and appear on your website. The code is taken from the Sora blogging tips
Youtube Tutorial How to Add Back to Top to Blogspot Blog
Additional Styling the Button with CSS
- Find the CSS Section: Look for the
<head>section of your HTML template. - Insert CSS Code: Just before the closing
</head>tag, add the following CSS:
<style>
.back-to-top {
position: fixed;
bottom: 20px;
right: 20px;
background-color: #333;
color: #fff;
padding: 10px;
border-radius: 5px;
text-align: center;
text-decoration: none;
display: none;
z-index: 100;
}
.back-to-top:hover {
background-color: #555;
}
</style>Responsive Design Considerations
Responsive Design Adjustments to Make the Button More Mobile-Friendly
Copy code
@media (max-width: 768px) {
.back-to-top {
bottom: 10px;
right: 10px;
font-size: 12px;
padding: 8px 16px;
}
}Adding JavaScript for Functionality
To add smooth scrolling functionality when the button is clicked, include this JavaScript code:
Insert JavaScript Code: Just before the closing </body> tag, add the following JavaScript code:
<script>
window.onscroll = function() {
var button = document.querySelector('.back-to-top');
if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
button.style.display = 'block';
} else {
button.style.display = 'none';
}
};
document.querySelector('.back-to-top').addEventListener('click', function(e) {
e.preventDefault();
window.scrollTo({top: 0, behavior: 'smooth'});
});
</script>Implementing JavaScript in Blogspot
- Add JavaScript Code: In the “Theme” section, click on “Edit HTML” and insert the JavaScript code just before the closing HTML tag.
- Save Your Changes: Click the “Save” button to apply the JavaScript.
Testing after Add Back to Top to Blogspot Blog
Previewing the Button
- View Your Blog: Go back to your blog and refresh the page to see if the button is working or not.
- Test the Functionality: Click the button to ensure it scrolls smoothly to the top of the page.
Common Issues and Fixes
- Button Not Appearing: Double-check that the HTML code is placed correctly before the closing of the HTML tag and that you’ve saved your changes.
- Button Not Working: Ensure that the JavaScript code is correctly added and that there are no syntax errors.
Recap of Steps
So that was how you could easily add a “back to top” button for the Blogspot site by using HTML code CSS and javascript. I hope this article has been very informative. This was a small change but can have a huge difference on user experience of your blog.
Encouragement to Customize
Try different styles, sizes, or positions of the button that you think will best fit your blog. This would help to make the button match perfectly with your blog theme.
If you not getting the blogpost blog back to the top button then you can contact me I will help you to get your back to the top button.