Monday, January 4, 2016

How to Add a 'Back to Top' Button in Blogger

How to Add a 'Back to Top' Button in Blogger

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 Blogger

1. On your Blogger dashboard, go to Layout > select Add a Gadget 
(you can add it on the sidebar or footer)
2. On Add a Gadget window, click HTML/Javascript
3. On the Content area, copy and paste the code below and hit Save.

<div class="backtotop">
<a href="#">Back to Top</a>
</div>

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.

/* back to top button */

.widget-content .backtotop {
background-color:#fe5870; margin: 10px;
position:fixed; bottom:0px; right:0px; z-index:1000;
}
.backtotop a {
background-color:#fe5870; color:#fff;
padding:10px; text-decoration: none;
}

Styling Notes:
- 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! :)

STEP 1
How to Add a 'Back to Top' Button in Blogger

STEP 2
How to Add a 'Back to Top' Button in Blogger

STEP 3
How to Add a 'Back to Top' Button in Blogger

STEP 4
How to Add a 'Back to Top' Button in Blogger

STEP 5
How to Add a 'Back to Top' Button in Blogger

STEP 6
How to Add a 'Back to Top' Button in Blogger

Check out more Blogger tricks and CSS tutorials below!

No comments:

Post a Comment

Write your comment or message here.

Ads by Google