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


Update: You don't need to follow this long method now. To add a read more or jump break anywhere on your post simply switch to "HTML" mode of your editor and paste this code in it:
<!--more-->
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!

Read Further to know How to Apply this TNT in your Posts
Now whenever you want to write a post in windows Live Writer, follow the procedure below,
  • Once you had finished writing your post, as shown below,
Readmore1
  • Just after completing your post click on the source button at the bottom of your windows live writer page,
readmore2

UPDATE: Instead of trying the long method below, there is an easy shortcut. Wherever you want the read more link to appear, simply paste this code there:

Nothing else required! :)




You will see something like this,
 source code for your post
  • Now use the code below to hide the portion of your post that you don’t want to be shown on your homepage
<span class="fullpost">
</span>
Now suppose if you want to show the post only till the lines
I have explained everything in these images so read carefully!
So you will add the codes as shown below,
the highlighted source code refers to the hidden text
You can see in the image above that I have added <span class="fullpost"> just above the part of the post I wanted to hide. The text that I want to hide is the one below,
“Please use windows live writer only for writing quality posts. This TNT of Read More link works best with windows Live writer. Blogger Editor is simply annoying and this trick simply just don’t work efficiently with it. If you still want to use blogger editor rather than windows live writer than frustration is what you will encounter! “
I added </span> to the part where the entire post completes or source code ends

In short add <span class="fullpost"> just before the text to be hidden and add </span> just after it
That’s All!
You can use some of the Images below instead of that Read More –>> text
 read-more with a black outline simple readmore text image read-more with a blue drop shadow read more text with black drop shadowread-more black and orange
To add an image instead of text simply replace Read More ->> in the code above with this,
<img border="0" alt="read more" src="URL Of Your Image"/>
Replace URL Of Your Image with your image link.

Update:-
I have created some high quality Read More Buttons, may be you will like them more. Visit these links,
If you want to learn how to add  these images instead of that Read More->> text, then let me know so that I could write a new post on that. And believe me adding an image instead of a text is extremely easy.

If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

95 comments

PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.
  1. You Welcome bro!
    I had received almost 4 emails for this post. I was going to publish a post on how to add social bookmarking icons below each post but since the demand for this post was high, I felt it necessary to serve you guys first :)

    ReplyDelete
  2. Well , one thing when ever you are free then if you can please also make some post about

    a) You have given two options for subscribe one is RSS Feed and other is email , how to put these in our blog, and assume that we are just beginners.

    b) You have a contact me page , how to create this.

    c) search box , as you have it on top . etc.

    Thanks

    ReplyDelete
  3. @Muddasir,

    I have corrected the code. Mistakenly I had written - instead of -- in the starters and enders i.e Read-More-starts --

    ReplyDelete
  4. Peace and love,

    You are right the code will work just fine even without adding those starters and enders. Those indicators just help to identify the code.

    ReplyDelete
  5. i did put the code in my blog template but blogger said it`s spam

    ReplyDelete
  6. @ha198000

    I haven't received such an error ever in my life from blogger! But may be you have not followed the instructions properly. Read the post once more , I am sure you will make it.

    I would advise you not to edit your template for the time being. I will give you a new template which is far better and more professional than your current one. So be patient and give me just two weeks.

    ReplyDelete
  7. Hi bro!

    I really like your blog theme and is clearly indexed.I have applied the read more hack in my blog.I want to know how you have shown HTML code in this unique way.Can you write a post on this.

    ReplyDelete
  8. Bro I am releasing a template tomorrow which will have a far beautiful blockquote than the one I am using at the moment.

    If you are talking about HTML codes in those images than they are just screen shots taken from windows live writer

    ReplyDelete
  9. Hey! I'm so glad I stumbled onto your site. I'm a new fan. I am able to show the "continue reading" link however, all of my posts remained the full version so there isn't a need for the "continue reading" button unless people want to see the comments.

    How do I fix my main page so that it will only give a paragraph of preview sentences instead of the whole post?

    ReplyDelete
  10. @Rosamond

    friend you inserted the code correctly that's why you can see the read more link. Now the only step you are missing is adding <span class="fullpost"> before the text you want to hide and </span> after it like in the above example shown. I will show another example below,


    <span class="fullpost">
    Your Hidden text should be written just between the codes above and below this text that you are reading at the moment
    </span>

    ReplyDelete
  11. nice way of explaining..it worked!!!

    ReplyDelete
  12. i am not using live writer then how can i use it in blogger and i try in blogger and live write it will not working

    ReplyDelete
  13. @it works the same in blogger editor as it does on windows live writer. Follow the same steps for blogger editor. I have observed it personally that bloggger editor is really inefficient when it comes to some HTML tags. If it did not work on blogger editor than read ->This post<- to download windows live writer and experience blogging like you never did before

    ReplyDelete
  14. Hi Mohd,
    I enjoy reading your website ,I am interested to know how can I apply read more to all my post which are already posted? I can manage to show Read More in my fresh post but when reader will click on label the search result will lead to string of a very long page !!! I wish to know how to apply read more to all the posts? I wish to know this at the earliest )))
    Thanks a lot for all your wonderful post .
    Manisha

    ReplyDelete
  15. @Manisha

    Manisha for that you will need automatic read more link which I am soon going to publish but if you want you can show only post titles on labels. For example just click any of my blog labels, you will find that only titles are appearing and not posts. If you like this method then I can explain how to do this in my next comment.

    Some good posts are on its way!

    ReplyDelete
  16. yes Mohd please let me know about the second method till you publish your post on this one ...!
    Thanks

    ReplyDelete
  17. Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: Open quote is expected for attribute "{1}" associated with an element type "src".

    help please i want to add image of read more

    ReplyDelete
  18. @Manisha

    Give me two days for a post :>. I am already over burdened

    @Sachin

    To add an image instead of Read More >> then replace it with this code instead,

    <img src="Image URL" />

    ReplyDelete
  19. hi.. nice post.. i did like how u said to post the image, but for me its coming just like a broken link.. no picture..not able to click on it also.. i uploaded the pic to picassa and pasted the link location as u told

    ReplyDelete
  20. @ACE Of BASE

    Did you replaced Image URL with the image link?

    ReplyDelete
  21. sORRY.. i PUT IN THE link location instead of url!! Its working great now.. Thanks!!

    ReplyDelete
  22. Dear bro,

    Thank you for your valuable information. But I cannot have link backup in my blog as it is a government official blog. But, I will create a separate blog to mention people like you. For present sorry

    ReplyDelete
  23. Mohammad I started off with Bloger and now am using Live Writer. I am having Read More Jump Links in all my posts now when I did not insert them. How can I correct this to only the posts that I use your Span codes? In other words on posts that I had ion the blog from prior to implementing this are now showing read more when there is nothing more to read?
    Thanks

    ReplyDelete
  24. @Remington


    Few important things

    1. Your posts will be summarized at homepage only so no need to worry about older posts as they will appear as full pages in search engine listings

    2. The best way to summarize those posts which have a read more link at the bottom is to open each of those posts in windows live writer and start adding the span tags to areas as instructed in the post above.

    3. Remember even if you dont add the span tags the read more link will appear at bottom by default. So make sure you add it to every post and never leave a post in full length at homepage. It is professional to summarize each post.

    4. Summarize only those posts that appear at your homepage and leave others as it is.

    Hope that would help.

    ReplyDelete
  25. HI, i really like your readme post link. Can i use this, or maybe sometin like it. How?

    ReplyDelete
  26. Also can you provide some hover code for it

    ReplyDelete
  27. Thanks Mohammad I understand thanks that helps. Live Writer is great! Much appreciated.

    ReplyDelete
  28. now...THE NEW PROBLEM! i can't put an button!

    error sais:

    \\\\\\\\\\\\\Open quote is expected for attribute "{1}" associated with an element type "src".///////////////////

    i don't get it!all steps are maked...what's problem?
    answer me pleassseeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee

    ReplyDelete
  29. @john
    All details to use this link is clearly written in the post. Juts start trying it :>


    @mary

    I am sorry for the inconvenience. Actauuly the image code is not well typed. Use this code instead,

    <img src="URL Of Your Image"/>

    It will work perfectly! :>>

    ReplyDelete
  30. no! this is what i try to say!
    it don't works!
    error says like other!

    \\\\\\\\\\\\\Open quote is expected for attribute "{1}" associated with an element type "src".///////////////////

    :( very-very sad :(

    ReplyDelete
  31. Hello.

    i cudnt find the code



    :(




    and, if im using the WLW, do i still need to change my template on blogger , THEN follow the instruction above for WLW?



    ??? sorry~. im confused.

    ReplyDelete
  32. the code i cudnt find is the 2nd one.

    data:post.body/

    :(

    ReplyDelete
  33. @normalizaibrahim

    Yes true whether you are using blogger editor or WLW you must edit the template first.

    You said you could not find data:post.body and that is strange. What's your blog URL. I visited your profile but found myspace profile only, what's your blogspot URL?

    ReplyDelete
  34. hello again sir,

    im trying to put this one on my blog for 3days now im always getting this error:

    Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: Open quote is expected for attribute "{1}" associated with an element type "src".

    hoping for ur help... thanks..

    ReplyDelete
  35. @kapalmukz

    Are you using an image instead of the text "Read More >>" If yes then use this code instead,

    <img src="URL Of Your Image"/>

    This will certainly work. If you still couldn't add it then simply send me your template. I will add the code and will return it back to you. This is what I can do for you :>

    ReplyDelete
  36. have u checkd my blog?
    :((

    im still waiting..

    ReplyDelete
  37. @normalizaibrahim

    sorry sorry. Dear first click the "Expand Widget Templates" Box at the top right corner and then search for the data post body code again. It should work! if not then simply send me your template at mustafa.stc@ gmail.com I will do it for you :>

    ReplyDelete
  38. omg. i thot ive clicked that expand widget templates thingy.

    so i guess i havent.
    :P

    really sorryy!
    im being careless.

    thankyou sooo much for you time !!

    ReplyDelete
  39. Sir how do i add New Post and Older Post link below my sites blog listings just like you have below your comment section. mine is missing (next)(Previous) button or link

    ReplyDelete
  40. Thank you very much..... this is very helpful
    http://ame-education.blogspot.com/

    ReplyDelete
  41. Hello Mohammad,
    It very good tip,
    but i have created Page on my site about Request your favorite guitar chords and in that page it show Read more Button but i don't want to display read more on my "Page" so what should i do.
    check here :
    http://www.cafeguitar.co.cc/p/shoutbox.html

    ReplyDelete
  42. @Jeet
    That read more hack will be provided by Mohammad soon with the date hack as well in new article...:)

    Just wait for sometime..:)

    Thank You
    Samsexy98

    ReplyDelete
  43. @Jeet

    You reminded me of a great article!

    @sam

    You will be credited for it! :)

    ReplyDelete
  44. Hi Mohd,finally this post came and I am happy for this.Thanks .
    Enjoying all your new post in express speed.Great going.Take care
    Manisha didi.

    ReplyDelete
  45. @Manisha

    Thanks Manisha. I love it when you comment :)

    ReplyDelete
  46. @Marko

    I apologies for the late reply and I just visited your blog and saw that you have successfully implemented them. Where do your comments go? :)

    ReplyDelete
  47. Blog is nice for seo. Most blogs are interactive. A blog can be private, as in most cases, or it can be for business purposes. Hi, some one from face book refereed your link i have book marked it nice blogs you write see Free.

    ReplyDelete
  48. dear Mohammad when i replace the readmore word from < src=”URL Of Your Image”/> it shows
    XML error message
    reply me at hackerstips1262@gmail.com

    ReplyDelete
  49. @Ankit

    Sorry for the inconvenience brother. I have corrected that code. You can now use it. It will work just fine.

    ReplyDelete
  50. Sry I deleted the comments, but as you noticed I successfully solved all problems. Now I'm just wondering, if there is any possibility to remove this button at "special" posts? Accasionaly I post just one picture or a short text and I don't need the "read more" button to be showed...

    ReplyDelete
  51. @Marko
    No problem buddy. I am happy it worked for me. Oh sure you can do that. You can hide the read more link in any post you may wish. You just need to enclose the code you added after data:post.body between two additional codes which you can get from this post:

    Show and Hide Widgets in Blogger
    PS: Read the part where widgets are made to disappear on particular posts.

    ReplyDelete
  52. I found the code, tried it but it doesn't work. I think the problem is in b:if code, which is already there. I suck at html basics, and don't know how to correctly add another "cond" to b:if code. I would also like to add more "url's". Can you please show me an example with b:if, two "cond" sentences (show only on a home page, and hide widget in certain posts (at least 2 url's)...

    Much appriciated :)

    ReplyDelete
  53. Sry for double posting but "my" code for read more widget is here: http://www.pastie.org/2094736

    If it helps you.

    ReplyDelete
  54. @Marko

    1- You are using the new blogger template which has the read more link by default. First you will have to remove it: Click the "expand widgets templates" box and search for this code in your template:

    <b:if cond='data:post.hasJumpLink'>
    <div class='jump-link'>
    <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
    </div>
    </b:if>

    Delete it and replace it with the codes mentioned in the above tutorial.

    2- Secondly your conditional statements can be added easily in this pattern

    <b:if cond='data:blog.pageType == "static_page"'>
    <b:if cond='data:blog.pageType != "item"'>

    <a class='linkopacity' expr:href='data:post.url'>
    <div style='text-align: left;'>
    <img src='http://4.bp.blogspot.com/-mXIfVQU_sRU/TVwnXwEwjlI/AAAAAAAABEo/9boNqCs3Xx8/s1600/preberi_vec2.png'/>
    </div></a>
    </b:if></b:if>



    Apply them and let me know if you needed more help.

    ReplyDelete
  55. 1. I deleted the JumpLink code, but I didn't replace it with another one. My Read more code is after data:post.body

    2. I added my statments like this (http://pastie.org/2095419) and it still doesn't work (the button is still shown)...

    ReplyDelete
  56. @Marko

    Marko you are again making the same mistaking. No need to add the br tags and the b:else condition. Just follow the pattern I mentioned in point#2.

    ReplyDelete
  57. I deleted the br tags, but if I delete the b:else (or use your example from comment #64) condition the button is not shown where it should be... Also I tried to apply b:if HIDE everywhere but there was no success -.-

    ReplyDelete
  58. please help me bro,my blog shows full post in home page how to change it.please give me a solution.

    ReplyDelete
  59. Aaa found it... I just need to add final /span code in additional paragraph and then the button is not shown... :)))

    ReplyDelete
  60. @Marko Alpner

    ...but also FB buttons dissapear :(( DAMN!

    ReplyDelete
  61. @mohammad:

    bro ur blog is the Soul of mah blog www.hackingmyworld.blogspot.com.

    But bro can u plz plz post a tutorial on " how to ad those IMAGE READ MORE " links on blog ?" plz bro

    ReplyDelete
  62. I meant those ANIMATED buttons bro ? Is it the same procedure to add the image link instead of the READ MORE text or something else ?

    ReplyDelete
  63. Hey Bro.......sorry for annoying you too much..........but i already found the process to use those images . Ur blog is a ALL-IN-ONE place 4 bloggers bro.....thnx !

    ReplyDelete
  64. Good works bro.. thanks alot.. wish all the best for your blog

    ReplyDelete
  65. hey help me bro its not wrking in my blog http://www.azjokes.co.cc/

    ReplyDelete
  66. hey dont forgot to rply me plz

    ReplyDelete
  67. hy mohammed
    even if i write the span fullpost tag before and after th hiding text why isnt the dotted lines around h3 tag not hiding. should we appply these tags per image to hide the image.
    please check the first post of my home page " www.sportapex.com " and say why isnt the dotted line hiding even if i put the span fullpost tag... plz have review of my blog and have some suggestions as well..
    kind regards

    ReplyDelete
  68. Following all instructions provided is working, but only on IE. Any reason why they do not seem to work with Chrome, FireFox, or Safari?

    Also, how do we get thumbnails to accompany shortened homepage posts with read more links?

    Thanks!

    ReplyDelete
    Replies
    1. Fixed problem to have all browsers work! I did not have the first span class="fullpost" tag in the correct place within code.

      Would still like to know how to get thumbnails to show up in condensed lead-ins using the read more>> feature.

      Thanks again for your GREAT BLOG! Extremely helpful!!!

      Delete
  69. This comment has been removed by the author.

    ReplyDelete
  70. hey i am finding data:post.body three times

    ReplyDelete
  71. Bro. can u give your template ????????? plz

    ReplyDelete
  72. HI Mohammad I am a new blogger I want to add Read more link in my Blog by I can't find "Expand Widget Box" in my Blog now my Blogger upgrade so I can't find please help me.

    ReplyDelete
  73. @Soogle

    Go To Blogger >> Your Blog >> Template >> Edit HTML >> Proceed >> And there is a Expand a Widget Option >> See this Picture For More Info

    http://3.bp.blogspot.com/-nKZwBzjqOT4/T3gClV5Bx2I/AAAAAAAABE0/RPEKlUAHxpU/s1600/1.png

    ReplyDelete
  74. awesome mohammad....
    u came in my life like angel....:D
    i was frustrated of that full post.....but u solved it

    BIG THANKS TO YOU....

    MAY ALLAH BLESS YOU.....

    ReplyDelete
  75. its done...
    but have a problem.....
    when i create a new page then there also downlink link appears at the bottom.....:O
    please help Mustafa Bhai

    ReplyDelete
  76. how to add text thats will opean ib read more
    plz. tell

    ReplyDelete
  77. helow bhai blogger ki post me read more ka option aa to gya hai par post to wesy he full show ho rahi to read more ka option lagany ka faida kia hwa koi asa tareeka bataen k post full show na ho plz mugghy jawab ka intazaar rahyga thnk u bro

    ReplyDelete
  78. meharbani kar k jaldi jawab den thnk u

    ReplyDelete
  79. Hi, i am a bit new to this site and blogging in general but i deeply appreciate the information and resources i have gotten here. you guys are truly the best.
    I have a little problem though i can't find the in my blogger template.
    Then i downloaded the Novinture template and i installed it successfully but when i returned to my former blogger template i can still see traces of the Novinture template on it. Check it out at www.kydevolution.blogspot.com

    ReplyDelete
  80. @Mohammad Mustafa Ahmedzai
    hey when i try to find
    the search bar shows nothing found! what to do i just use a free template and when i took the demo of the template it showed that there is a read more affect but now i see there is nothing can u help i always prefer ur posts for these help topics and frist time facing problem bro pls help!! visionelitecomputer.blogspot.in

    ReplyDelete
  81. nice ya...i love you

    ReplyDelete
  82. sir all are working but not summarized please help me

    ReplyDelete
  83. Hi there,

    Great post... I happen to have a grid and list view, and I wanted to ask you;
    1. Is it possible to format the preview text (it shows all together with no line breaks)
    2. Is it possible to show the prevew in list view but not in grid view?

    thank you!

    ReplyDelete
  84. Please can you write a post on how to add the number of how many people commenting and the number of comments etc.

    ReplyDelete
  85. i cant find ]]> in my blog

    ReplyDelete
  86. its not working in the new template editor of blogger. can you help me Mohammad?

    ReplyDelete
  87. What Am I doing wrong?
    Blog shows full post in home page :-(

    ReplyDelete
  88. Update:

    You don't need to follow this long method now. To add a read more or jump break anywhere on your post simply switch to "HTML" mode of your editor and paste this code in it:

    <!--more-->

    ReplyDelete