How to customize the “Read more” button in blogger

Blogging without readers is like going to the river with a basket instead of a bucket; its effort in futility. If you put in so much work in drafting articles that visitors don’t get to read simply because you are one of those trados who stick with the default blogger ” read more” button whose obscurity makes it invisible to blog visitors. The read more button when left at the default setting, can be a little to small, too uninviting to make visitors click on it, causing them to spent less time on your blog. I do not need to stress on the importance of amount of time visitors spend on your blog; you already know. A visitor who spent less than a minute on your blog may not likely come back.
To customize the read more button and make it more attractive to your blog visitors, you will need to carry out a little task which I am going to share with us .

To customize the read more button in blogger, simply do these:

>> Log into your blogger account
>> Click on theme
>> Click on customize
>> Click on advance 
>> Select CSS
>> Copy and paste the codes below into the space provided. If you have other codes in there, paste on the next available line.

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;

See Image below:

Spread the love

Leave a Comment