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. Blogger Project « potentialeight on November 14, 2010
  2. Wohl doch nicht so einfach « moments, captured forever on February 23, 2011
  3. Pilih-Pilih « Oo…Gituu?? on March 22, 2011
  4. Best 15+ Blogger Hacks Of All Time | telabela.com on May 22, 2011
  5. How To Add Automatic Read More Hack For Blogger With Thumbnails | TelaBela.com-leading information hub... on May 27, 2011

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




   
techwap on May 20, 2010, 6:38 am  

Nice thansk for this lesson 🙂


   
melaleuca malaysia on Jun 2, 2010, 12:02 am  

Doesn’t seem to work.. mayb blogger has changed its codes…


   
elena on Jun 6, 2010, 12:54 pm  

hello thank you for the link. i was able to get it to work but when i tried to center it and increase its size & change its color blogspot would not let me do it .

here is the code can you please show me where to insert the html code for center text, increase size and change color
thank you


.fullpost{display:inline;}


.fullpost{display:none;}


CLICK HERE TO SEE MORE…


   
Hashan Gayasri on Jun 16, 2010, 7:24 am  

Doesn’t

work for you people…
It worked evn in my blog which i simplified the code for mobile viewing
http://blog.contactgayasri.co.cc


   
Praveen on Jun 16, 2010, 12:58 pm  

   
cintabella on Jun 22, 2010, 8:12 pm  

your information are helpfull in my site http://casioproduk.blogspot.com/ and http://produkjasaku.blogspot.com/.thank you


   
angel888 on Jul 11, 2010, 3:14 am  

hello,

I downloaded a template with readmore link.
how can i remove readmore on my post?

thank you
http://melody-pichi-pitch.blogspot.com/


   
led on Jul 19, 2010, 2:24 pm  

thanks! its work perfect!!


   
Lucky Magazine on Jul 30, 2010, 12:29 am  

Hi thanks for the tips


   
Anh-Dung on Aug 3, 2010, 5:25 pm  

Hey Blogger has a new post editor that you can just use to get the “read more” button: Just go settings and under global settings you can change to the new editor. This will allow you to add the “read more” button when typing your posts. If you still want just go to my blog and read the post that says: “Creating a “read more” button or “after the jump” summaries.” at http://excessblogger.blogspot.com.


   
adi on Aug 7, 2010, 9:05 am  

Hello! I’m Indonesian.
thankyou. with a little editing, it works for me.


   
karim on Aug 16, 2010, 4:58 am  

thx


   
aripware on Aug 20, 2010, 11:36 am  

thanks for tutor ^^


   
aripware on Aug 20, 2010, 11:37 am  

thanks for turor ^^


   
pradeep on Aug 26, 2010, 3:37 am  

Very nice blog.
Thanks for this great Information.
I like it most.Keep it up give more latest post.


   
Women's Toga Costumes on Sep 7, 2010, 6:16 am  

Thanks for this info …


   
marales on Sep 12, 2010, 12:08 pm  

cool ! thx man


   
Mathieu on Sep 16, 2010, 6:35 am  

Thanks for the tips, but not one website I have found can help me with this and I am starting to think there is something in my template that is blocking it. I would love if you could help me out with this, I have tried at least 6 sites with no success!!

my site:
Futhark Lifehack


   
Vishal Dharamdas on Sep 17, 2010, 10:01 am  

I did exactly as you explained here!
But one issue… I realized that this cannot be applied to the old posts. Is there a way it can be done? Would really appreciate your help on this!
Thanks
Vishal


   
TStowe on Sep 23, 2010, 12:08 am  

This is the first i’ve seen and it worked perfectly on my blog


   
Vishal Dharamdas on Sep 24, 2010, 11:19 am  

Well Tsowe…i just checked out your blog. it shows the entire post and then the read more option. It’s not supposed to be that way.


   
zhael on Sep 26, 2010, 9:24 pm  

i tried it on my blogger site but it won’t work on step 1 because i cannot find the template code like
“post-header-line-1” and

i can give you the code..


   
Nasir on Sep 30, 2010, 5:11 am  

Thanks for excellent post.


   
nicquee on Oct 7, 2010, 10:35 pm  

Hi,

I have this hack installed already and I’ve been using it for a while. I didn’t noticed before though that if I have a list (ul/ol) inside the fullpost tag, it does not hide the content of the list instead it shows it right away. Appreciate your help on this.


   
nicquee on Oct 7, 2010, 10:41 pm  

By the way, it happens on google chrome. I checked in IE and everything looks fine.


   
Ja Nina on Oct 19, 2010, 12:45 am  

Brilliant! thanks a bunch


   
samuel on Oct 27, 2010, 8:56 pm  

