Welcome, visitor! [ Login | Sign Up ]
Home > Blogger Articles > How To Add The Blogger “Read More” Expandable Posts Link

How To Add The Blogger “Read More” Expandable Posts Link

Posted: Saturday, February 16th, 2008 | Author: David

This is a pretty popular Blogger hack that lots of people have asked me about. Instead of answering to each email individually, I thought it would make more sense to write an article about it.

With this hack, you can choose to display a select amount of text from the beginning of each post as a teaser instead of showing the entire post on the front page of your blog. Then when people want to read the rest of the post, they can click a “read more” link to see the full post. This is very handy if you have lots of long articles all on one page. (Note that you’ll need to have post pages enabled in order to make this feature work.)

Step #1 - Update Your Template Code

First you need to edit your existing code so I recommend copying and pasting it into notepad or any text editor. Also, it’s smart at this point to create a backup of your template just in case something goes wrong. Now do a search (CTRL + F) within the text editor for the following code post-header-line-1. This is the default code that Blogger includes but some custom templates remove or change this code so you might have trouble finding it. If you can’t locate this text then try searching for <data:post.body/> instead. Your template will for sure have this since it’s the tag that actually prints the body of your post.

Now depending on which code you were able to find will determine how easy the next steps will be. You might need to do some detective work first in order to get this working properly in your custom template. The idea is to get this new code into your template before the <data:post.body/> tag. Keep reading and hopefully the explanation will illustrate the concept clear enough so you are able to adapt this hack to your custom template.

Add the following code below the <div class=’post-header-line-1′/> and <div class=’post-header-line’> tags if you’ve got both.

<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>

The result should look something like this:

new-code-block.png

If you don’t have the default <div class='post-header-line-1'/> tag then your result should look something like this instead. This is how it would be done in the MushBlue Blogger custom template:

new-code-block-mush.png

Notice in both examples that the code in yellow and the <data:post.body/> tags are the same — it’s just tag above it that will differ based on the template you’re using.

Now let’s add one more bit of code which will actually create the “read more” link in your post. This code will go below the <data:post.body/> tag so copy the following and paste it in. Feel free to change the “Read more…” text to whatever you want the link to look like. Be careful not to delete any other code during this process.

<b:if cond='data:blog.pageType != "item"'><br />
<a expr:href='data:post.url'>Read more...</a>
</b:if>
</b:if>

Yes, there are supposed to be two </b:if> tags in the above code so don’t think it’ s a mistake. The result should look like this:

new-code-block-2.png

This code will be the same no matter what template you are using. Just make sure it goes below the <data:post.body/> as shown in the image above.

Now let’s look at what the final result should be. Here’s the updated code block you just worked on all put together:

new-code-block-3.png

Ok, you’re all done editing the template code. Paste it back into your Blogger html window and save it. If you get an error, you made a mistake. The most common mistake is to accidentally delete a > or < while pasting in the new code. If it saved successfully, it’s time to move onto the next step and modify a quick Blogger format setting.

Step #2 - Add a Class Tag in Your Default Post Template

For this step, you need to navigate in your Blogger account to “Settings” => “Formatting” and scroll all the way down to the bottom. It’s the last option called “Post Template”. You’re going to paste in the following code:

<span class="fullpost">

</span>

You’ll want to keep the spaces in there which will make sense later. After you save this, it will look like this:

post-template2.png

Step #3 - Create a New Post

Ok, we’ve got everything all setup so it’s time to go and test it out. Hopefully you’ve got a new post in mind for your blog. If not, then we’ll just create a test post which you can later delete. When you click on the “Posting” tab, you’ll notice that the post text area is now pre-populated with the <span class=”fullpost”> and </span> tags. If not, then you didn’t save it properly so go back and re-read step #2.

So when writing your new post, anything you put above the <span class=”fullpost”> tag will be the teaser text. The main body of your post needs to go in between the <span class=”fullpost”> and </span> tags in order for the “read more…” link to work properly. See the screenshot below. Sometimes pictures illustrate better than words.

post-template-result2.png

