Adding a floating back to top button to your blogger blog can be very helpful for your readers to Easily Scroll your blog from bottom to top while reading articles.
Especially, when you write lengthy articles on your blog, this back to top widget will help your readers to easily scroll up while reading a lengthy blog post.
There are several reasons why you should consider using this scroll widget to your blog.
This tool is user-friendly so it won’t slow down your blog! All you need is the piece of gadget code.
In this tutorial, I will show you how to insert back to top button to blogger using text and picture in minutes.
Related: How to Add ALT(Alternative) Tags to Images in Blogger
1.Go to your blogger layout page & tap on Add a new Gadget.
2. Select HTML/JavaScript widget and open the gadget.
4. Save the widget & you're done!
You can easily customize this tool according to your blog design. To change the background color, replace the yellow code with your theme's hex color code.
To change the button name replace the blue name with the actual name you want to use.
Also read:
• How to Create Custom Contact Form (Contact Us Page) for Bloggers
• How to Add Social Media Buttons to Blogger Sidebar
1. Copy the below codes and paste it to HTML gadget in your layout page.
• Blogger Widgets: How to Add Html Codes in Blogger
Now if you wish to change the image in the button, replace the red codes with another src attribution link. Here are some of the images you can use instead:
Especially, when you write lengthy articles on your blog, this back to top widget will help your readers to easily scroll up while reading a lengthy blog post.
There are several reasons why you should consider using this scroll widget to your blog.
- This widget will help your readers to easily scroll your blog from top to bottom.
- It will help to easily scroll your blog by saving time.
- This tool will help you increase user experience.
How Back to Top Button Works?
After adding back to up gadget codes to your blog, this Scroll button will automatically appear in your window once a user scrolls your blog. This button will appear in all of your blog posts.This tool is user-friendly so it won’t slow down your blog! All you need is the piece of gadget code.
In this tutorial, I will show you how to insert back to top button to blogger using text and picture in minutes.
Related: How to Add ALT(Alternative) Tags to Images in Blogger
How to Add Back to Top Button to Blogger?
This code will show a text top on the button. This button will start appearing once you scroll the page.
2. Select HTML/JavaScript widget and open the gadget.
#539dcc;
color: white;
cursor: pointer;
height: 50px;
width: 50px;
border-radius:50%;
font-weight: bold;
}
#myBtn:hover {
background-color:#999;
}
">top
3. Copy this piece of code & paste in the HTML gadget.4. Save the widget & you're done!
You can easily customize this tool according to your blog design. To change the background color, replace the yellow code with your theme's hex color code.
To change the button name replace the blue name with the actual name you want to use.
Also read:
• How to Create Custom Contact Form (Contact Us Page) for Bloggers
• How to Add Social Media Buttons to Blogger Sidebar
How to Insert Back to Top Button to Blogger blog?
This code will show an image on the button. Click on the button to scroll up easily!
• Blogger Widgets: How to Add Html Codes in Blogger
Now if you wish to change the image in the button, replace the red codes with another src attribution link. Here are some of the images you can use instead:
https://1.bp.blogspot.com/--zM-
H6FiC0o/WgvXneVfeSI/AAAAAAAAAJg/Ot1p2h-_g1MC2jfxCy-
OYklrcR3TcOuQgCLcBGAs/s1600/up%2Bimage%2B4.png
https://1.bp.blogspot.com/-LNmL4LSVevU/WgvXo8Yh3zI/AAAAAAAAAJs/Z35VcE7K9Twqegv5AAL40E
_jEZMeoAcswCLcBGAs/s1600/up%2Bimage%2B5.pnghttps://3.bp.blogspot.com/-fLK530y4o3E/WgvXnTbAAQI/AAAAAAAAAJk/lcRx6DT4aYMLhjBmlWPXXtaU
w6bII4kLQCLcBGAs/s1600/up%2Bimage%2B1.png
https://2.bp.blogspot.com/-LKWPZhI-gJI/WgvXpJA40UI/AAAAAAAAAJw/Jivbd2wqt6IDcd8SYfp-
vITIDf_18KBVQCLcBGAs/s1600/up%2Bimage2.png
https://2.bp.blogspot.com/-bckH_lGion4/WgvXnThUB3I/AAAAAAAAAJo/J8x5SFfrnCEiG2x9mylndEO7raConclusion
s6E0kqwCLcBGAs/s1600/up%2Bimage%2B3.png
By performing the above 2 ways you can easily add floating scroll back to top button to your blog on blogger. All you have to do is copy the above codes and paste it into an HTML/JavaScript gadget box. This back to top widget will automatically appear on your blog once the user starts scrolling your site.
Getting error while adding the back to top button to your blog? Let me know in the comment box below. Thanks.
Getting error while adding the back to top button to your blog? Let me know in the comment box below. Thanks.
