We are back at studying more codes to customize our blogs in Blogger.com platform! One of the most recent addition to my own blog is the "Back to Top" button which enables the reader to immediately jump to the top of the website when they already scrolled down onto the bottom of the page.
This blog function is particularly important for blogs that enables more than 10 blog post on their blog feed pages or for very long blog articles to avoid having to scroll back up.
For this lesson, I will show you how to create a Back to Top button for your blog!
We will be using both HTML and CSS, too.
Step by Step: How to Add a 'Back to Top' Button in Blogger1. On your Blogger dashboard, go to Layout > select Add a Gadget
(you can add it on the sidebar or footer)
3. On the Content area, copy and paste the code below and hit Save.
Now we've add the HTML code of the button. We will now use a few CSS to add style and color to our button.
4. Back to the Blogger dashboard, go to Template > Customize
5. On Blogger Template Designer, click Advanced (then scroll down) > select Add CSS
6. On the Text Box underneath the "Add Custom CSS", copy and paste the code below and hit Save.
- replace the color of the button (pink) by changing the #fe5870 in background-color.
- replace the color of the "Back to Top" text (white) by changing the #fff in color.
Need help? Comment below and I'd help you as best as I can! :)
Check out more Blogger tricks and CSS tutorials below!