Add Scroll to Top Button for Your Blogger 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.
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.
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 .
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..
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.
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.
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..
Comments