Welcome, visitor! [ Login | Sign Up ]

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



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.


,,,



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”




   
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...]


   
onlinemommy on Mar 24, 2009, 6:41 pm  

Thanks for the tutorial!


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

yes it is working & u used nice template….


   
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…


   
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


   
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


   
Gengwall on Mar 31, 2009, 5:33 am  

solis,

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


   
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.


   
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


   
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.


   
saddeea on Apr 11, 2009, 6:02 am  

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


   
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.


   
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…


   
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.


   
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.


   
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)


   
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 “/>”.


   
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


   
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.


   
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?


   
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.


   
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)


   
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.


   
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.


   
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.


   
Me on Apr 20, 2009, 9:04 pm  

Thanks, it works.


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

Thanks it Worked..


   
Ashish on Apr 21, 2009, 7:31 pm  

Gre8….its working
Thanks……..


   
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.


   
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?


   
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.


   
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!


   
naran on May 2, 2009, 1:28 am  

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


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

thanx alot david

its working


   
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


   
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.


   
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??


   
hiral on May 12, 2009, 3:23 am  

lovely description


   
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.


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

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

Thanks


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

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


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

Thanx alot, its a wonderful help.


   
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.


   
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.


   
magedology on May 25, 2009, 8:29 pm  

very nice tutorial. that helped me a log. thanx

tested in

http://gotoefl.blogspot.com


   
Joseph on May 26, 2009, 5:07 pm  

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


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


   
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 ”


   
wdv0pc on May 30, 2009, 1:49 am  

92ce003301a5d9d4356d7fffc81dd3b1 7045-ac9f967fb18de114ce192e17b7cf78d8


   
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!


   
Dee on Jun 2, 2009, 7:10 pm  

Ooh thanks for this.


   
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.


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

Not works for me :(( Please help!


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

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


   
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


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

very valuable knowledge for me .thanks


   
Cherie on Jun 15, 2009, 4:01 pm  

Thank you so much!


   
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/


   
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


   
Assault on Jun 17, 2009, 12:55 am  

thanks worked perfectly on ma blog


   

thanks works fine


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

Thank’s for this tutorial.


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

Thanks . Easy to understand.


   
Guisim on Jun 21, 2009, 12:17 pm  

Thanks for sharing this !

It was easy, thanks to your instructions.


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


   
freeazy on Jun 25, 2009, 2:19 am  

thanks for sharing..


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

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

mohamedshafiu.blogspot.com


   
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.


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

Sorry I done it.


   
wahid on Jul 1, 2009, 4:52 am  

it is very useful, thank u so much..




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>