How to Add Back To Top Button to Blogger blog with Pictures

Thursday, 24 March 2016

How to Add Back To Top Button to Blogger blog with Pictures

Hello friends welcome to the Techtspot blog, today I will show you how to insert or add the Back To Top button to the Blogger blog with pictures.

Why we need to add the Back To Top Button to the blog?

The back to top button is an option, it helps our visitors to go from blog footer to blog header with a single click and without scrolling button, by default the blogger platform has no back to top button option, so users are using the manual scroll button to move the blog posts up and down.

When we publish lots of long posts and display more posts on the blogger blog home page then we use the scroll button and reach the bottom and top of the blog, but using the scroll button is a lengthy process, now we use the Back to Top button, whenever we click the button we reach to the top of the blog and blog post header section.

In this post I give you the animated back-to-top button code when you add it to your blog, it will be displayed animatedly and you can also change your button style easily, now let's start.

These are the Following Steps:-

Step 1: First open the blogger blog dashboard and click the Layout option, now you have to select a place where you want to add the Back to Top button, here I select the footer section and click the Add a Gadget link.

Step 2: Now a new window appears in the middle of the device screen and I select the HTML/JavaScript option.

Step 3: Here we paste the Back to Top button code in the Content area and at last, I click the Save button.

Back To Top Button Code:-

<div style="position: fixed; z-index: 65535; right: 10px; bottom: 10px;"><a href='#Top' title='Gp to Top'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXCxKHYEY1wg-DANiG77sCmYvEdOnfuCuBqywkaq2cZ1Z7J6KHYGY4sIYFbNdEmxIxJQ9tkbTGmUjsRC3hPdFpd_KTnzOJtXtD4yfMkN9UGCdORMogvDOTVvVVuuk7sUTximMlxfGVKT0/s1600/go+to+top+button.gif'alt=”go" to top image” /></a>

Step 4: Now open the Blogger blog to check the results and mostly the Back to Top button will see you on the blog right-side.

Here you will see some Back to Top button styles and just copy the code which you like most and replace it with the RED URL in the main code then paste it in the Content area and again click the Save button then visit your blog to see the changes.

https://blogger.googleusercontent.com/img/a/AVvXsEgbvdzkWundCsQCyruw_fDEfv9DWek9prW4bzSar4gjoeo2SWZSOn7baJT73AHH9_4RNnk_Mk8KuEJQbPag7tuxNTybad-QgZu6Abfjh3Q2MlqY8P8Rrorrr6jlh3Fz3TriRJ3ZlNhZeZ2VJTMpXmt-tL5fF-m5OfjwARkhXOqP1ICXQm0qnDgYCwU0=s30

https://blogger.googleusercontent.com/img/a/AVvXsEhEaFsOEbVLAULAgU_RqKTYRzhngcWwytSgtFBTooX-xDW1JI6LjSXKOtEwyLkTqTgCMNThuvUiH2IYEJTT6UaZDmVeOOSZSNASZ3RSjAVZ_AJdaYDfl1aO64UUyp680ti1IpuwI-8S9WgrcOEOKgw8kqAzWJec3ystZ56NozdodT85MYlNG0vg_jhj=s30

https://blogger.googleusercontent.com/img/a/AVvXsEg2KeZOxdZlBMewX0PKruivaORYLrI_KrujnXLoBmW_UI8kyNGWeEU6GCUUJUg85EAsRPMPQKA6XuiBYIKeN9ATqClIiGG7MPLBLtDY_Up7beBzViiC0MU5kGcBEMaHhzJQkW7lku_zHU0xOkE94IT7MkFq5fY1WtMxjN4DE8BkZfhFA6cngzR-9Q2l=s30

https://blogger.googleusercontent.com/img/a/AVvXsEgukX2N7xXB9-F_kj4Ner1aA7cR_vz6SFrRO2pxQ6y6N93etgjbI2W38sVMMpkLQLi7olgen8G0wO1cRAOMCzpN9Z_bvXeevmW5eKlkC0W8mLXxhmiEmem1F3Do5mYyHuYP8_G5NYzJSKpk4bZa9W8GUK5Ye6B5AZ0nnTNXvloPAfSFyLKuuFwlaPaQ=s30

https://blogger.googleusercontent.com/img/a/AVvXsEhlG6Gh4dgQpkNml7Mu2_V6o3rSW94rkoaahhIb6EJHgZTQbZ-UK8IaLri8uuRccnOQPyheja8Umv526BQQA05HgCEoyfeMbi3pnxIh8HS-5Vwy5gFy03aMfriVTLLjBRN4VSCOhmzmOxRCzq5pTvzkQm-TZCwBuGSNEcd8F6qTl7WpBUPXE7oDMNGp=s30

https://blogger.googleusercontent.com/img/a/AVvXsEiuJlG3A1_5ce6W1KPlpkjX4BWxhdBFSadaWwYOYp4s_20sdjtCqrN4RKujpFP_Cfr4v83fXazQqfdpgW1h_Xba9GD5BoLjVLEu8zSumg3GwdfpQsrWmmqTVFesPmCHncovP82zwrrpR1-a1IikZFq9cPw-3HvmzYSLoF9vAUeLlcfi92-99lAz9N-E=s30

Now Visit the - Demo Blog to see the result.

Above I give you my demo blog link, where I enable the Back To Top Button code, if you are thinking to set up a Back To Top Button in your blog then first look at the button how it looks like in my demo blog.