Expandable Posts

>> Browse templatesMoney tips66 comments

What is it?
The "Read more..." option (aka "expandable posts") allows you to show a shorter version of a longer post, or a summarized version, in the main page of the blog. The readers can then expand the post to its longer full version in the post-page by clicking the "Read more..." button. This option is great if you have posts that are too long to be shown on the main page.

For this code, the "Read more..." link will only show up for the posts that have been selected to show the link, which is a good thing. There are other versions of the code that won't function properly: the "Read more..." link shows up even if you don't want it to show up.

To get all the templates with this Expandable Posts function, make sure the templates are labeled with Expandable posts.

How to use it?
Most of the new templates here have been added with the 'Expandable Posts' code. You pretty much don't have to do anything much. The only thing you need to do is to separate each post you publish into two parts:
  1. The summary part that will show up both in the shorter version and the full version.
  2. The other part that shows up only in the full version in its post-page.
To do this, you first have to click the 'Edit Html' button, and add the following code (in red) into your post editor and separate your post according to the example below. You can continue writing in the 'Compose' mode but the fullpost-separator tags won't show up.

Type your summary here
<span id="fullpost">
Type rest of the post here
</span>

This is how it looks in the Post Editor (with the 'Edit Html' mode):


How to make it easier?
You can make it easier not to type the fullpost-separator tags everytime you post. To do this, go to the Settings --> Formatting tab. At the bottom is the Post Template form. Type in only the code in red above (the fullpost-separator tags) into the Post Template form.

You're done. The fullpost-separator tags will be automatically inserted in the Post Editor everytime you want to post. You can see the tags in the 'Edit HTML' mode to see where to place your posts accordingly.

How to change the "Read more..." text?
You can easily change the text to whatever you want, e.g. "Continue reading...", "[...]", and so on. Just go to the Layout --> Edit HTML tab and click the Expand Widget Templates box. Search for the "read more..." string (the red line below) in the XML code and simply change it to whatever you want. See the example below:


What if I don't want the "Read more..." code?
Delete it. Go to the Edit HTML tab and click the Expand Widget Templates box. Search for the "data:post.body" string (the red line below) in the XML code and delete the code in red only.



<div class='post-body' expr:id='&quot;post-&quot; data:post.id'>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>#fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>#fullpost{display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<a expr:href='data:post.url'>Read more...</a>
</span>
<script type='text/javascript'>
checkFull(&quot;post-&quot; &quot;<data:post.id/>&quot;);
</script>
</b:if>

<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

<div class='post-footer'>

Credit: The 'Expandable Posts' code by Hackosphere.

66 comments:

Silvi November 08, 2008 10:51 pm  
This comment has been removed by the author.
AMbox November 09, 2008 12:42 am  

Hello. I uploaded your template in my blog. Well, it's nice and I read your article about how to has "READ MORE" in the first page.

