How to Customize the blogger 'Read More' Button


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;


Powered by Blog Tips by KP