Blogger Help – Add Read More link to your posts

Although this tutorial is the easiest way to truncate posts on Blogger blog, but being a javascript based hack, this method is not SEO friendly. If you want to use a SEO friendly post-truncating method on your blog, then kindly read this post.

Most of the bloggers, want to show more than one post in their blog’s home page, but displaying all the content on the home page of each and every post makes the home page very lengthy, and visitors may miss out any article while scrolling down the entire length of the page.
So here’s a method for bloggers to display only a part of  the posts, and not the entire posts. If a visitor wants to read the complete article then he/she will click on the “Read More” link at the bottom of the post, which will be redirected to the particular post.

Steps to follow:
1. Log into the Blogger.com account
2. Go to “Layout” section
3. Back up your current template, by downloading it.
4.  Now click on “Expand Widget Templates”
5. Now find this code – ]]></b:skin>
6.  Just AFTER that code add these lines

<style>
<b:if cond=’data:blog.pageType == “item”‘>
span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;}
</b:if>
</style>

7. Now again find this code : <data:post.body/>
8. And just after this, add these code lines:

<!–READ-MORE-STARTS–><b:if cond=’data:blog.pageType != “item”‘>
<a expr:href=’data:post.url’>Read More!</a>
</b:if><!–READ-MORE-STOPS–>

If you want to shift the “Read More!” text to the extreme-right side, use this code:

<!–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–>

9. Now save the template.

IMPORTANT :Now these adjustments will NOT show your previous posts with “Read More” tag, but you can display them with Read More tags, by editing them with instructions as below:
From now on, whenever making a new post, the part of the post you want to HIDE on your main homepage, write those lines in between these code lines:

<span class=”fullpost”>WRITE THE PART OF THE POST YOU WANT TO HIDE HERE</span>

See the screen shot below for details:

NOTE 1: After writing new posts, always proof-read your edit HTML section, to avoid mistakes, one such mistake is discussed below:

Make sure, that “Edit HTML”, while writing posts looks exactly like this:

<div style=”text-align: left;”>Post in brief, may include pictures too
<span class=”fullpost”>Hidden part</span>
</div>

In the above example notice that I have closed span, before div, that placement is very necessary, if you put like this </div> </span>, i.e. closing div first and span later this will NOT work, because span has been started inside div, so it must be closed within div tag.

In case you have multiple paragraphs, while posting a post, and you are giving same text alignment to all the paras, then by default, after every para, the div element will be closed, and again it will start for the next para, so THIS SHOULD NOT be like this, you have to start <div> in the beginning of the post, end it at the last, and make sure <span class=”fullpost”>Hidden part</span>, is between your div tags.
If you want your previous posts also to hide part of their text, then you must edit them and add span tags to them.

*UPDATE: Now there’s a new hack to make all this process automatic: READ HERE about AUTOMATIC READ MORE trick for Blogger.

NOTE 2: If the above method does not work in your blog, here try this second method:
eBlogTemplates