And then I created new post in my blog (and upload image in this post too.). When I published my new post, it has "Read More" (That's good.) but many images that I uploaded and wanted to let those images show in my full post only (not in the first page.). Those images are shown in the first page of my blog.

What should I do? If you can solve this, I'll be very grateful.

Thanks.

AMbox November 09, 2008 11:54 pm  

Oh! I can solve my problem. Just delete "/span".

Kae November 11, 2008 10:38 pm  

I have just added this feature to my blog and think it's fantastic. The ability to select the text that appears on the main page greatly reduces clutter.

I would however like more control over how the link appears. How can I adjust the font, size, colour and padding of the 'Read more..." link?

Your help would be very much appreciated.

icha blog November 30, 2008 8:56 am  

cool....
i want to use for my blog
thanks

admin December 16, 2008 7:48 am  

Nice tips i use this tips

see my blog http://remixalbum.blogspot.com/

Thanks friend

Μαρια January 15, 2009 5:37 am  

Wow!!!The best template in the net! Thank you! Thank you so much! I've customized it with my own header and colours and looks fab. I love the versatility of it too! You can almost create any type of look with it! I just love it! You are simply the best!!!!

CONTO DO ESPELHO February 07, 2009 1:52 pm  

Thanks, its very cool in my web blog, thaks for the many possibility of edit by mylsel.

alladin165 February 19, 2009 3:08 am  

I like this blog, because I'm able to improve my blog, although I'm still a newbie...

Thank's so much..

Bob's Head Revisited March 03, 2009 5:42 am  

I have this template and am enjoying customizing it. I have the "Read more" button set to show only some of my posts, but what I want is to have expandable posts with expandable images. By that I mean I want my home page to show the posts as thumbnail images and the first para, but the "Read more" link to take you to the full story with the full-size image.
They do it on this site:
http://www.thedailymash.co.uk/

Is it possible in Blogger?
Bob

Bhairavi Andrea March 09, 2009 8:04 am  

I uploaded your template (again) and for some reason, this doesn't work for me. I can still see the fullpost text and there is no link that says "continue here" or "read more" on my blog. Is there something I'm missing? I reloaded this template to see if there is code that I put in incorrectly and it is still not loading. I really like this read more feature. Please help...

Dr. K. P. Kamboj March 11, 2009 3:28 am  

I used your template COLUMNUS at www.rcmisthebest.blogspot.com

I had prob with read more, since I wanted to show ads for selected posts only.

Read more problem was solved but can you help me in knowing how to show individual ads on posta and without going out of google's terms.

Ads on templates are good but we do not have much control like wordpress in blogger

Ryan Green March 14, 2009 10:42 am  

Thank you so much for your template! I have spent the last week trying to add on hacks to my standard template and it still wasn't right. This template gave me everything I need and it's easy to edit.

Sarto Musik March 26, 2009 10:17 am  

Hello...I unploud your template in my blog. Thank You Very Much

Miriam April 15, 2009 1:00 pm  

I uploaded the PALM template a while ago, especially for the Read more feature... very good template, easy to tweak for complete HTML dummies like me :-)

Thanks a lot, also for the tutorials!

Alok April 25, 2009 10:24 pm  

Hi, Thank you for this nice tips. you can view my blog at http://alok-mistry.blogspot.com

jerry May 02, 2009 7:01 am  

Nice
Thank u to made it
i m a newbie
Visti My blog n please give me a suggestion

www.mycelebes.blogspot.com

Adi Riswan June 05, 2009 1:00 pm  

Hi i've used two of your templates,.. and yes it looks greats. thanks guys.. keep good works

bu beng cu June 06, 2009 9:11 pm  

thank's

Aj_Natz June 18, 2009 1:40 am  

thanks,
feature 'read more' has never been this easy !!!

ladykristinn July 02, 2009 4:08 am  

Thanks so much for this. I tried to use the instructions in other sites and it didn't work. Then I tried this and it worked. Thanks!!!

The Pit Crew August 02, 2009 1:25 pm  

Great Template I enjoy it alot and it's made my site/one thing on expandable posts I put in both codes and said i didnt have openin code
and tried another way and it said==closing tags have no matching opening tag
HELP what foolish thing did i do wrong

the Brooding Bachelor August 11, 2009 10:00 pm  

I am very grateful for your template. I love it so much and have used it on my site. I tweaked it a little bit to go with my personal style. Not until two weeks, I didn't know anything about HTML and CSS. Your template was the easiest to use and I'm proud that I have taken FULL advantage of its capabilities. I'm sure you'll be proud. :)

Check my site at;

http://www.broodingbachelor.com

LarkAndRaven.com September 26, 2009 9:13 am  

Awesome! Thank you!
http://www.larkandraven.com

mithu October 29, 2009 3:42 am  

This is a great utility and has given the blogger blogs more professional look and feel. I,m already using it with one of the professional templates I downloaded from your site. You can see it in action at my Make Money Online site - www.MakeMoneyOnline24Hrs.com.

Bia Estilosa October 30, 2009 5:32 am  

Bem, amei o modelo, mais infelizmente não consigo arrumálo.
Está com 2 colunas, as imagens não carregam, aff é muito desanimador, por favor me ajude!
Veja como fica: biaestilosabolsas.blogspot.com

the simpsons November 20, 2009 2:01 pm  

please how to add a picture in the body please i need your help and thanx for the theme its so wonderful i love it

Ian F. December 02, 2009 2:13 am  

