How to add Read More button for homepage in Blogger

Read more button link or jump link or continue link in blogger post for homepage to display an automatic “read more” button that reduces the full article into 50-70 words and images that display on your home page. Read more links for home page will make your website/ blog load faster. And make your home page look neat and clean. The read more button that we are going to add today to your BlogSpot will be pure CSS code, later on you can change the Color, font size as per your requirement. Read more links give your viewers an idea that what is inside that blogger post a Post Summary type for your blogger post. So let see how we can do it. I have shared on one of my post How can we Create CSS BUTTONS in blogger you can take a look on that also.

LIVE DEMO

You can see the live demo to my own website homepage.

How To Add CSS Read More Button for Homepage In Blogger.

STEP - 1  GO to Blogger > Templates > Edit HTML



STEP - 2   Search For

]]></b:skin>

STEP - 3   Now add the below Code just above this ]]></b:skin>

.coderambo_read a:hover,{
background: #111;
border: 1px solid #111;
color: #fff;
}

.coderambo_read a {
background: #ca2129;
padding: 9px 25px;
color: #fff;
font-family: 'American Typewriter';
border-radius: 2px;
display: inline-block;
border: 1px solid #BE1212;
transition: all .3s ease-in-out;
font-size: 22px;
text-decoration: none;
margin-top: 12px;
}

STEP - 4  Search For

<data:post.body/>

NOTICE: You will see similar code two to three place but you have to be careful about the right code, don’t worry it is easy!

STEP - 5  Just below that you will see Read more >> or <a expr:href='data:post.url'>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>

<p><a expr:href='data:post.url'>Read More</a></p>

</b:if>
</b:if>

Or you May see this Code or similar code like this.

<b:if cond='data:blog.pageType != "item"'> 

<a expr:href='data:post.url'>
<div style="text-align: right;">< img src=http://xyz.com border="0"/></div></a> 

</b:if>

STEP - 6  In above code simply replace the highlighted code with this code.

<div class="coderambo_read">
<a expr:href='data:post.url'>Read More</a>
</div>

STEP - 7 Now Just Save Template.



Now you are all done !! hope this work for you, you can easily make changes the CSS colors, font style, font size and other CSS code as per your requirement. Hope you have understood how we can add Read More button for homepage in Blogger don’t feel shy to ask anything where ever you are facing problem ask on the comment section.