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 != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<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"'>STEP - 6 In above code simply replace the highlighted code with this code.
<a expr:href='data:post.url'>
<div style="text-align: right;">< img src=http://xyz.com border="0"/></div></a>
</b:if>
<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.
Having a blog you should have 
As we all know that when we have to search on web we just trust Google Search Engine as it display the most relevant search results. Though Google Adsense we can do so for are blog to for better search result or by https://cse.google.com any one can develop their own custom search box for their blog. One of the good things about this Google Custom Search Box is that the readers can find their search within your blogger blog.
When you’ve been blogging for a while, you may come to a point and you need a CSS button for your blog. If on your blogger blog you want to display colorful and cool buttons with links you can put the CSS codes to your blog. It is simple to do just you can copy the code that past is to your blog post or any where you want to put the CSS code. In two steps you can do that. This is the CSS button with mouse hover effect that means when someone come to click the CSS button the color changes text color change it look great on the blogger BlogSpot.