The expandable posts functionality doesn't seem to work correctly in Safari (for Windows) and Chrome. I have one post that shows in full in those browsers but shows only the summary in IE and Firefox. The only different thing about that post compared to others that work is that it's the only one with 2 embedded images but the summary doesn't include either of the images so I've no idea what the issue is. What's more, it shows the "Read More" link at the end of the full post!

Gina December 18, 2009 9:48 am  

Could you possibly make the "read more" feature compatible with the Blogger Jump Break? I've tried using their code to make it work with your templates, but have not had any success doing it that way.

Gina December 19, 2009 4:14 pm  

I'm having somewhat the same problem as the previous person, i.e., in Safari it works on some posts but not on others. It's fine in Firefox though.

And another problem I'm having with having it itself automatically is that if I make the slightest edit to the post afterwards, the thing goes crazy and inserts itself everywhere. So I've removed it from the Formatting "post template" box and I just put it in by hand where I want it.

No big deal, it's a great feature for a great template: I just thought you'd like to know about these bugs.

Mark Laurence January 03, 2010 5:12 am  
This comment has been removed by the author.
Mark Laurence January 03, 2010 5:12 am  

Hi dear there. Can you help me out please. I cant seem to make the expandable post work on my template, by the way I used your Perfection template. I did all what you instructed above but still cant make it work.

JKCatering January 05, 2010 1:30 am  

I uploaded your template proffessional and it is perfect . But i CANNOT GET the read more option to work. It keeps putting it at the bottom of the page without haveing to click on anything an i have tried doing what you said but it is wrong. Why cant i keep my original read more code for this or use page break in tool bar? Can you help please as it looks like my posts end way before they do. www.moodfoodblog.com

Michelle January 19, 2010 6:37 am  

This si the second of your templates I have used... One question how do I get a picture to show behind my Blog title. Like in the example I used? When I uploaded the picture went away....

what do you all think?
http://coldtoesinmi.blogspot.com

Manjunath January 25, 2010 9:25 am  

really super idea

Gordon Wales February 20, 2010 11:44 am  

Nope, 'more' just doesn't work in 'Shush'. I have spend hours going carefully through every bit of advice given as to how to make it happen, but it doesn't. I can get 'more' at the end of the first, shorter section, but no way does the second section come up when I click on it. I simply get a repeat of the shorter section with the very end of my post thrown in for good measure. I like the template too much to leave it, and so I will struggle on. If someone can help me fix the problem I would be most grateful.Thank you.

Gordon Wales February 21, 2010 5:56 pm  

I must say that though I have spent hours during the last three days trying to tweak 'Shush' to allow 'read more' it just does not work properly, only repeating the shorter section, going nowhere.
I am sorry about that because it is a great template. I downloaded a template from Blogger Blog Templates (The Essayist) and it worked perfectly, right off the bat!I just clicked the torn page and presto! it worked. So, what could be wrong in 'Shush'? It is disappointing for me because 'Shush' is structured perfectly for my writing Blog and was the answer I had been looking for. No other site offers anything near it. It is really tops and I'll keep using it even though the posts are very long. Ah Well! You have really great templates and oodles of great advice articles which, I am fully aware, are generously offered free; I am in no ways knocking your work. All I ask is why does 'Shush' not stand up to the other excellent templates you offer? Sincerely

Faizy June 16, 2010 12:51 pm  

That was a great post with precise explanation. It did helped me a lot to learn & improve my blogging skills.