122 thoughts on “Blogger Help – Add Read More link to your posts

  1. Hey buddy,

    Thanks a ton for those tweaks! Got most of ’em working. But this one – Read more… – is not working for me. I did it just the way you have mentioned but it does not work.

    Instead of hiding a part of the post, it displays the full post. At the end of the post – to make it look ridiculous! – it shows ‘Read more!’

    I’d appreciate any sort of help. Thanks again.

    Peace. Good day!

  2. Hello Karthik !

    The answer to your query needed some HTML tags, so instead of writing it in this comment, I have added a not in the above post, please read it in the above post…

  3. Will try it out soon.

    Thanks a ton for the prompt response. In fact, I tried out both the methods mentioned here (the second one being eBlogTemplates); but in vain.

    Peace. Good day.

  4. hi,

    i’ve added this “read more” link to my blog, i haven’t tried it yet if it’s gonna work, but am hoping it will once i post a new entry.

    my question is adding the span code on my previous posts. i’ve tried doing it but it only hid the remainder of my post and the “read more” is not showing. i tried to copy the code in no. 8 just to be sure, this time it showed the “read more” but i cannot click it. it there another code to use? the span code works fine, it’s just that i want the “read more” to show.

    thanks,

    jasmine

  5. Your coding work is fine, and even the read more link is working and will take u to the correct post.

    The problem is, it is NOT hiding the post.

    To troubleshoot this, you have to read the NOTE1 in the above post.

  6. Hi Love, you can put it to the right side by this code :
    <a expr:href='data:post.url'><div style="text-align: right;">Read more!</div></a>

    Instead of this one:
    <a expr:href='data:post.url'>Read more!</a>

  7. Thanx man !!!!!!!!!!! Thanx a lot I wanted this feature in My Blog & had tried what other sites are having but none of them could either explain in detail or make the code work.

    But yours one did it in first attempt.

    Thanx Keep it up & keep posting such good articles.

  8. Hey, I LOVE this code…BUT is there anyway I can keep it from posting on ALL of my posts?

    Even on short posts where I DON’T want a “read more” link, it still adds it at the end of the post automatically. Anyway to fix that?

  9. Hi Sahar,
    Well, there’s no way to control the ‘read more’ link from posts, either you have to remove it completely or show it in all posts.
    But that shouldn’t be a matter of worry, cause that link is very small and will only take you to the post !
    And moreover most of the visitors coming from search engines like google etc. do not even have to see that, as they’ll be landing directly on the particular post page, and not necessarily on homepage.

  10. Thank you sir 🙂 You’re right, it’s not too bad having a link on all of the posts.

    BTW, your site is GREAT. Really one of the best and most helpful sites 🙂

  11. Well the code is placed after <data:post.body/>

    which is why it is being shown after the post and in a new line, i don't think there's any way to show it directly after the last word of the post, but you can ofcourse change the read more with any bold word, or any image etc. to make it visible more easily….

  12. Hi Dyvia,

    Your advices are great. But I have a little problem. I added “read more” link to my blog but the social buttons stayed on my main page. What should I do to make them show only when people open the entire article after clicking “read more”?

    10x in advance. 🙂

  13. Hello Mohd. and Ivaylo Spasov,

    The social networking buttons are not related to this “Read More” hack, you have to add a small code to those buttons, to prevent them from appearing in the home page, simply do this:

    <b:if cond='data:blog.pageType == "item"'>
    CODE FOR SOCIAL NETWORKING BUTTONS
    </b:if>

    Add those bolded lines to your social networking buttons code, that’s it !

  14. Hey Divya,

    You are precise as usual. Your code works perfectly!
    Thank you!

    P.S. I put the buttons in a table and your code surrounds the buttons and the table also. I hope that is not a problem if I decide to remove the table or some of the buttons in the future.

  15. Thanks Ivaylo,
    Of course you are free to add table or any other content to those buttons, that code in bold is being used just to hide the widget in your main page.

  16. Howdy Divya,

    Great tips. I have installed your read more link posts & it works awesome. The other day I stumbled upon a blog that taught me how to insert an image instead of the "read more" link. Its more visible than just a normal read more link. Anyways, I was wondering if there is a code to create a hoverover/mouseover effect for the read more icon.

    I also read your post on hoverover effect with html code for feed icons. Is it possible to try that with the read more icon?

    Hope you can help me out.

    God Bless,

    Chetan

  17. Hi Chetan,
    That’s of course possible, to simply add an image, replace
    Read more!
    in the code above with this:
    <img src="http://IMAGE_ADDRESS.jpg"/&gt;

    And if you want hover image effect too, then you have to add this code:
    <a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Back to Top"><img onmouseover="this.src='IMAGE1'" src="IMAGE2" onmouseout="this.src='IMAGE1'"/></a>

    Replace IMAGE1 and IMAGE2 with the direct links of the images…

  18. Morning Divya,

    The codes provided by you works great except for one little thing. I am able to replace “read more” with my image but I want that image button to have a mouseover/hoverover. The code is working as a read more image button that scrolls on the right side of the page with a hoverover effect.

    I think you are very close to solving my query.

    If possible, you can take a look at my site to see the “read more” button on the expandable post. This will give you some clarity.(http://poker-in-india.blogspot.com)

    Many thanks for providing your valuable time.

    Awaiting your reply,

    Chetan

  19. OOOps sorry, use this code:

    <!–READ-MORE-STARTS–><b:if cond='data:blog.pageType != "item"'>
    <a expr:href='data:post.url'><img onmouseover="this.src='IMAGE1'" src="IMAGE2" onmouseout="this.src='IMAGE1'"/></a></a>
    </b:if><!–READ-MORE-STOPS–>

    PS: I’ll be deleting the previous comment, as it may confuse others !

  20. Hi Divya,

    The code almost works! Smiles… You are probably gonna hate me for dragging this too long. The code works fine, although the hoveover effect doesn’t take place.

    Do you think its because of h expression tag with data post url? All your previous codes worked perfectly with hoverover when I installed them on regular posts and as html widgets on the sidebar!

    I understand if you cannot help me anymore. But I truly appreciate everything you have done for me.

    Hope we can close this chapter.

    Thanks,

    Chetan

  21. @ Everybody !

    To shift the “Read More!” to the extreme-right side,
    REPLACE,
    Read more!,
    in the above code, with this:

    <div style="text-align: right;">Read More…</div>

    I’ll update this soon in the post too, ASA I get some time 😉

  22. Hello Divya,

    This blog is indeed a great e-guide for bloggers like me and i found very useful tips here which made my blog more attractive and user friendly.

    I just want to clarify that after inserting the code for read more link from the above tutorial, I am not able to find out “span class equal to “fullpost”… /span” in my blogger post. What I did is that I pre-formatted blogger posts with this code, so that everytime I dont have to type this code manually or remember it (I am also among those bloggers who are not well-versed in html codes!!!! :(( ) I think you can include this step too for the ease of users of the code.

    One more thing i also want to add email subscription form to all my blog posts, can u please tell me which post i should refer, since i was unable to trace it out earlier.

    I added Related Posts html code in one of my blogs n it is working fine, but when i used the same code for other blog there is no change, can u just check n see at http://experienceswithshirdisaibaba.blogspot.com/ .

    If you get time please visit my blog http://experienceswithshirdisaibaba.blogspot.com/ n share ur valuable suggestions on hetalpatil@saimail.com.

    God Bless u!!!

    Hetal Patil
    http://experienceswithshirdisaibaba.blogspot.com/

  23. Sai Ram Hetal,
    Regarding the “Read More” hack, you cannot add the second code to the template, it can be added only to the post, and actually it is better to control it yourself for each and every post, as the placement should be very accurate, to generate curiosity among the readers to click on the post to read the post…

    And I think you have already done a great job on the Related Posts widget ….

    Keep up the gud work !

    An advice for you: try to put only one search form, and place the top header/banner exactly in the center !

    Regards
    Sai

  24. Took me awhile to figure out what was wrong, which by the way had nothing to do with your method, and the hack now works PERFECTLY. Thanks!

  25. Thank you. This one works better than the other hacks. I just wish there was a way to remove it from *every* post, but as the ones I have tried that promise this seem to fall apart, I will stick with yours and work around it 🙂

    Please update if you figure out a way to remove it from *all* posts.

    Thanks for your work 🙂

  26. Rajesh,

    Through this trick, the read more link will be shown after all posts…..but it is all your choice whether you want to hide any part of the post or not.

    I don't think a small link after the posts would be a problem for you….moreover as visitors mainly reach blogs from search engines so they'll directly read your posts and not homepage, so you do not have to worry much for that small link.

  27. Hi, thank you for posting this. It worked great in my template. I have 2 questions though.

    1) When I followed the steps, my "Read More" link is displayed to every existing blog post I have. Is this normal?
    2) I have an existing blog post that is very short and does not need a "Read More" link. How can I remove it?

    I checked the HTML of my post and it does not have any [span class="fullpost"]some text[/span] in it but it has "Read More".

    (Basically, the HTML of my existing posts has this skeleton):
    [div]some text and some paragraphs in here[/div]

    How can I remove the "Read More" from the short blog post? Thanks.

    -J-

  28. Quote:
    "Hi, thank you for posting this. It worked great in my template. I have 2 questions though.

    1) When I followed the steps, my "Read More" link is displayed to every existing blog post I have. Is this normal?
    2) I have an existing blog post that is very short and does not need a "Read More" link. How can I remove it?

    I checked the HTML of my post and it does not have any [span class="fullpost"]some text[/span] in it but it has "Read More".

    (Basically, the HTML of my existing posts has this skeleton):
    [div]some text and some paragraphs in here[/div]

    How can I remove the "Read More" from the short blog post? Thanks.

    -J-"

    Hello? Is anyone here? I hope there is an answer to this question.
    -J-

  29. Yup that's normal….it will be displayed below all posts.

    To remove the read more link, you have to edit the template.
    Check your template for the words "Read More" and remove that code.

  30. Hi Divya Sai,

    Thank you for your reply. Do you mean I have to remove this following group of code?

    [!–READ-MORE-STARTS–][b:if cond='data:blog.pageType != "item"']
    [a expr:href='data:post.url']Read More![/a]
    [/b:if][!–READ-MORE-STOPS–]

    Sorry I am not a techy so I am panicking. I just wanted selective "read more" on some blog posts. Again, thank you for helping me with this. I appreciate it.

    -J-

  31. Dear i m not able Add readmore with this code attempt….. plz tell some other way so that i can add read more to my blog….
    hope u reply me at ….www.eversongs.blogspot.com

  32. Hi Divya Sai,

    While continuing to look for related posts about "Read More," I have come across a blog about "Selective" Read More (by Hackosphere) and it worked well on my short blog posts.

    Again, thank you Divya Sai for your assistance. Your instructions helped me very much. Also, your blog site is very nice and got lots of helpful posts in it. 🙂

    I have linked BloggerStop on my "Blog Gurus" on the sidebar. You can view it from http://browsergamesonline.blogspot.com.

    Keep it coming! 😀

  33. Yeah finally it worked…m a fan yaar! Thanks for putting an end to my painstaking efforts to find "read more" tag. wish you and your site luck.i wish to seek some help from you on Google Adsense, if you can comment about that on my blog or here, I will be glad.
    many thanks again

  34. Hi Divya. Great site you've got going here. So, I've been trhough each and every comment here(all 79 of them) but I still can't figure this out .(yes, I know I'm daft)
    Basically, I followed the steps you put down and now I've got the read more tag displayed at the bottom of the post but still shows the full post. This is my second blog and first one on blogger. On wordpress, I had it so much easier.
    If you could please give me a detailed explanation of how to fix this? i know you just might be wondering how daft some people relly are, but that's just how it is.. please? help a poor unfortunate blogger?

  35. If you have correctly done the first 9 steps of the tutorial, then the possible error is in your post-article.

    As shown in the screenshot in the post above, there are two tabs- edit html and compose
    Now edit your present post, and click on that Edit html tab
    Then delete everything except your post text. That means delete all those span or div tags. Let the images be there and the hyperlinks.

    Now add the <span class="fullpost">…</span> to the post.

    So basically your post should look like this:

    Your post – part 1
    <span class="fullpost">
    Your post – part 2 (hidden)
    </span>

    That's it…NO OTHER span/div tags.

  36. It's not becaue there too many span tags, the fact is correct placement (opening and closing) of tags should be done by you.

    Read the "Note 1" in the post above, and try to keep the html part in the post as simple as possible !

  37. there is no data:post.body tag in my template :(( . i m using MAPLE LEAF template. the articles i post r generally very long, i want to collapse selected posts, looked for this hack all ovr net :-/, but my search stops at the requirement of this tag =(( . What to do??? PLEASE HELP 🙁

  38. I want read more hack, yahoo smiley hack for comments and disabling copy function for my blog. I am using MAPLE LEAF template. PLZ HELP. http"//hector.virk.blogspot.com

    Read More hack is most needed. plzzzzzzzz

  39. Yes Ankit you can control that.
    All the content in between <span class="fullpost"> …. </span> will be hidden and other content wil be visible in the homepage.
    you can use these tags for any parts of your post.

  40. hi,
    How do I do this for pictures. I have short text and more pictures and don't want to feature all of them just a teaser and then put in View more… ( the rest of appear).

    I can't seem to get this work. help please.
    thanks
    Sue

  41. sorry for not being clear. Basically what I am asking is :

    CAn the 'REad More' option work with pictures. I use short text on my post but want to include, say 5-6 pictures, so can I just put the short text and 1 picture and then have a read more option where people can view the rest of the 5 pictures.

    I tried this with the html you've given but all the pictures show at once ?

    thanks.

  42. Hi admin..please help me about breadcrumb in my blog…..
    Why have to post breadcrumb like this :-

    Browse » Home » Lelong » Senarai Rumah Lelong Januari 2011
    Browse » Home » Lelong » Senarai Rumah Lelong Januari 2011

    it's that normal?…or i must adjust something….

    Thank you…

  43. I was looking at you wbsite,Michael Vick Jersey which is wonderful, and noticed that you have a postcard published by my cousin, Mathew Gardner. I am currently researching our family history and wondered if you had Authentic NFL Jerseys Cheap the original postcard and any other information whih has not been published on your website.

    I have some information which I would be happy to furnish if you wish to get in touch.Cheap Steelers JerseysLooking forward to hearing from you.
    Pittsburgh Steelers Jerseys
    Authentic Steelers Jerseys
    Cheap Steelers Jerseys
    Youth Steelers Jerseys
    Womens Steelers Jerseys
    Custom Steelers Jerseys
    Steelers Super Bowl Jerseys
    Steelers Throwback Jersey
    Steelers Throwback Jerseys
    Cheap Steelers Throwback Jersey
    Cheap Steelers Throwback Jerseys

  44. Go to your Blogger Dashboard
    Then to the "Template" page of the particular blog.
    Then click on "Edit HTML" and then click on "Proceed"
    Now you'll see the option "Expand Widget Templates"

Leave a Reply

Your email address will not be published. Required fields are marked *