Now publish or preview your post to see the “read more” hack working on your blog. If it doesn’t show up for some reason, go back and run through the steps again. Most likely you pasted the code blocks in the wrong places. It’s difficult to troubleshoot these issues since each template can be unique so please make sure to double-check your template before asking for help in the comments section below.

Here’s the live post with the “read more…” link properly working based on the text I used above in the post text area.

post-results.png

Additional Info

If you want to go back and update your old posts with this new “read more…” feature you can. Just go back and edit each post manually. Essentially you’ll need to paste in the <span class=”fullpost”> and </span> tags breaking apart the post into two parts.

For some posts, you might not want to use this feature at all. If that’s the case, just delete the <span class=”fullpost”> and </span> tags from within your new post text area. Then your new post will show up entirely just like it used to before you implemented this hack. Enjoy!

Ready to super charge your blog? Check out our professional premium blogger templates or make money by joining our blog affiliate program!

If you like this post then please consider subscribing to our eBlog Templates RSS feed. You can also subscribe by email and have new templates and articles sent directly to your inbox.

,,,

Blogger Articles


Trackbacks

  1. Jaxly » Stuff for Bloggers - In 5 Minutes on June 11, 2008
  2. Blog-O-Ninja - 7 Days to Better Looking Blog-Day 6 on June 16, 2008
  3. 7 Days to Better Looking Blog-Day 6 | Blog-O-Ninja on July 2, 2008
  4. Sino ba si don_ser? » Blog Archive » How to Show Summary Only in Blogger on July 11, 2008
  5. From free for free » Blog Archive » Add Read More on blogger on July 23, 2008
  6. Hey, Blogger Bloggers: Add ‘More’ to Your Posts « The Writing for the Web Blog on September 13, 2008
  7. JomPHP » Blog Archive » 10 tips berguna untuk pengguna baru blogger on October 2, 2008
  8. SJOGRO.com » Read more… on October 24, 2008
  9. How Blogger has changed | blog.maja on November 10, 2008
  10.   How to Show Only Summary in Blogger by don_ser on November 22, 2008
  11. 10 most wanted essential Tricks Hacks Tips for blogger | Blog Solute on December 11, 2008
  12. unix86.org » resources on December 23, 2008
  13. HamzaED on March 6, 2009
  14. How To Add “Read More” in Blogspot « Satpam Jaringan on May 23, 2009
  15. Stretch DeMinima – A minimalist Blogger template for you! | PC Tonic on June 10, 2009

393 Responses to “How To Add The Blogger “Read More” Expandable Posts Link”



   
Reply
Oksana on Mar 24, 2009, 8:08 am  

Just following up on my previous question, is it possible to tag “Read more” onto the end of the sentence? For instance:

Text text text text Text text text textText text text textText text text text [Click here to read more...]


   
Reply
onlinemommy on Mar 24, 2009, 6:41 pm  

Thanks for the tutorial!


   
Reply
P.K.ARUN(www.hacking2all.blogspot.com) on Mar 26, 2009, 9:13 pm  

yes it is working & u used nice template….


   
Reply
Renton on Mar 27, 2009, 4:55 am  

Nice tutorial, but when I did everything you wrote, every post on my blog just disappeared, so I had to revert all the changes in HTML…


   
Reply
Anurag Bansal on Mar 28, 2009, 10:59 am  

Thanks for this tutorial. Works like a charm. I didn’t find any issues with the tutorial but yeah a little bit of understanding of CSS will definitely help.

Thanks again..
Cheers
Anurag Bansal @knowliz


   
Reply
solis on Mar 30, 2009, 5:10 pm  

But “read more…” appear on all my posts,even before I use it for a new post. What can I do?

thank you


   
Reply
Gengwall on Mar 31, 2009, 5:33 am  

solis,

see my comment from Feb 26, 2009, 7:46 pm on page 3


   
Reply
Livingwith Cancer on Apr 5, 2009, 7:38 pm  

Seems like a cool hack. When I have a moment I will try it. Thanks for the effort.


   
Reply
breaksfat on Apr 6, 2009, 3:58 pm  

good article, very helpful. Its my favorite site i I want to make read more in my blog. thank u


   
Reply
International Travel on Apr 8, 2009, 1:16 am  