However, I was looking for a template something like this (http://blog.branders.com/). A short summary on the homepage with a large size thumbnail of an image. But when you expand the post you see the original size image (Not a smaller one on the homepage) with whole of the content to read thereof.

What are these templates called as? DO you have one for blogger? Or how can we do this to our existing blog?

Thanks for your answer. I'll be looking ahead :)

awang.n6600 July 17, 2010 8:53 pm  

hey, why i cant have readmore ?

i've try to give span id="fullpost" but no luck...

when i expand the template, i dont found any data:postBody

Edgar Cantago February 26, 2011 9:21 pm  

Hi! Thanks for this very nice template. I just wonder why i can't see the read more text on my blog post. But the jump break is working i just cant see the read more. Hope you can help me solve this...

Gramjen March 23, 2011 12:33 pm  

These are some excellent looking templates for blogs. Thanks for posting the mini tutorial on how to get these up and running. There are so many options, they could be used for practically any business such as promotional pens or evening wear, nice job putting together such a versatile collection.

IncomeDiva July 04, 2011 2:12 am  

hi,

thank you for such wonderful templates, the only snag i have is that the read more is not showing and i have done everything i know, pls help

Francisco September 06, 2011 8:56 am  

I have just added this feature to my blog and think it's fantastic. However I can not get it show on old posts, even though I insert the tags. Is this a known behaviour or am I doing something wrong. Thanks for your great templates.

Poetra Bethan April 29, 2012 6:44 am  

ok thnks bos , i like it Happy blogging huhuhuhu....

santa September 29, 2012 5:28 am  

The Blogger allows its users to choose from various templates available. The New Design templates known as Dynamic views were introduced recently and these allow the users to change between different dynamic views available. Thanks.
Regards,
argan oil grey hair

kinger145 November 22, 2012 5:56 pm  

Your mode of describing all in this piece of writing is truly fastidious, all can without difficulty know it, Thanks a lot.
bathmate review
Fibroids Miracle
bath mate
the diet solution
Fatty Liver Diet Guide

kinger145 January 26, 2013 11:56 pm  

Hello all, here every one is sharing such familiarity, thus it's pleasant to read this weblog, and I used to visit this web site everyday.
bathmate review
bathmate coupon

Hoc Oc March 02, 2013 1:55 am  

cảm ơn bạn đã hướng dẫn đúng nội dung mình cần tim đc rồi truyen sex | truyen sex | truyen nguoi lon | truyen sex moi | phim sex | phim sex | anh sex | phim sex

Văn Hoàn March 12, 2013 3:05 am  


And then I created new post in my blog
truyen sex | phim sex | truyen nguoi lon | truyen sex moi | phim sex moi | phim | xem phim | phim sex

Alex Smith March 18, 2013 11:12 pm  

I like the template too much to leave it, and so I will struggle on. If someone can help me fix the problem I would be most grateful.Thank you.
Valencia High School Senior Photography

Sohbet Odalari April 13, 2013 12:43 pm  

Very good and interesting site with very good look and perfect information I like it chat

Alex Smith April 20, 2013 2:08 am  

Thanks for posting the mini tutorial on how to get these up and running. There are so many options!
Santa Clarita Senior Photography

onur April 21, 2013 11:33 am  

Very good and interesting site with very good look and perfect information I like it

sohbet
chat
sohbet odaları
sohbet odalari
mirc
Liseli Kizlar
sohbet
chat
mirc
sohbet
chat
sohbet odaları
sohbet odaları
sohbet
sohbet
Chat
sohbet
sohbet
Chat
Porno
Chat
Chat
Sohbet
Mynet Chat
sohbet
Mynet sohbet
Mynet
sohbet
Mynet sohbet
Chat
sohbet
Mynet sohbet
Mynet Chat
Mynet sohbet
Mynet Chat
sohbet
Mynet sohbet
sohbet
sohbet
sohbet
Chat
Chat
Chat
sohbet
cinsel mynet sohbet
cinsel mynet
cinsel sohbet
Very Good

uğur Aksu April 29, 2013 3:31 pm  

Very informative and trustworthy blog. Please keep updating with great posts like this one.
cinsel sohbet
I have booked marked your site and am about to email it to a few friends of mine that I know would enjoy reading
çet sohbet
Thanks for your explanation was very good effort, while health information in your hand
sohbetci

They look very nice, wonderful =)

chat odaları -
sohbet net -
yazgülü sohbet -
sevda sohbet -
adana sohbet -
kerizim -
bol sohbet -
yazgülü -
sohbet et -
yonja -
cinsel chat
cinsellik sohbet

sohbet odalari May 04, 2013 4:33 pm  

chat
sohbet
sohbet odaları
chat sohbet
mynet sohbet

Orhan Talip Söylemez May 14, 2013 1:27 am  

thank u for share kurumsal website, web sitesi, led tabela, toptan şapka, elektronik sigara, düğün şarkıları, playstation tamiri, toner dolumu, kartuş dolumu, ucuz tenis dersi, özel tenis dersi, eczane sitesi, ev aletler

