How To Add Custom Read More Links On Blogger

Posted By B | Post a Comment

Pin It Now!

A good blogger can be identified by the way he manages his blog and organizes his posts. The homepage is the most important part of every blog. The homepage must contain up to 5-6 posts in order to seize the attraction of reader as much as possible. Keeping a reader busy for a longer time is what I call a blogging success. Showing 5-6 posts is load-time and user friendly only if you show a summary of each post. On my homepage you must have seen a Read More Link, clicking which expands the entire post. See the screenshot bellow.

This will added beauty on your blog & your blog will look like a profession blog. So let's know how to create custom read more links on your blog home page & label page.

Tip:  You can use read more image replacing read more link.

You can also use this script : How To Add Auto Read More Links.

• 1. Backup Your Template, Then Go To Blogger > Template > Edit HTML.
• 2. Tick-mark to Expand Widget Templates.
• 3. Search for  ]]></b:skin>  [Use Ctrl+F for quick search]
• 4. Now Just After  ]]></b:skin>  Paste Bellow Codes.

<style>
<b:if cond='data:blog.pageType == "item"'>
span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;}
</b:if>
</style>

• 5. Now find  <data:post.body/>   [Use Ctrl+F for quick search]
• 6. Just After it Paste Bellow Codes.

 <!--CUSTOM-READ-MORE-STARTS-BY-MHT-->

<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'>

<div style="text-align: right;">Read More >></div></a>
</b:if>

<!--CUSTOM-READ-MORE-STOPS-BY-MHT-->

Note: Some template have contain <data.post.body/> two times. If your template also then use the first <data.post.body/> to done this.

Customize Code:

• To change read more title to other tile like Continue Reading >> or any other as you wise then just change the text Read More >> with your custom title.
• If you want to shift the "Read More >>" text to the extreme-left side just change right to left 

Preview your blog  to see changes, then save your template.

How to Apply these changes ?

It's so simple to apply you just need to follow bellow steps.
When you are going to writing a post at the time "Insert Jump Link" when you want to show read more link. You can see the image bellow.

That's all! You are done.