Thank you for this David but does it work on other formats, i.e. WP. Just got a WP blog up and working but this sounds good to try.


   
Reply
saddeea on Apr 11, 2009, 6:02 am  

i can’t find the code “post-header-line-1″ nor ” ” what should I do??


   
Reply
Nick on Apr 16, 2009, 4:09 pm  

The link shows up at the bottom of every page, just like you said it wouldn’t.


   
Reply
Bill H on Apr 19, 2009, 3:04 pm  

The “read more” is showing up on all posts, including ones which have no more to read. That seems to be a common problem, solved on your comment of Feb 26th. However comment dates jump from Jan to Apr, so I don’t see any such post. If there is a solution, how come you don’t add it to the article?

Blogspot is a wonderful community with tons of contributions. Some of them even work. This is the third expandable post one that I’ve tried, and I’m still looking for one that works. Lots of other things work really well, but it seems no one has solved this one. I don’t mean to be rude, but…


   
Reply
Gengwall on Apr 20, 2009, 6:00 am  

Bill H,

The comment is on page 3. The comments, at least on that page, are not ordered perfectly by date. I see the section where you say the dates skip but this comment occurs further down. Just scroll thru the whole page and you should be able to find it.


   
Reply
Bill H on Apr 20, 2009, 8:38 am  

Well, I found the Feb 27th post, but I didn’t quite follow which part it was supposed to replace, and I wasn’t sure about the “I escaped the…” stuff which might mean that I’d need to “unescape” it when I pasted it, assuming I was pasting it in the right place. I’m pretty stupid on this kind of thing, which probably means I don’t really need a “read more” thing on my blog.

I finally wrote a short intro post and put a link at the bottom to the full article which I hosted on my own website. I know how to do regular websites fairly well.


   
Reply
Gengwall on Apr 20, 2009, 9:36 am  

Don’t give up!

I had to “escape” the text so it would post properly here but you shouldn’t have to repeat the process as blogger generally does whatever escape sequences it needs to when you update the template. The exception is in the “greater than or equal” expression in the javascript IF clause (which I fix below). The blogger parser tends to hiccup on greater than and less than symbols, thinking they always are associated with an html or xml tag, so you will have to replace the greater than symbol with “&gt;” before you paste into the blogger template. Sorry. That was one I missed when putting up the comment.

Now, where to put it. In the tutorial, there is a segment of code which has this written before it:

Now let’s add one more bit of code which will actually create the “read more” link in your post. This code will go below the <data:post.body/> tag so copy the following and paste it in. Feel free to change the “Read more…” text to whatever you want the link to look like. Be careful not to delete any other code during this process.

It is in step 1, about half way thru.

In that segment of code is the line: <a expr:href=’data:post.url’>Read more…</a>

That is the “a tag” I was referring to in my post. It is that line of code that you replace with the full segment of code from my comment.

Then…to keep “Read More” from showing up, all you have to do is eliminate the “fullpost” span opening and closing tags from your post (or simply blank out the class or use a different name for the class than “fullpost”).

To summarize:

the code

<a expr:href=’data:post.url’>Read more…</a>

in the tutorial gets replaced with

<textarea expr:id=’”ad” + data:post.id’ style=’display:none’><data:post.body/></textarea>
<script>
if(document.getElementById(’ad<data:post.id/>’).innerHTML.indexOf(’fullpost’)&gt;=0) {
document.write(”<a expr:href=’data:post.url’ target=’_blank’>Read more….</a><br/>”)
}
</script>

(I have done the escaping right this time…I think…so just copy and paste)


   
Reply
Nick on Apr 20, 2009, 9:50 am  

still didn’t work for me. says:

Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: Element type “a” must be followed by either attribute specifications, “>” or “/>”.


   
Reply
Gengwall on Apr 20, 2009, 10:38 am  

I just posted a reply but I don’t know if it took. It might have to be moderated. You can go to my hacks web site and find the same info without the problems inherent in trying to enter html code into a comment box.

gengwall.netau.net


   
Reply
Bill H on Apr 20, 2009, 10:48 am  