FOLLOW THIS EASY STEPS ON THIS BLOG. IT WILL TAKE U ONLY ONE SECS THAT IS WHERE I GOT MINE http://moderngenious.blogspot.com/2010/10/how-to-add-read-more-in-blogger-easiest.html


   
Murtaza on Nov 3, 2010, 5:41 am  

thakyou so much
for free great stuff and good for blog readers log on to:- murtaza4u.blogspot.com


   
IndiaResults365 on Nov 7, 2010, 9:54 pm  

Thanks a lot it help me a lot..
2 cent for you…


   
Mohammed on Nov 15, 2010, 11:07 am  

Thank you verry much !


   
Maike on Nov 15, 2010, 12:41 pm  

Hi, thanks for the tutorial, it was very helpful!

But: There is so much space between text and “Read more” button. How can i change that??

If this was explained before I’m sorry,i wasn’t patient enough to read all 532 comments! 😉

greetings


   
Megha on Dec 6, 2010, 5:22 am  

Useful post. I have already applied your suggested tips on my blog and to my surprise I have seen every single strategy worked perfectly. Thanks buddy. Thank you so much.


   
adetruna on Dec 8, 2010, 3:34 am  

thx for nice article like this 🙂


   
MyClipta on Dec 9, 2010, 10:54 pm  

Thank you very much….


   
shuaib nadeem on Feb 7, 2011, 12:51 am  

Thanks for sharing this useful information. I dont know earlier that we can do this thing in blogs


   
Ifat on Apr 23, 2011, 2:36 pm  

I thoughh that the post will really hidden from index page, but it just displaying as “none” attribute 😀

But, it’s ok. You’ve great tutorial’s idea! 😉


   
Andrew_M_Garland on May 4, 2011, 9:55 am  

The code

and its variants worked in the past. Now, it fails in Firefox 4.

is an inline tag, intended to enclose and apply styles to text within a paragraph. According to HTML specifications, it cannot enclose a block level tag like heading, paragraph, or . Clearly, Internet Explorer and older Firefox versions did not enforce this rule. Now, Firefox terminates a when any following block level tag appears.

The solution is to use

is block level and can enclose everything which follows, including other and tags.

So, use instead of for implementing the “read more” feature, to assure your html will not break in the future as browsers become more compliant to standards.


   
Andrew_M_Garland on May 4, 2011, 10:00 am  

Here is the above comment without the problem with angle brackets dropping out.

The code
<span class=”fullpost”> … </span>
and its variants worked in the past. Now, it fails in Firefox 4.

<span> is an inline tag, intended to enclose and apply styles to text within a paragraph. According to HTML specifications, it cannot enclose a block level tag like <h3> heading, <p> paragraph, or <div>. Clearly, Internet Explorer and older Firefox versions did not enforce this rule. Now, Firefox terminates a <span> when any following block level tag appears.

The solution is to use
<div class=”fullpost”> … </div>

<div> is block level and can enclose everything which follows, including other <div> and <span> tags.

So, use <div> instead of <span> for implementing the “read more” feature, to assure your html will not break in the future as browsers become more compliant to standards.


   
Johnny R on Jun 1, 2011, 4:40 pm  

Hey, please correct the span/div problem in the post itself. No everybody read the comments to the posts, and this is really important.

Thanx.


   
Dhaval Patel on Jul 3, 2011, 10:46 pm  

I have spend two hours to find this but finally I got it at here… You just rocking gr8 understanding at here.

So hey please check my Amazing Video blog I hope you like it : World Most Amazing Videos


   
Nika on Jul 11, 2011, 11:21 pm  

This does work but it does not hide any of the pictures. Is there any way to fix this?


   
GulshanElectric on Jul 19, 2011, 2:56 am  

i have to remove this hack from my template but i can’t do that. the read more hack is hidden somewhere in the javascript codes of the template.

check it here and suggest changes.
http://www.gulshanelectric.com

thanks and regards


   
Satbir on Jul 19, 2011, 11:16 am  

Very Nice post for me and all who are searching for this one. Thanks very much brother you are genius. I added a read more Image button now and very happy. thanks again.


   
Ann Clemmons on Aug 4, 2011, 10:58 am  

Hello, Thank you for taking the time to write this article. But unfortunately, I need more help-

I have checked and rechecked my template, but the “Read more” hack is still not working. It worked for a long time, but then stopped. At first (when I checked it on edit html) it said that it needed a matching

But now, when I preview the post the “read more” hack doesn’t exist. I know there is an explanation for this, but I need an expert 🙂 to help me figure it out.

Thank you,

Ann Clemmons


   
Ann Clemmons on Aug 4, 2011, 11:05 am  

Hello, It’s Ann Clemmons again. I wrote the message at the top of my post wrong. What it says is:

Your HTML cannot be accepted: Closing tag has no matching opening tag: SPAN

Thank you again,

Ann




Leave a Comment

Putting spammy or irrelevant links in your comments will result in deletion and potental banning.