How To Show Post Summary Using The “Read More Link" - WINODEY

Latest

RECENT POST

FOR 728X90 GOOGLE ADSENSE ADS

Sunday, May 27

How To Show Post Summary Using The “Read More Link"

Read More in a blogger post is a most applied code to give your blog a beautiful look and ways of keeping your readers busy on your 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. 

Steps Needed To Add The Read More Link
1. Go to Design
2. Click on edit html
3. Then click on the download full Template 

=> Backing 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. 

3. Click on "Expand Widget Templates" at the top right hand corner of your Edit HTML page

4. Now find this code ]]></b:skin> 

What to do Next: Pressing Ctrl + F  and then paste this code into the search box.

Now: 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

ALTERNATIVELY,
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-->


If it work for you, drop your comment below, and do share with your Friends.

 

1 comment:

  1. Thank you for this useful post. I have been trying to do this on my blog, http://kydevolution.blogspot.com for a while now but i don't usually find the but now that i changed templates i can now see it. Do i have to put any code into the post? Thanks Once more

    ReplyDelete