Nope, I got completely lost. I do not understand the Blogger template at all, and I understand javascript even less. I went to your site and tried to wade through it there, and was lost on the bit about what the textarea was doing. Thanks anyway. I don’t write that many long posts.


   
Reply
Bill H on Apr 20, 2009, 1:01 pm  

Well, I went back and took another shot at it, using the instructions on your site. It puts the “read more” only when the “fullpost” span tag is present in the post, but it displays the entire post above that “read more” and not merely the portion that precedes the span tag. I checked carefully and both parts of what I pasted match your instructions exactly, and I made sure the is correct in the post.

I tried surrounding the Part 1 code by tags and that did not help.

Your instructions did not say to remove the “” and it is still there preceeding the Part 2 code of your instructions. Should it be removed? Or altered? Or “iffed” in some way?


   
Reply
Bill H on Apr 20, 2009, 1:03 pm  

Okay, the comment took out part of my post. I’m about ready to hang it up. The part I was questioning was the “data:post.body” in angle brackets.


   
Reply
Gengwall on Apr 20, 2009, 1:15 pm  

hmmm.

You should not remove the “data:post.body” tag. The only thing that gets “removed”, technically, from the blog template is the <a expr:href=’data:post.url’>Read more!</a> segment of code which gets replaced by the textarea and script in my code.

Can you get it back to the point where it was handling the read more display correctly but no hiding the second part of the post? I could go out and take a look at it then. Sometimes, blogger mucks up posts and I have had a situation where the “fullspan” tag has been replicated and that completely messes up the post (and subsequently, the “read more” positioning)


   
Reply
Bill H on Apr 20, 2009, 1:33 pm  

I got it working. I was putting the style tag inside the Blogger template. Big no no. Thanks for your patience. The first expanded post on my blog has a comment which I added to give you credit for the feature.


   
Reply
Gengwall on Apr 20, 2009, 1:44 pm  

No problem. I’m glad you got it working. I know the template can be a bear.


   
Reply
Nick on Apr 20, 2009, 1:50 pm  

okay i finally got it to work. your instructions over at gengwall.netau.net were very helpful. thank you!

for those of you stumbling onto this blog post in google, go to gengwall.netau.net and search for the “Read More” Post Summary Hack. it does a great step-by-step job of explaining it and fixed all my hiccups.


   
Reply
Me on Apr 20, 2009, 9:04 pm  

Thanks, it works.


   
Reply
Sam Ranjan on Apr 21, 2009, 5:32 am  

Thanks it Worked..


   
Reply
Ashish on Apr 21, 2009, 7:31 pm  

Gre8….its working
Thanks……..


   
Reply
Celine on Apr 24, 2009, 12:36 pm  

Hi!

If you guys want the “read more” not always appear in each post, use this :

http://www.bloggerbuster.com/2008/02/how-to-create-post-summaries-in-blogger.html

It worked for me, very simple.


   
Reply
Ferretti on Apr 28, 2009, 5:49 am  

thx. a million! I got it working just fine, but is there a way for someone to click on “Read More” and only see the rest of the post and not the entire article?


   
Reply
Gengwall on Apr 28, 2009, 6:02 am  

Ferretti

You could work up a hack that operated like the expand post (within the same page) hack I have which would, instead of displaying the whole post, display the other half. I don’t think the alternative - changing the “item” page display to display only a portion of the post just like the list display is doing with the beginning of the post in the “read more” hack - is necessarily a good idea. But it’s up to you.

In either case, you would need to change the post template to, instead of having a “fullpost” span, have something like “part 1″ and “part 2″ spans, and then just hide part 1 on the item page just as you currently do to part 2 (i.e. the “fullpsot” span) on the list display right now.


   
Reply
Mikes@Your Daily Word on Apr 28, 2009, 1:09 pm  

I’ve been looking for ways how to do this until i found your site. thanks a lot!


   
Reply
naran on May 2, 2009, 1:28 am  

very nice tutorial. that helped me a log. thanx :)


   
Reply
gigamed.admin on May 7, 2009, 6:32 am  

thanx alot david

its working


   
Reply
MATHEW on May 9, 2009, 1:08 am  

