Add a stylish "Read More" Link in Blogger

Today I am going to teach you how to add a stylish Read more button or link in Blogger. To add this to Blogger follow the steps given below.

How to add it to blogger?

-Go to Blogger > Design > Edit HTML
-Search for ]]></b:skin>
-And Paste the Following code above it

/*---------------- Rectangle left border-----------*/ .BU-readmore{ background:#fff; text-align:right; cursor:pointer; color:#009999; margin:5px 0; float:right;border-right:2px solid #009999; border-left:10px solid #009999; border-bottom:2px solid #009999; border-top:2px solid #009999;padding:5px; font:bold 11px sans-serif; } .MBT-readmore:hover{ background:#fff; font:bold 11px sans-serif; color:#006B6B;border-right:2px dotted #009999; border-left:10px solid #006B6B; border-bottom:2px dotted #009999; border-top:2px dotted #009999; }.BU-readmore a { color:#fff; text-decoration:none; }.BU-readmore a:hover { color:#fff; text-decoration:none; }

-Next search for <data:post.body/>
-Just below it you will find the read more link code similar to this one,

<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'>
<div style="text-align: right;">Read More ->></div></a>
</b:if>

-If you are using a read more link button then the code will look something 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>

-In both the cases, simply replace the highlighted code with this,

class="BU-readmore"

Save your template and you are done :)

You May Also Like