Add Scroll to Top Button for Your Blog.

Another new  trick for New Bloggers in which I am going to bring into your knowledge about Back to Top or Scroll to Top button. You have seen this button in almost every Professional Blogs in the corners as it is very important if your Blog has to much contents on a page then it will help visitors to quickly scroll up your Blog page to back on the top. Now I am going to learn you how to Add Back to Top Button in Blogspot Blog for making it browse faster to your visitors.

scroll back to top button for blogger blog

Check New Floating Social BookmarkingWidget with Pinterest

Add Scroll to Top or Back to Top Button to Blogspot Blogs

I will tell you two different ways to add Scrolling Back to top, one is Back to Top with Text and another is Back to Top with image Button.

1st Method

01- First of all I will tell you how to Add Scroll to the Top Text: Check following given below steps.

Back to Top with Text

Go to Blogger Dashboard > Template > Edit Html
Before any editing in Template you must backup your Template. Read this for backup Blogger Template.
On you are on EDIT Html Screen > Check on Expand Widget Templates.
And Find the following code

 ]]></b:skin>

and now paste this code before the above/before “]]></b:skin>code

You can change it into you favorite by Hex Colour Codes Generator Click Here
Change its properties as per your blogs layout,
Change 100 to increase or decrease the size of the box.
Change 1px for increasing and decreasing the border width.
Change #ccc for your favorite color code to change the border color.
Change F4FFBF for your favorite colour for background.
Change 666; change text color of Scroll to Top.

Now Find </body> in and paste the following code after this tag

<a href="#" id="backtotop">Scroll to top</a>

You can customize or change settings of  “Scroll to Top”  as per your desires.

Find <head> and paste this code after the <head> tag

Save You template and you have all done..
Click here to see Live Demo

Special Recommendation : Most Usable CSS3 Design for Bloggers Label 

2nd Method

02- Second one is Add Scroll or Back to Top Button with image Follow the given below steps.

Back to Top Image Button

Find the following code

]]></b:skin>

and now paste this code before the above/before “]]></b:skin>” code

Now find </body> tag and paste the following code before </body> tag

<a href="#" id="backtotop">
<img src="Your-Image-URL" alt="back to top" />
</a>

Make any button for you Blog to scrolling to top then upload it on any image hosting server or in Blogger draft post and copy image url and change  “Your-Image-URL” with your own image’s URL or you can choose our following button by copying image url.

Check This

 

 

 

 

 

 

 

These are some Stylish Scroll / Back to Top buttons Samples you can use for your blog

Now after replacing “Your-Image-URL” code with your own image url your code will be look like this

Now follow the final step

Find this code in your html <head> tag and paste this below code after the <head> tag


Save your template and check out your Blog..


Share this post