How to Customize the Blogger Read More Button

Customizing the Blogger read more

Share it:

Facebook
Twitter
Pinterest
Email

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.

Customizing the Blogger read more button
Black Friday/Cyber Monday sale ends in
00
Days
00
Hours
00
Minutes
00
Seconds