HOW TO CUSTOMIZE BLOGGER’S READ MORE BUTTON

 

How to Customize Blogger's Read More Button 

In this article I’ll show you how to customize Blogger's Read More Button. You noticed that a growing number of websites and blogs are now displaying 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 expandable post summaries in your Blog Posts, so longer posts appear as an intro with a link to Read More.

A lot of bloggers utilize this feature, but sometimes the default Blogger text can blend in a little too much with your post. It’s important 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 simply insert a jump break into your post. Unfortunately, if you are on one of the traditional Blogger Templates, the "Read More Button" is simply a text link, and is easy to miss. Luckily, 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.

Step 1. In your blogger Dash board go to Theme > >>Edit HTML

Step 2. Click inside of the Editor Text box and press Ctrl+F. A search box appear in the top right corner. In search box type the code ]]></b:skin> and press Enter:

Step 3.  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 change and show look like as: 

 

You may also further 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

How To EDIT “Read More” Text In The Blogger

Step 1. In your Blogger Dashboard, go to Theme > Edit HTML

Step 2. Click inside of the Editor Text Box and press Ctrl+F. In Search Box type following code and press enter:

<div class='jump-link'>

Step 3. The code that is found should display look like as under:

<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;'
expr:title='data:post.title'><data:post.jumpText/></a> </div>

In above mentioned code replace the Red area of code with your own Text like “Continue Reading”. Save it

<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;'
expr:title='data:post.title'>Continue Reading</a> </div>

Step 4. Your "Read More" button will replace with "Continue Reading Button" as shown below:

I hope you like this Post. If you have any question please comment, Thanks. 

 

More Articles: 

• Best Webhosting Services for WordPress Websites
• Features of a Good Webhosting Service
• How to Create XML Sitemap For Blogger and How to Submit Sitemap to Google
• What is sitemap in Website | Importance and Types of Sitemaps
• How to Change Blogger Template | Theme
• How To Add Code Box In Blogger Post
• 10 Tips of Image Optimization for Website | Image SEO