THANKS FOR THE USEFUL POST. AFTER AROUND 5-10 ATTEMPTS, IT IS FINALLY WORKING. YAHOOOOO. BUT THIS ONLY WORKS FOR NEW POSTS!!!!!! HOW CAN I ADD THE ‘READ MORE’ HACK ON EXISTING POSTS????

..MATHEW..
HTTP://ANISHMATHAIMATHEW.BLOGSPOT.COM


   
Reply
Gengwall on May 11, 2009, 5:53 am  

MATHEW - you would have to go in and add the “fullpost” span to any older posts at the position where you want the break. Make sure to add the closing span tag as well.


   
Reply
MATHEW on May 11, 2009, 3:17 pm  

@GENGWALL - THANKS FOR THE SUGGESTION. THIS IS WHAT MATHEW IS DOING:

PLACING THIS WHERE THE BREAK IS INTENDED AND
PLACING THIS AT THE END OF THE POST.

WHEN MATHEW APPLIED IT, THE “READ MORE” LINK IS APPEARING AT THE END OF THE POST :)
WHAT IS MATHEW DOING WRONG??


   
Reply
hiral on May 12, 2009, 3:23 am  

lovely description


   
Reply
Gengwall on May 12, 2009, 6:28 am  

I looked at one of the posts on your blog where “CLICK HERE TO CONTINUE READING……” appeared at the bottom. You have a lot of spans and divs in your posts and that seems to be the problem. The “fullpost” span on the entry I looked at closed at the end of the sentence - so the only thing hidden was that one sentence.

The entire content of what you want hidden must be within the span, like this:

<span id=”fullpost”>
The whole rest of the post - everything that you want hidden. That includes any other spans and divs in the body of the post
</span>

An important consideration is that the “fullpost” span should not “cross” the contents of a div or other span. In other words, you should not have a situation like this:

div1 starts
fullpost span starts
div1 ends
fullpost span ends

This actually happened in the post I looked at (actually, there was a div and multiple spans whose boundaries were crossed by the fullpost span)In the above example, the fullpost spand should be entirely enclosed in div1, like this

div1 starts
fullpost spans starts
fullpost span ends
div1 ends

This may be difficult in your posts because there are so many spans and divs. When you are altering old posts to add the new read more function, you really need to be in html edit mode on the post and make sure that everything is properly contained.


   
Reply
M. Atif Riaz on May 15, 2009, 9:57 am  

very very nice blogger hack, my blog is just charming after this

Thanks


   
Reply
mystery of the world on May 16, 2009, 1:25 am  

Great Info!
This is what I’ve looking for.
Many thanks, keep on…


   
Reply
Imran Ali Dina on May 20, 2009, 11:28 pm  

Thanx alot, its a wonderful help.


   
Reply
siruvan on May 22, 2009, 11:11 pm  

after finishing how u hv ilustrated, when i attempt to save template i got this following error message.

“Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The element type “b:if” must be terminated by the matching end-tag ”

can i have a remedy for that.


   
Reply
Chris on May 23, 2009, 3:58 am  

@gengwall -

I’ve tried to copy the advice on your site for the ‘Advanced Read More ‘ tips.

I’ve successfully done Number 1, so that the read more link isn’t displayed on every post.

I’ve tried to do part 2 - but when adding the script into the header section my blog formating is being destroyed and it just isn’t working.

I’ve tried adding it to different parts of the header section but it breaks every time. Can you let me know exactly where the script in B Part 1 needs to go so I can get expandable posts?

Thanks in advance.


   
Reply
magedology on May 25, 2009, 8:29 pm  

very nice tutorial. that helped me a log. thanx

tested in

http://gotoefl.blogspot.com


   
Reply
Joseph on May 26, 2009, 5:07 pm  

Is it possible for blogspot template. I seems not getting it on. Can somebody help?


   
Reply
LJP on May 27, 2009, 9:57 pm  

Thanks!! This was the easiest hack yet. Very easy to understand and best of all - it works!!


   
Reply
siruvan on May 27, 2009, 11:39 pm  

could you please somebody who tells that it’s working give a remedy for my prop.. please…