sibel cakici May 15, 2013 9:02 am  

Thanks for sharing this post. Keep updating more and more.. sohbet chat chat sohbet sohbet odaları türk chat mynet sohbet film izle film izle chat güncel haberler chat

Mustafa kuş May 27, 2013 3:47 pm  

I visit this site regularly and I love reading blogs posted here. I have this site already bookmarked in my browser. Thanks for this post. sohbet sohbet sohbet chat odaları mynet sohbet sohbet odaları chat,chat odaları,chat,sohbet odaları,sohbet,chat,chat odaları,sohbet,sohbetodaları,sohbet odası,kızlarla sohbet,kızsohbet,sohbet,sohbet odaları,chat,chat odaları,chat,chat odaları,mynet chat,mynet,mynet sohbet,sohbet,sohbet odaları,chat,chat odaları,chat,turkcafe,hollanda chat,almanya chat,belçika chat,isviçre chat,turkcafe,turkcafe sohbet,turk chat,fransa chat,Rotterdam chat,Amsterdam chat,Utrecht chat,Denhaag chat,chat odaları,






admin September 16, 2013 3:32 pm  

nice template, friend
Sepintas Lalu

Sepintas Lalu September 17, 2013 12:03 pm  

great blog. i alway like article here

Bill Gates terkaya di Amerika Nokia termurah paling bagus 100 tahun film India Anak seleb bernama unik
Mancing ikan dengan rambut Restoran paling unik sedunia Restoran terkecil di dunia Video Chavarotti

Sepintas Lalu September 18, 2013 11:59 am  

this great blog. thanks
Bayi Carissa Puteri Pacar Dinda Kanya Dewi Sekuel Avatar Albaum baru ST12 Fotografi PhotoMarathon 2013 Kartika Puspitasari

Sepintas Lalu September 24, 2013 10:19 am  

Good articles, guys. thanks.
Honda RCV1000 Iqbal Mahmud Asad Merek paling keren Perbedaan Miss World dan Miss Universe Smartphone OPPO N1 BlackBerry dijual ke Fairfax Festival perang tomat spanyol Harga Lenovo k900 Harga galaxy note 3 Harga Cross Andromeda A7 Harga Alcatel D-920 Harga Galaxy Core GT-18262 Harga Mito Fantasy A50

Mas Ugie September 27, 2013 9:50 pm  

Howdy, first I must say that the articles in this blog are very interesting to read. The second one, I must say this blog loads a lot quicker then most I would like to thank you for the efforts you have made in writing this article. I am hoping the same best work from you in the future as well. In fact your creative writing abilities has inspired me to start my own BlogEngine blog now. Really the blogging is spreading its wings rapidly. Your write up is a fine example of it. ituPoker.Com Agen Poker Online Indonesia Terpercaya | Jalan Tikus.com Download Game PC dan Android Gratis Terbaru dengan Server Lokal | Bisnis Indonesia | ituPoker.Com Agen Poker Online Indonesia Terpercaya | Jalan Tikus.com Download Game PC dan Android Gratis Terbaru dengan Server Lokal | Bisnis Indonesia || ituPoker.Com Agen Poker Online Indonesia Terpercaya | Jalan Tikus.com Download Game PC dan Android Gratis Terbaru dengan Server Lokal | Bisnis Indonesia | ituPoker.Com Agen Poker Online Indonesia Terpercaya | Jalan Tikus.com Download Game PC dan Android Gratis Terbaru dengan Server Lokal | Bisnis Indonesia

onur December 02, 2013 3:15 am  

thanks you bloggers good
sohbet
sohbet
sohbet
sohbet
sohbet
sohbet
sohbet
sohbet
Golden BallsGolden Balls Bonuses No deposition incentive gambling casino

Cetak Digital February 28, 2014 8:21 am  

I like your post. It is good to see you verbalize from the heart and clarity on this important subject can be easily observed. lulur ibu magic plus white cream masker emas masker rambut meilibahenling minyak kemiri minyak kemiri buah merah papua frutablend

Admin Tradizional March 13, 2014 7:51 am  

Nice post
Harga mobil bekas
tangga lagu indonesia terbaru
Download Blackberry Android