How to Customize the Blogger Read More Button

How to customize the Blogger "Read more" button on traditional blogger templates | www.chalkandapplesdesign.com
Using jump breaks in your posts allows blog visitors to see more of your posts on the home page, and also keeps them on your blog longer, by prompting them to click "Read more" in order to finish reading each post. Unfortunately, if you are on one of the traditional Blogger templates, the "Read more" is simply a text link, and is easy to miss. Luckily, it's really easy to customize your "Read more" button:

In your Blogger dashboard, go to Template, then Customize.

Click Advanced, then Add CSS (you'll have to scroll all the way down). Paste the following code into the CSS box. If you have other CSS in the box, just add this at the end.

.jump-link {
  text-align: center; /* center the button-can also use left or right */ 
  background: transparent;
}
.jump-link a {
  background: #444444; /* change background color for the button */
  color: #ffffff; /* change text color */ 
  padding: 5px;
  border-radius: 5px; /* button shape: 0px for squared edges or 5px for a rounded rectangle */ 
}
.jump-link a:hover {
  background: #ffffff; /* change background color on hover */
  color: #444444; /* change text color on hover */  
  text-decoration: none;
}


Here's what it will look like on your template designer:
The notes in red explain how to customize the button. You'll be able to see each change immediately in the preview window at the bottom (except the hover effects). Only change the blue text, and leave the rest as-is.


You can find the hex codes (that's the color code that looks like a # with a combination of 6 numbers & letters) that are already used in your blog by looking at the other advanced options. For example, if you want the button to be the same color as your hyperlinks, scroll up to the Links section, and look for the hex codes there.

Another way to find the exact colors you want is to use a tool like the Color Picker extension for Google Chrome. This is an eyedropper tool that can be used to sample colors from any website. Click on the area of your site with the color you want, and the hex code will be copied for you. You can also get the R,G,B codes if you want to use your colors in PowerPoint, etc.

To change the actual wording of the button, if you want it to say "continue reading" or something, go to Layout and edit the Posts section. You can change the wording here, and click save.

How to customize the Blogger "Read more" button on traditional blogger templates | www.chalkandapplesdesign.com

5 comments

  1. Thanks so much Kristen for this post! You make everything so easy for us :)

    ReplyDelete
    Replies
    1. You're welcome! I am so happy I could help!

      Delete
  2. Hi Kristin,
    Thank your for this tutorial. I changed my button and it looks great, but it also changed the background color of the entire link within widget...do you have any idea why that would be? I'm also wondering if it is possible to get the read more button above my signature?

    ReplyDelete
  3. Thank you mate i just added font-size to increase font :)

    ReplyDelete
  4. Thanks so much. This is really great Post

    ReplyDelete

Powered by Blogger.

Tips for Bloggers & TPTers

Color Palettes

Chalk & Apples Blog

Back to Top