following is my error massage that i got when i attempt to save after editing as revealed above.

“Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The element type “b:if” must be terminated by the matching end-tag ”


   
Reply
wdv0pc on May 30, 2009, 1:49 am  

92ce003301a5d9d4356d7fffc81dd3b1 7045-ac9f967fb18de114ce192e17b7cf78d8


   
Reply
Caleb Spivak on Jun 1, 2009, 6:00 am  

Hey-

These do not exist in my template:
Post-header-line-1 or

Any suggestions as to where the HTML could instead go?

Thanks!


   
Reply
Dee on Jun 2, 2009, 7:10 pm  

Ooh thanks for this.


   
Reply
kid on Jun 3, 2009, 5:29 am  

Hi! I wanted to know how I can delete the ‘Read More’ on few posts that I posted before? I read the instructions about finding the thingy but I couldn’t find any of my posts but there is still ‘Read more’ on the posts.


   
Reply
Another Blogger on Jun 9, 2009, 9:51 pm  

Not works for me :(( Please help!


   
Reply
Cord Blood on Jun 10, 2009, 12:22 am  

Great tool, will add to my mounting blog tool kit. Thanxz


   
Reply
sad.rocko on Jun 12, 2009, 5:22 am  

Same question as Oksana on Mar 24, 2009, 8:08 am

“Just following up on my previous question, is it possible to tag “Read more” onto the end of the sentence? For instance:

Text text text text Text text text textText text text textText text text text [Click here to read more...]”

…or just to make the space between the end of the post and the Read More…, smaller ?

It looks really bad with two blank lines between them.

Tkx in advance


   
Reply
ash net on Jun 13, 2009, 9:39 am  

very valuable knowledge for me .thanks


   
Reply
Cherie on Jun 15, 2009, 4:01 pm  

Thank you so much!


   
Reply
raji539 on Jun 16, 2009, 3:31 am  

thanqs for this post…

but i want to add read more button for select post only..
i mean read more link i want add for selected posts only ….
pls help i struggle for this for long time…..

This is my blog
http://funevil.blogspot.com/


   
Reply
raji539 on Jun 16, 2009, 3:38 am  

but i want to add read more button for select post only..
pls help i struggle for this for long time…..

This is my blog
http://funevil.blogspot.com/

For some posts, you might not want to use this feature at all. If that’s the case, just delete the and tags from within your new post text area.

i follow this step but read more shows in every post


   
Reply
Assault on Jun 17, 2009, 12:55 am  

thanks worked perfectly on ma blog


   
Reply
Assassin (http://www.krazzy4hacks.blogspot.com) on Jun 17, 2009, 1:00 am  

thanks works fine


   
Reply
emnaz.blogspot.com on Jun 19, 2009, 7:19 pm  

Thank’s for this tutorial.


   
Reply
shiva bandaru on Jun 21, 2009, 1:26 am  

Thanks . Easy to understand.


   
Reply
Guisim on Jun 21, 2009, 12:17 pm  

Thanks for sharing this !

It was easy, thanks to your instructions.


   
Reply
Anna on Jun 23, 2009, 9:59 am  

Hey!
I’d love to get this to work. I got the code into my HTML fine… now the “Read more!” shows up and the end of every post.

I can’t get the shortening to work though. When I put:
Beginning of my post rest of my post.
it doesn’t shorten the post or create the jump.

Any idea why this might be happening?

Thanks!!


   
Reply
freeazy on Jun 25, 2009, 2:19 am  

thanks for sharing..


   
Reply
Mohamed Shafiu on Jun 26, 2009, 8:14 pm  

nice it works, may allah bless u and grant u good health.

mohamedshafiu.blogspot.com


   
Reply
Max Payne on Jun 30, 2009, 10:12 pm  

I want to use a image in place of “Read More..” text;
is there any way to do so? Please help me.Thank U.


   
Reply
Max Payne on Jun 30, 2009, 10:17 pm  

Sorry I done it.


   
Reply
wahid on Jul 1, 2009, 4:52 am  

it is very useful, thank u so much..


« Older Comments


Leave a Comment

You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>