Read More option for customized Blogger templates

Read More option not only makes your blog look neat but also helps to summarize your blog post in the first few lines. This would help the viewers to expand the entire post to read the complete article. customized Blogger templates gives you the option of adding more attractive code to spice up your blog post. Below article explains you how to add the Read More code to customized Blogger templates.

If you are using custom blogger templates then follow the below procedure to add Read More option for your template.

1. Go to Blogger -> Template -> Edit HTML

2. Click the "Expand widget Templates" option

3. Search for the below code

]]></b:skin>

4. Paste the below code just above it

.BBB-readmore{ background:#0080ff; text-align:right; cursor:pointer; color:#Fff; margin:5px 0; float:right; border:2px solid #ddd; padding:5px; -moz-border-radius:6px; -webkit-border-radius:6px; font:bold 11px sans-serif; } .BBB-readmore:hover{ background:#FFf; font:bold 11px sans-serif; color:#0080ff; border:3px dotted #ddd; } .BBB-readmore a { color:#fff; text-decoration:none; } .BBB-readmore a:hover { color:#fff; text-decoration:none; }

 5. Search for the below code

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

In the above code replace

style="text-align: right;"

with

class="BBB-readmore"

Finally your code will look like

<b:if cond='data:blog.pageType != "item"'> <a expr:href='data:post.url'> <div class="BBB-readmore"> Read More ->></div> </a> </b:if>

6. Save your template.

You will get a beautiful Read More button as shown below

Try this and let me know how it worked for you.