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:

Blogger Help - Add Read More link to your posts

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

Leave a Reply

122 Comments on "Blogger Help – Add Read More link to your posts"

Notify of
avatar
Sort by:   newest | oldest | most voted
Kartz
Guest

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!

View Comment
Divya Sai
Guest

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…

View Comment
Kartz
Guest

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.

View Comment
Just Me
Guest
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… Read more »
Divya Sai
Guest

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.

View Comment
28dayslateranalysis.com
Guest

Thanks for this. I got it to work on Minima Dark 3 column after shopping around on various other sites.
-Mike
http://www.28dayslateranalysis.com

View Comment
Divya Sai
Guest
*Love*
Guest

Read more option is placed at the left hand side..how to place it on the right hand side

View Comment
Divya Sai
Guest

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>

View Comment
*Love*
Guest

thanks its works…but there is an another problem..i tried your social bookmarks tutorial and it is showing at the front page of my all posts ..check this

comment image

View Comment
Divya Sai
Guest

Hi *Love*

In the second step, make sure that you add the second code only after :

<p><data:post.body/></p>

I have done this in a notepad template too:

comment image

View Comment
Aryan Cool Dude
Guest

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.

View Comment
Divya Sai
Guest

Welcome Aryan…..
I am happy that it worked for you!
You are always welcome here, and for more hacks and widgets, you can visit this page: Blogger Help

Regards
Sai

View Comment
М.Врединка
Guest

I can’t find “data post body”… 🙁

View Comment
Divya Sai
Guest

You’ll find it, only if you click on
“Expand Widget Templates”

View Comment
М.Врединка
Guest

Oops… Thanks!

View Comment
Sahar
Guest

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?

View Comment
Divya Sai
Guest

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.

View Comment
Sahar
Guest

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 🙂

View Comment
Divya Sai
Guest

Thanks Sahar, for appreciating the work
I am really glad that you liked this blog !

View Comment
wpDiscuz