HOW TO CUSTOMIZE BLOGGER’S READ MORE BUTTON INTO YOU BLOG

Add READ MORE BUTTON INTO YOU BLOGGERS POSTS

You observed that a growing number of websites and blogs are now presenting a “Read More” or “Continue Reading” button. The Read More button makes you click on it in order to read the full article. The “Read More” feature lets you create foldout post summaries in your Blog Posts, so longer posts appear as an intro with a link to Read More.

A lot of bloggers apply this feature, but sometimes the default Blogger text can blend in a little too much with your post. It’s essential to make that link stand out so visitors know that they are supposed to click to continue reading the remainder of a post.

In a Blogger Post, you may create “Read More Button" links just insert a jump break into your post. Unluckily, if you are on one of the traditional Blogger Templates, the "Read More Button" is simply a text link and is easy to miss. Fortunately, it's really easy to customize your Blogger "Read more" button:

I this article I’ll show you exactly what you need to do to customization Blogger Read More Button.

Step1. In your Blogger Dashboard go to Theme > >>Edit HTML

Step2. Click inside of the Editor Text box and press Ctrl+F. A search box appears in the top-right place. In search box type the code ]]></b:skin> and press Enter:

Step3. Before ]]></b:skin> code paste following CSS code.

.jump-link {

text-align:right; /* center the button-can also use left or right */

}

.jump-link a {

font-size:15px;

padding:10px;

border: none;

background-color:#5b4993; /* change background color for the button */

color:#fff; /* change text color */

font-weight:bold;

border-radius: 10px; /* button shape: 0px for squared edges or more for a rounded rectangle */ }

After adding this code your ‘Read more’ link will be changed and display look like as:

                                                                                   

You may also more customize your Blogger “Read More Button" according to your Template need. i.e. you may change text alignment, font size, padding, border, background color, font-weight, and button shape by changing Blue Area in the Code.