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:
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:
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:
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:
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:
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.
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.
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!
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,blogger hacks,blogger read more,Expandable Posts Link
Blogger Sponsors
Make Money
Our recommended money makers for your blog. Easy to setup and free.
- Add a Cool Slideshow of Picasa Photos to Your Blog
- Top 5 Free Blog Header Image Websites
- How to Display More Targeted AdSense Ads on Your Blog
- How To Add The Blogger "Read More" Expandable Posts Link
- How to Build Successful Affiliate Niche Web Sites
- How to Install a Blogger XML Template
- Learn How to Become a Six Figure Blogger With Darren Rowse
- How to Create a "What's Next" Post Footer Section
- Recent Blogger Update Breaks Several Templates
- Make Your Own Cool Web 2.0 Blog Buttons
- Mashable’s “70 Fresh & Modern Blogger Templates” List
- Google Friend Connect - New Social Network
- Free Blogger Training Videos
- “What Blog Template Should I Make Next?” Contest Results
- Add a Cool Slideshow of Picasa Photos to Your Blog
- eBlog Templates Gets a Small Makeover
- A Quick Solution to Protect Your Blog From Spam Harvesters
- Free $25 for Signing Up with Revolution Money Exchange
- “What Blog Template Should I Make Next?” Contest Finalists
- Get a Sneek Peek Into Blogger’s Latest Features
- tacojohn: "@Zach,..." How To Add The Blogger “Read More” Expandable Posts Link (72 comments)
- Benjamin Cordes: "After a bit of research, I’m fairly certain that it’s..." iTheme (15 comments)
- vandrix: "Hii David, I have Andreas02 but its (.txt) not (.xml) files. I use the..." Andreas02 (4 comments)
- Parinita: "Hey! I *loved* the template. I’m already using it for my blog...." Pinky Girlz (2 comments)
- Rashid: "love the template so much. But now d icon next2 d date of each entries has..." Grungy (5 comments)
- Stefen: "Cool, thanks David. I saw from its template code that we could also..." Daya Earth (14 comments)
- Tammy: "I’m wondering since I’m new to this, do I need to change..." Ads Theme (272 comments)
- Cynthia Blue: "I installed ID and am..." Super Charge Your Blogger Comments With Intense Debate (13 comments)
- Eric Prince: "Hi guys, I dropped you a line telling you this is one fantastic..." Ads Theme (272 comments)
- fas: "I dont know what the issue is, is it a blogger issue or the template issue...." Ads Theme (272 comments)
Sponsors
Bookmark
72 Responses to “How To Add The Blogger “Read More” Expandable Posts Link”
3:48 am on February 16th, 2008 (subscribed to comments)
Thank you.
explain very beautiful.
10:11 am on February 18th, 2008 (subscribed to comments)
Thank you so much! I was looking for this since ages; hopefully this will speed up the loading of my blog.
10:25 am on February 18th, 2008 (subscribed to comments)
I meant this:
”
.fullpost{display:inline;}
.fullpost{display:none;}
“
10:29 am on February 18th, 2008 (subscribed to comments)
Hey this is not working! Please look at this text:
http://ashuboss99.googlepages.com/Code.doc
10:45 am on February 18th, 2008 (subscribed to comments)
I worked it out….
sorry for the garbage comments
6:14 am on February 19th, 2008 (subscribed to comments)
Thanx for the guide. Does it work with WP Premium Blogger template? I cannot seam to get it right anyone with the working hack on this template?
7:14 am on February 19th, 2008 (subscribed to comments)
one more time
For WP Premium Red Blogger template: the first code snippet should actually be pasted under:
div class=’post-header-line-1′/>
div class=’post-body entry-content’>
and not:
div class=’post-header-line-1′/>
div class=’post-body’>
It helped me, hope it helps others… cheers!
2:00 pm on February 19th, 2008 (subscribed to comments)
Any working sample?
thank you.
4:30 pm on February 19th, 2008 (subscribed to comments)
@Fernando: check out my blog. Check the code.
9:30 am on February 20th, 2008 (subscribed to comments)
doesn’t seem to work with internet explorer. i dont know if this is a blogger feature or a script mod problem.
11:07 pm on February 21st, 2008 (subscribed to comments)
Great hack and very nicely explained,David.
I have implemented it on my website,www.footyreview.blogspot.com .
Can you please tell us how to best integrate Intense Debate with our existing templates? Itried it on my test blog but had problems doing so.
Also, do give us more hacks and trcks you know of.
Finally, a very good website and some of your temltes are just superb.
8:49 am on February 23rd, 2008 (subscribed to comments)
@Faizan, thanks for your feedback and I’m glad you were able to add the “read more” link with ease. The Intense Debate add-on is a little more tricky so I’m glad you tested it on your test blog first. I’m not sure what else I can do to help you since the article I wrote is pretty clear (or so I thought). More tips and hacks are on their way. If you’ve got any recommendations, please let me know.
3:15 am on February 24th, 2008 (subscribed to comments)
Hi ,
I Use Minyx Template From This Site , But I Search The Tag You Say , And Dont Find Any Thing .
Please Tell Me Where In Minyx Template I Can Add This Code .
Thanks .
4:32 pm on February 24th, 2008 (subscribed to comments)
3:42 am on February 25th, 2008 (subscribed to comments)
@Danial, the data:post.body tag is actually on line 805 in the template code. Make sure you check the “Expand Widget Templates” box in the “Edit HTML” section of Blogger before you try and search for the tag.
3:58 am on February 25th, 2008 (subscribed to comments)
WoW , Thanks , It Works , Thank You Very Much .
4:06 am on February 25th, 2008 (subscribed to comments)
@Taylor, are you using a Classic Blogger template or the new xml Blogger? It only works with the new xml Blogger templates.
4:30 am on March 5th, 2008 (subscribed to comments)
this method doesn’t work for older posts.can u tell me another hack work for the old posts
5:16 pm on March 12th, 2008 (subscribed to comments)
How can we use in out posts which are included span tag.
Is it possible to change span tag with another tag.
It mixed up with other span tags
10:33 pm on March 13th, 2008 (subscribed to comments)
Dude, this doesn’t work for my blogger template Minima Black. I’ve tried it a dozen times that it wracked my brains.
4:52 am on March 18th, 2008 (subscribed to comments)
thank you very much !!!
11:26 pm on March 18th, 2008 (subscribed to comments)
this is a great hack. thank you for sharing.
3:10 am on March 19th, 2008 (subscribed to comments)
Thanks for this nice hack….
I loved doing it here…
http://e-spice.blogspot.com
10:30 am on March 20th, 2008 (subscribed to comments)
can’t work at WP-polaroid template. Ca you explained what’s wrong with this template?
11:48 pm on March 20th, 2008 (subscribed to comments)
radith, I’m not sure why it’s not working for you. Each template is different so I recommend trying to get it to work in a default blogger template first. Then you will know the ins and outs and can try it again in the polaroid template.
6:59 am on March 24th, 2008 (subscribed to comments)
i want to thank mirza and not David for i almost mess my template
3:58 pm on March 25th, 2008 (subscribed to comments)
I can’t get this working… When i use the
code the article just look like
lalala article lalala
lalala hidden article content.
i must doing something wrong with something so simple
4:08 pm on March 25th, 2008 (subscribed to comments)
Here the code doesn’t show up. At my blog you just see the code…
3:36 am on March 26th, 2008 (subscribed to comments)
This works for my new posts and instructions were easy to follow, but now i have “read more” on all my old posts and there is no on their html pages for me to delete. How can i amend the old posts? I went through the instructions again a few times but still get the same result.
Thanks.
6:48 am on March 26th, 2008 (subscribed to comments)
Kate, did you go back to each old post and update them? It’s a painful process if you’ve got lots of posts. You’ll need to basically go through each post and break apart the text with the
<span class=”fullpost”>tag. If you look at Step #3 again that’s basically what you need to do. Hope that makes sense.7:29 am on March 26th, 2008 (subscribed to comments)
Hi, i had tried this on three different posts and it is not working - any ideas? Could it be a placement issue? Thanks.
12:52 am on March 29th, 2008 (subscribed to comments)
Hi David,
Unfortunately I could not make this work by simply adding the line of code to the old posts (not through lack of trying) so have decided to repost all old posts that require the split which works fine now.
With all old posts that do NOT require the Read More link at the end (i.e. short posts) I have been including this line of code at the end which seems to delete it - if anyone else want to do the same!
Thanks.
12:56 am on March 29th, 2008 (subscribed to comments)
Sorry here is the code again, didn’t show the first time.
10:17 am on April 1st, 2008 (subscribed to comments)
The posting was upfront and easy to follow. It worked out well for me, thanks a ton for this useful post.
12:33 am on April 2nd, 2008 (subscribed to comments)
Read me.. works fine. However, because the template has been update I get “read me..” at the end of every post regardless of whether the “fullpost” is present or not.
Is there a way of only having the “read me..” present where needed?
Thanks
1:09 pm on April 4th, 2008 (subscribed to comments)
David:
So that the code would show, I’ve taken out the carrots here. But this (minus those carrots) is my code in the ad theme template. As you can see, it has the “post-header-line-1′” line but not the “post-hearder-line’” line. I tried to follow your instructions. But the code did not work. Perhaps I’m placing the code in the wrong place???
/span
div class=’post-header-line-1′/
p>
p class=’post-footer-line post-footer-line-3′/
/div
1:38 pm on April 4th, 2008 (subscribed to comments)
Hey David:
I hope you don’t get tired of hearing from me. : )
For the Ad Theme template, I have found the code at the link below works out. If I’m out of line by providing this particular link, please feel free to delete my comment. : ) I just wanted to pass along what worked for this particular template.
http://hackosphere.blogspot.com/2006/11/selective-expandable-posts.html
1:13 am on April 6th, 2008 (subscribed to comments)
This code seems to show the read more in every post although we don’t want.
If the pageType != item page then the Read more is displayed. I wonder whether there is a way to display only the ones we wanna show the Read more (the long post i mean).
Thanks
6:00 am on April 7th, 2008 (subscribed to comments)
ijajaja, You’d have to go back and update all your old blogger posts if you want it to work for those. Otherwise just remove the
<span class=”fullpost”>each time you type a new post and the “read more” link shouldn’t appear.12:50 am on April 8th, 2008 (subscribed to comments)
Hi there thank you so much I have been trying to do this for ages, yet another little piece of customisation for blogger!
11:07 am on April 8th, 2008 (subscribed to comments)
Thanks for the great instructions. My only problem is I use formatting in my posts that there are several “” in the post. Can I still use this hack?
11:09 am on April 8th, 2008 (subscribed to comments)
That should have been in the quotes in my above comment if I’d been thinking was /span.
4:46 am on April 9th, 2008 (subscribed to comments)
Jeremy, yes you should still be able to use the hack. You should go through all your old posts and add the “span” tags if you want it to work across your entire blog. I’m not sure why you’re seeing double quotes though.
5:09 am on April 16th, 2008 (subscribed to comments)
hello.. i have been using your adstheme blogger templates.. but cant implement the codes provided.. i’m getting the error that b:if tags must be ended with matching end tag.. but i did exactly what you have posted..
any help?
3:38 pm on April 16th, 2008 (subscribed to comments)
this is very interesting!
i was need this long time ago
but important question
i am using windows live writer to publish my posts into my blogs
how it can works?
please need quickly answer
9:14 am on April 17th, 2008 (subscribed to comments)
@Jaxter, not sure how it would work with Windows Live writer. Did you already try adding it to your Blogger template per the article?
9:16 am on April 17th, 2008 (subscribed to comments)
@hnhuty, you must have deleted one of the tags by accident during the process (or left one out). Hopefully you have a backup and you can go back and try it again. Make sure to check the “expand widget templates” checkbox on the edit html page before trying to edit the template code.
3:44 pm on April 17th, 2008 (subscribed to comments)
nope i will do your useful steps and tell you what happened
4:59 pm on April 17th, 2008 (subscribed to comments)
Wow it work very nice!!
but just need to put
manually in Windows Live Writer.
thanks a lots
willing to see more impressive hack from this gorgeous blog
5:21 pm on April 18th, 2008 (subscribed to comments)
i just wanted to add this hack to my other blog
but i always receive this 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 "div" must be terminated by the matching end-tag "
what i should do? even if i want to add another such this things
9:21 am on April 20th, 2008 (subscribed to comments)
Hi,
I’m using “Sempoi-Blogger-template :
http://www.ourblogtemplates.com/2007/07/blogger-template-sempoi.html
I didn’t find the 2 codes :
post-header-line-1
Can you help me please
How can I do Please ?
I’m very interessting by this “read more” expandable link.
Thanks for your answer !
9:42 am on April 20th, 2008 (subscribed to comments)
@Noemie-
Make sure you check the “expand widget templates” checkbox on the edit html page before looking for the code. If you still can’t find it then the template you’re currently using doesn’t have it but it should have at least one of them.
11:16 am on April 20th, 2008 (subscribed to comments)
Hi David,
Merciiiiiiiiiii
It works ! Thank You very Much
11:28 am on April 20th, 2008 (subscribed to comments)
Oooooooops in all my old post I can’t delete the link “read more” cause I don’t have
and in the html of the post …
Stange No ???
11:53 am on April 20th, 2008 (subscribed to comments)
Hi David,
It’s me again
Wich code use Kate (comment n°33) Cause all my old post finish with “read more” !
Impossible to find the code and delete it
If you can help again, it will be great
10:13 am on April 21st, 2008 (subscribed to comments)
Hi David,
This hack really works. Thanks for this. But when used together with Chitika RPU, the “Read more…” text appears after the RPU further down and this will certainly mislead the reader. Is there a way to put the “Read more…” text above the Chitika RPU? There is no problem with AdSense ads between posts. Check this:
http://bicol-phlippines.blogspot.com/
10:12 pm on April 21st, 2008 (subscribed to comments)
@andygimpaya, sounds like you need to move the Chitika RPU code below the closing body div tags. I’m not sure the exact location so just try moving it down and saving it. Make sure to backup your template first and also click the “expand widget templates” checkbox to show all the code.
10:26 pm on April 21st, 2008 (subscribed to comments)
@Noemie, the “read more” links won’t show up in your actual post edit screen. Making the read more change is retro active and only affects your new posts. If you want to get the old ones to work properly, you’ll need to go back into each old post and update them.
10:50 pm on April 25th, 2008 (subscribed to comments)
My posts are not showing.
4:54 am on April 27th, 2008 (subscribed to comments)
yes! i did it!!! took me 4 hrs but i did it
mayjah tnx!
10:58 am on May 1st, 2008 (subscribed to comments)
Great tips!
9:28 am on May 5th, 2008 (subscribed to comments)
can you look at my code and tell me why it doesn’t give an option for comments? Http://hockberry.com
11:57 am on May 5th, 2008 (subscribed to comments)
I LOVE U ! THANK YOU !
4:15 pm on May 9th, 2008 (subscribed to comments)
Thanks! This really works, the best tutorial ever. Thanx!
1:54 pm on May 11th, 2008 (subscribed to comments)
Hi David,
This is wonderful wonderful wonderful, very clearly written and easy to do.
However, above you said “Making the read more change is retro active and only affects your new posts.” This wasn’t my experience.
I have the same problem as Kate (#29), ijajaja (#38), and Noemie (#54, 55). Namely, as soon as I implemented the feature, all of my old posts also had the change, i.e., all of them had “Read More…” at the bottom. When I went back to edit them out, there was nothing to edit out: there was no span code in the html of the posts.
In addition, when I make new posts and delete the span class code from the post’s HTML, I still have the “Read More…” link at the bottom.
In summary, every post has “Read more…” at the bottom, even when I take the code out of the posts’ html.
How can I fix this?
10:03 am on May 12th, 2008 (subscribed to comments)
I am also having a problem with the read more link showing up on all my old posts. How do we get the read more link to not show up when it’s just a short post?
Thanks.
8:15 am on May 14th, 2008 (subscribed to comments)
@Zach & others, I’m not sure of the solution at this time. I will have to mess around with the code and figure out a solution for everyone. Thanks.
8:22 am on May 14th, 2008 (subscribed to comments)
AWESOME!!! works really good 4 me! thanks!
7:52 pm on May 14th, 2008 (subscribed to comments)
That’s cuz the code tests for whether the page is “item page” or “main page”, to decide if it should display “Read More”. The logic is, if it’s an ITEM page, it will not be shown.
It does not test whether the “fullpost” is present to decide whether to display “Read more”.
12:39 am on May 16th, 2008 (subscribed to comments)
it’s really a practical and workable hack for me, thanks^^
i used another hack for my blog and it was work fine.
but recently, i modified my template due to some reasons, and the old hack is not workable for my new template anymore.
that’s the reason i use the cool hack here^^
okay, here comes a big problem…
i have been wrote many articles for my blog, all of them were taged as “span id=’fullpost’”, but not “span class=’fullpost’”…
it must take a very long time for me to modify all the articles..
so.. is there any easy way for me to modfy the code in this hack for using tag “id=’fullpost’”??
thanks a lot!!
7:29 am on May 16th, 2008 (subscribed to comments)
@tacojohn, all you need to do is change the . (period) in the style code to a # (number sign). Hopefully that makes sense. That way you won’t need to change all of your old posts.
8:02 am on May 17th, 2008 (subscribed to comments)
@Zach,
thanks for your reply, it works well now^^
Leave a Comment