How to Customize Read More Button in Blogger - My Widget House

How to Customize Read More Button in Blogger - My Widget House

Providing a great user experience in any website is the wish of every blogger. On the main page of every blog, a Read More link is added in the post. Which is in blue text shape by default. And looks very bad in the main page. This simple form of Read More button place a non professional impact on the minds of readers.

So, this button should be in great look on the main page. Also it catches the attention of the readers to click on the button to read full post. As this will be very useful for our readers and also helps us to increase blog traffic.

As you can see on our blog's main page. A read more button showing view full post with round corners in the end of posts is in the main page. And is customized with our own colors in the button. Also you can customize this button with right, center and left position. More you can also change the button style from block to round corners.

Customize Blogger Read More Button

So, blogger lets have a start to add the button in your website or blog. It is very simple to do so, just follow these simple steps.

Step 1

Login to your Blogger Account

Step 2

Click on the Theme in the left menu of your Dashboard. And then click on the orange Customize button.

Step 3

Now you are in the customize dashboard. Click on Advance menu in top left menu bar. Then Click on the Add CSS in the end of next vertical menu bar.

Step 4

Copy the code from the below code box. And paste it in the CSS box of your website.

.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;}

Now your code is added in the CSS box. Customize the code according to your colors and settings as briefed in the code. The codes in the green colors could be changed as per your requirements. And the names and hints are written in front of them on blue colour.

Step 5

Click on the orange Apply to blog button on the top right corner of the blog. As shown in the picture of step 3.

Now you have successfully added the code in your website. Just click on the View blog button in the top menu of website. And enjoy the new change in your website.