How to Add a Back to Top Button in Blogger Website?

How To Add Back To Top Button In Blogger

You can also customize a back-to-top button according to your preferences easily.

You can use my custom back-to-top button code scripts and add your blog without coding knowledge.

It visible all page posts on the blog bottom on the footer section.


A back to top button is a shortcut that allows users to quickly navigate to the top of a webpage, typically located at the bottom left or right of the webpage. Adding a stylish back to top button enhances a website's user experience.

Do you know? Every website or blog essential needs to add a back-to-top button. If your blog doesn't have this feature for your users, you are not giving them a better user experience. Yes, it's true.

Google recently announced SEO focused on user experience. So, I added it to my blog. Look at my blog to have these features in the footer. Did you know that 95% of users tend to scroll from the top header down to the footer area?

Here are some benefits of a back-to-top button, such as user experience improvements.

  • Provides convenient return to page top.
  • Enhances accessibility for users with disabilities or mobility issues.
  • Reduces friction for smoother browsing.
  • Increases engagement, leading to increased page views and engagement metrics.
  • Enhances mobile-friendliness for easier navigation.
  • Adds professionalism, demonstrating attention to detail.
  • Contributes to positive brand perception.
  • Improves time efficiency, increasing user satisfaction.
  • indirectly benefits SEO by improving user engagement metrics.

How to add a Custom stylish back to top button in Blogger?

Add a custom back-to-top button in Blogger easily with these simple steps! You do not need to add an image attachment and waste time. Yes, I provide you with CSS codes for styling and a complete professional button. So, don't degrade page speed.

To add a "back to top" button to a Blogger blog, follow these steps.

1. Access Blogger Layout Settings:
  • Go to your Blogger dashboard.
  • Select the blog where you want to add the back-to-top button.
  • Navigate to the "Theme" section.
  • Click on the "Edit HTML" button.
2. Edit Your Blogger Template:

Note: Before making any changes, it's a good practice to back up your template. You can do this by clicking on the "Backup / Restore" button at the top right corner of the page.

Once you've backed up your template, find the closing </body> tag in your template HTML. You can use the browser's search function (Ctrl + F or Command + F) to locate it quickly.
Insert HTML Code: Just above the closing </body> tag, paste the following HTML code:

Copy html code

 <a href="#" id="back-to-top" title="Back to top">&#10148;</a>
3. Insert CSS Code: 
Add CSS code to style your back-to-top button. Paste this code into the CSS section of your Blogger template:


Copy css code
 #back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    cursor: pointer;
    display: none;
    font-size: 24px;
    color: #ffffff;
    background-color: #333333;
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    border-radius: 50%;
    z-index: 1000;
}#back-to-top:hover {
    background-color: #555555;}
4. Insert JavaScript Code:
Finally, add JavaScript code to make the button scroll the page back to the top when clicked. Paste this code just above the closing </body> tag:
Copy code

<script type="text/javascript">
$(document).ready(function(){
    $(window).scroll(function(){
        if ($(this).scrollTop() > 100) {
            $('#back-to-top').fadeIn();
        } else {
            $('#back-to-top').fadeOut();
        }
    });
    $('#back-to-top').click(function(){
        $('html, body').animate({scrollTop : 0},800);
        return false;
    });
});
</script>
Save Changes: After adding the code, click on the "Save Theme" button to apply the changes to your Blogger template.

Your custom back-to-top button should now be added to your Blogger website. Test it by scrolling down your webpage; the button should appear when you scroll down and disappear when you scroll back to the top. Clicking on the button should smoothly scroll your page back to the top.


BAZZHOOD

BAZZHOOD

Hi, my name is MNM. I am an SEO expert with over 10 years of experience in the SEO world. This is my free blog, and it has been recognized as the top blogging tips blog from 2020 to 2024. I write the best content for beginners to take their blogging journey to the next level! Don't forget to follow my Facebook, Instagram, and other social media platform accounts.

Next Post Previous Post