Learn How To Show Post Summary using The “Read More Link” or “Continue Reading link”


Totally Exceptional!! 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. Look at a screen shot Below,

read-more1
This link just adds beauty to your blog along with some pro spice to it. So lets learn how to summarize your posts and give them the expandable functionality.
The steps that must be followed for planting this TNT are,
  • Go to layout > Edit HTML
layout-edit-html

Now The Most Important Step –> Back Up Your Template
By backing up your template I mean that you must save a copy of your current template in your computer hard drive. If in case something goes wrong, you can restore your template and have everything working as normal as before.
To backup your template click on the link saying Download Full Template , as shown below
backup-template
If suppose something goes wrong , you will simply click the Browse button, locate your saved template and then simply click the Upload button to restore your template back to normal.
  • Click on "Expand Widget Templates" at the top right hand corner of your Edit HTML page
expand-widgets
  • Now find this code ]]></b:skin> 
Tip: Pressing Ctrl + F  and then paste this code into the search box, as shown below,
Search-code
The search box is an easy way of finding codes in your template.
  • Just after ]]></b:skin> copy paste the code below,
Tip: Highlight the code below and then press Ctrl + c to copy the entire code and then press Ctrl + v to paste the code
<style>
<b:if cond='data:blog.pageType == "item"'>
span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;}
</b:if>
</style>


  • Now find this code  <data:post.body/>
And just after <data:post.body/> add the code below,
<!--READ-MORE-STARTS-->
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'>
<div style="text-align: right;">Read More ->></div></a>
</b:if>
<!--READ-MORE-STOPS-->

You can replace the text in red with anything you like, e.g: Continue Reading, Keep Reading
If you want to shift the "Read More->>" text to the extreme-left side, use this code:
<!--READ-MORE-STARTS-->
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'>
<div style="text-align: left;">Read More ->></div></a>
</b:if>
<!--READ-MORE-STOPS-->

  • Save your template and you are Done!
Labels: