Saturday, June 16, 2007

Blogger Hack - Expandable post summaries for professional blog design

With little bit of modifications to your Blogger Beta template you can easily implement expandable post summaries in your blog main page. Expandable posts gives very professional and elegant look to your blog. You can hide most of the detailed content from main page and display them when the page of the post is opened.

If you observer my blog, voting widgets are displayed on my post links and not in my main page. Also, most of the images in my posts are shown only in the actual post links only. Moving bandwidth intensive content to posts' pages loads your main page very fast.

Let us see the steps to be followed for modifying the template to implement this

  1. Log in to your blogger account select Layout of the blog which you want to modify
  2. Navigate through Template --> Edit HTML
  3. Take backup of your template by clicking Download Full Template. This backup will help you if you want to revert to old template
  4. Search for ]]></b:skin> in your template HTML and paste the following piece of code in between ]]></b:skin> and </head>

<!-- Style to implement "Read more on this Article" link in all the posts (Start) -->
<style>
    <b:if cond='data:blog.pageType == "item"'>
        span.fullpost {display:inline;}
    <b:else/>
        span.fullpost {display:none;}
    </b:if>
</style>
<!-- Style to implement "Read more on this Article" link in all the posts (End) -->

  1. After pasting the code, your template should look like as shown in the following image
  1. Save your template and click on select Expand Widget Templates
  2. Search for <data:post.body/> in the template HTML and paste the following piece of code after <data:post.body/>

<!-- Code to show "Read more on this article..." Link (Begin) -->
          <b:if cond='data:blog.pageType != "item"'>
              <span>
                <a expr:href='data:post.url' style='color:#0000FF; text-align:right; font-weight:bold; text-decoration:none' >Read more on this article...</a>
             </span>
          </b:if>
          <!-- Code to show "Read more on this article..." Link (End) -->

  1. After pasting the code, your template should look like as shown in the following image
  1. That's all. Your template is modified to show expandable posts.
  2. Now in every post, the content which you want to show only in post's page should be included between <span class="fullpost">This will be shown only in post's page</span>.
  3. Post a test article using the following HTML to see your blog working as expected

Hi, this is my test post.<span class="fullpost">This line is not shown in the main page</span>

Update on [2-July-2007]

Removed target='_blank' from step 7 code to avoid posts being opened in a new window.

96 Comments:

Anonymous said...

Thanks gopi, I just tried it on my blog, and works fine

Gopinath M said...

You are welcome Raj. Let me know if you are looking for any other hacks. I can try to help you

Cheers

Anonymous said...

Hi Gopi, is there any way we can open the hidden post in the same file so the text just expands and reveals itself....

Gopinath M said...

Jeewan, can you provide your email address. I will post the details and let you know soon.

Anonymous said...

thanks

Anonymous said...

This has been a big help, but I think I'm doing something wrong.

Is it supposed to say "Read more" after EVERY post (those that shouldn't expand)?

"Read more on this article" is showing up blue. Can I hange this color?

Thanks, again.

Gopinath M said...

Orleans,
You can change the color of the link "Read more on this article" by modifying value of the "color" attribute in the script (Step 7)

<a expr:href='data:post.url' style='color:#0000FF;...

Anonymous said...

This is a really cool tool. However, I have a couple of questions:

1. How do I get rid of the "Read more" for posts I do not want expanded"?

2. Can I get the hidden text to just expand in the same webpage?

Anonymous said...

Hi,

Found out the answer to opening the hidden post in the same page, which is to remove the target='_blank' statement.

However, would really like to know how to get rid of the "Read more" after every post for short posts that do not need to be expanded.

Please email me at chiffonlime@hotmail.com if you have the solution!

And thanks so much for posting your hack up, it is much easily understood than the other posts.

Rodrigo Perez said...

Two things:

1) it's opening up the expanded post in a new window, the post should just expand within the same window, no?

2) In my test version it just say, "Read more on this article, and the line of copy that's supposed to be showing up before the expanded post isn't displaying.

why don't these hacks ever work, i know how to code, copy and pasting them in the right places is easy, but I've tried several and they've never ever worked properly. GRRRRRR....


theplaylist.blogspot.com

Rodrigo Perez said...

Sorry to pester again, i have answered all my questions by reading all the comments (duh) and playing with the code myself.

However, this is my problem too:
"1. How do I get rid of the "Read more" for posts I do not want expanded"?"

At post that i do not want expanded, i am seeing "Read More" at the bottom. Is there a way to remove them?

theplaylist@gmail.com

thank you so much for your time.

Frank Fulchiero said...

I'd like a way to remove the "Read More" at the bottom of each post if you don't need it also.

Has anyone found a way to do this? It's a bit annoying.

Hafiz said...

another version of selective expandable post by Hackosphere. Both are using javascripts.

When you click read more, it goes to the individual page

When you click Read More, it expands in the main page

If you would like Read More links to appear only on selective post, instead of putting the code inside post template, please put the code manually. I am talking about the code at Hackosphere :).

You can see my blog on how I implemented the code.

Anonymous said...

Great Tip...thnx alot...

http://free-downloadz.blogspot.com/

M Taher said...

I noticed that blogger also offers a code.
see: How can I create expandable post summaries?
http://help.blogger.com/bin/answer.py?answer=42215&query=expandable%20post%20&topic=&type=f

Have you checked the above link? What is your comment about the above approach?

Gopinath M said...

Mr.Mohamed Taher,
I read the post which you pointed and it also explains the same. Thanks for the information.

Celebvilla said...

Hi, i have seen same style of code in all the hacks provided by all in the last 2 years or so. I have not seen any single hack which provided wordpress like automated system for Expandable posts.

notasyouthink said...

I have searched for this tool for a long time, thank you for your explanation! It works!

Gopinath M said...

Sachin and Muggle, thank you very much.

cr8on said...

Hi, I have added the code to the HTML. However, the post is still showing in its entirety. At the bottom it says Read more on this article. What do I need to do to only show a couple of lines of the post?

Thanks,

Gopinath M said...

cr8on,
Full post content is shown in the main page when the HTML is not properly formatted(missing end tags) ). Can you please make sure that HTML is properly formatted and the span tag is used?

arun said...

Hi gopi, thanks for this post. I never knew that blogger had this feature!

Anonymous said...

Hi Gopi...i believe i am reading this post late..i found your blog while searching and now i m sure to read it regularly...this is a great post ...but i was not able to implement the 10 point that how to insert "Read more" in between the posts.When i made the changes in template it always appears at the end of a post.
Always i have a question...wats the difference between blogger template(when u go to edit HTML) and the view source(when u right click on ur blog page and click view source)....if you copy paste the entire source code and paste it in the Edit HTML page in your blog settings ,why does it give error..if u could email me at abhim12@gmail.com with the answer ,i shall be grateful...
Thanks,
Abhijeet

Scrappur said...

Am Using The Same Templae What You Are Using ..But I Dont Able To Put Redmore Option
I Have Completed 1st Step
And 3rd Step But Not Able To Complete 2 nd Step As i Am Unable To Find
data:post.body
Kindly Help Me Out As Both Of Us Have Same Template.
My Mail Id Is
Snehax51@gmail.com
Or Comment In my Latest Blog At
http://cricpolitics.blogspot.com/
Am Am Vey New In This Field Hope You Will Reply To Me Soon.

Scrappur said...

Am glad to recevd yrs reply Thanks.
i Have Done All That ..But NoResult Comes Its Showing

"".post-body {
border:1px dotted $borderColor;
border-width:0 1px 1px;
border-bottom-color:$mainBgColor;
padding:10px 14px 1px 29px;
}
html>body .post-body {
border-bottom-width:0;
}
.post p {
margin:0 0 .75em;
}""

Sorry Dear What I Can Do I Dont Know ,am spending time 3 to 4 hours all the day in doing these but no result comes ,kinly help me
or you can do one thing copy that area code from yrs html code and give me as we both have same template ,,
if you are giving that kindly all the code of post if that code related to post section.
Thanks Again for yrs Reply.

Gopinath M said...

Abhijeet,
Blogger templates and source of the blog page which you are trying to extract using view source option are not same.
Blogger Template contains information about the layout and other widgets which are part of your blog.

Stone Crone said...

Excellent! Thank you so much! Works like a dream, and it was just what I had been searching for. Kudos!

Unknown said...

I've did it, but it did not summarized my post... however, the 'Read more on this article' appeared... hope to get your feedback... thanks...

Gopinath M said...

@ilynj,
Can you please recheck all the steps?

Jaxter said...

thank you so much its very useful steps but i didn't understand step 10
can you explain it more?
my question is do i need to put html code on every post i made to link it?

Gopinath M said...

Jaxter asked: my question is do i need to put html code(step 10) on every post i made to link it?

Gopinath says: Yes Jaxter. We have to place that code in every post.

Jaxter said...
This comment has been removed by the author.
Jaxter said...

i did the same but isn't work
the hided content appear down...!!

Gopinath M said...

Jaxter,
Please mail your template XML to techthoughts@gmail.com. We will try our level best to correct the problem.

Dutt said...

Hi Gopi,

I have written a comment earlier regarding auto expandable post.
but it was not added here.

It is very difficult to change all the old posts by this process.

Is there any widget or method for auto expandable posts.

Thanks,
Dutt

http://msdotnetsupport.blogspot.com

Gopinath M said...

Dutt,
To my knowledge there is no such widget. If you find difficult, I can help you in modifying the template. Mail your template to techthoughts@gmail.com

Anonymous said...

Nice advice. It's really useful. Thanks.
You have created good blog!

lolvegans said...

Thanks so very much! I've been searching for two days for a hack that actually works, and whose code isn't flawed. And I finally found it.

Thank you so much! You relieved a tremendous headache of mine.

-kw said...

I can't locate "data:post.body/" tag in my template.

Is it possible that it isn't in my HTML at all?

http://www.goodproblem.blogspot.com/

bricks said...

Thnks. Works well on my blog.

Chode-en-freude said...

Hey I know you wrote this post over a year ago, but I just wanted to say thanks - it displays perfectly in Internet Explorer - but I'm having trouble with how posts and their summaries are displayed in Firefox, Safari, and Opera. Any help you could offer would be great. Thanks again and keep up the good work.

Anonymous said...

Hi Karim,
You are welcome.

Can you let me know your blog url where you are facing problem with the script? I'll look in to the implementation and try to resolve the issue.

Chode-en-freude said...

Hey - thank you so much! The URL is http://chode-en-freude.blogspot.com/
Again - thanks a lot for your help.

Dexter said...

Please help me its not working. On my blog its just showing the full post and at the end it is showing read more.
my blog: http://indiapage3.blogspot.com

yani_worldpeace said...

thanks, you are very helpful

Joe Colly said...

Thanks. This worked for me too. Easy to read and easy to use. Nice job.

Joe Colly said...

Once installed, is it possible to change the text of "Read more on this article" to "Continue Reading" or something like that? Can I just swap that out in the HTML?

Anonymous said...

Thank you so much!!

cheth said...

sadly its not working on my template.. :( can you help please? http://chethstudios.blogspot.com

Tico said...

Thanks for this! The instructions on Blogger help suck! I'm glad I found this page!

હિમાંશુ કીકાણી said...

My problem is exactly reverse than that or Karim.
This was indeed a perfect solution for me. But, while it works perfectly in Firefox and Google Chrome, it creates error in IE. Will you help please, Gopi? The blog is http://charkhagujarat.org/, it is in Gujarati.

Gopinath M said...

હિમાંશુ કીકાણી ,
There is a java script error on your page which is not allowing it to render properly on IE. For some reason Firefox is ignoring this error.Here are the details of the javascript error
================================
post is null
checkFull("post-8772407364986447609")charkhag...jarat.org (line 499)
(?)()charkhag...jarat.org (line 1004)
[Break on this error] var spans = post.getElementsByTagName('span');
================================

હિમાંશુ કીકાણી said...

Thanks a log for amazingly prompt reply and guidance! Unfortunately, being absolutely illiterate in Javascript, I could not correct the error. I deleted that particular post and the problem has been solved!

Thanks again!

Nebz said...

Thank you so much. I tried it in my post and it worked! Changed the "Read more..." into [...] and changed the color as well to gray.

suraZ said...

it works fine for firefox. but when i use opera and internet explorer the page stops loading after the first post and Read more link cannot be seen

Nicely said...

thanks for the instruction. i did it in my review blog.

here:
www.nicely-reviews.blogspot.com.

salamat!

Anonymous said...

Thanks gopi, I just tried it on my blog, and works fantastic

raj said...

you are superb yohave great i m bookmarking your site for future use. once again great idea.thanx.

Anonymous said...

Thanks! Nice article. Learn something every day. :)

[[kateku-kel]] said...

Hi. I have make the read more link too a few months back. But now i trying to remove it, but i not sure how to remove as all those i created html don't seems to be able to find it. How do i remove it?

Anonymous said...

THANKS GOPI.ITS WORK.GREAT.

Anonymous said...

Thanks it worked me a lot....

TS said...

THANKS SIR. IT WORKED FOR ME.

bogavan said...

Thanks a lot for this tweak :: I've been looking for this information so badly. It works perfectly... Nice Job.

Dana said...

Thank you so much! I have tried so many times to implement this hack, and yours is the first to clearly explain it and work!!!!

Thanks again! Happy Holidays!

Anonymous said...

Thx man, I was searching for this all day, I found similar but only this work.

THX

Anonymous said...

hi gopi,I want to open the links in a new window ,wat to do ??

Gopinath M said...

@Anonymous,
To open the links in a new window/tab add

target='_blank'

to the < a > tag of step 7

Jason Law said...

Hi...
After I implement the code, the
"Read more" will appear in every post.

Can I disable for certain post?
Maybe I want to disable this function for some short post and enable it for longer post..

Is there any way to do it? Thank you

Denz said...

hahaha..
it works, i've been looking for all trick to expand my post but its didn't works at all. Finally i found this link and it works on my blog.
thank u so much..

KMc said...

If you guys are interested in putting Related Posts on your blog, Searchles just launched a Related Posts widget last week that's really easy to grab for Blogger. It actually analyzes the content of your posts for better relevancy so you don't even have to tag. Shameless promotion aside - you guys should check it out!
http://www.searchles.com/misc/platform

Poster Child said...

Hi! Thanks a lot; this is the first time a code for expandable posts has worked for me too and I am pleased. However, I have noticed a lot of people in the comments with the same problem I am currently having and I didn't see an answer. I do not want the read more after every post, just the long ones I choose to add the html to. How do I diable it for certain posts?

Gopinath M said...

@Poster Child,
When I was struck with the same problem, I moved to WordPress.

If you want to be a professional blogger, you should ditch blogger and switch to wordpress :)

EBDavid said...

Hi.
This is a great and useful info.
Can you help me find info about doing the same thing in a SINGLE POST.
I mean, if I have one post that has a long data in it, is there a way to add a code to my HTML page of THAT POST, which affects only the specific post?

Thank you so much
David

EBDavid said...

Hi.
This is a great and useful info.
Can you help me find info about doing the same thing in a SINGLE POST.
I mean, if I have one post that has a long data in it, is there a way to add a code to my HTML page of THAT POST, which affects only the specific post?

Thank you so much
David

www.goontribe.net said...

Thanks a million

Anonymous said...

This really works. I've been searching the net for days trying to find an expandable posts code, and thrilled that yours actually works.

If there's a way to change the code so that each post truncates itself automatically, please let me know. The less time I have to fiddle with customizing the code in each blog post the better, because I'm a mad texter.

Thanks again!!
Cheers!

Anonymous said...

could you please anyone let me know how to trucate the post automatically and display at page.

Ken said...

Whew! atlast I found you. Thanks a lot

Sakinah Omar said...

Hi Gopi,
I tried. It works.Thanks a million.Thing is theres a gap between end of entry and read more?
What to do?Thank you.

sauravjit said...

hi,
why my blog starts transferring data from posts at homepage even if its not open.

RON said...

how do i create multiple expandable summaries for a SINGLE post?

MOLEMOU said...

Nice advice

Mr India said...

Awesome Gopinath. It worked like charm. Thanks for the tutorial

Julie Tuggle said...

Thank you so much! I just spent the last couple of hours trying to get this outdated post in Blogger Help to work: http://help.blogger.com/bin/answer.py?hl=en&answer=42215

Hello, out there Google! Let's keep Blogger Help updated, OK?

- Julie

HoneyBee said...

Thanks a lot, this is just what I'm looking for my fiction blog!

Thanks again for sharing! Brilliant!

Obscura said...

I follow the instructions carefully but it doesn't work for me. I can see the "Read more on this article..." on the bottom of my post but it wouldn't compress. I can still see the whole post.

Unknown said...

Much thanks. Although blogger has added the read more into their editor. The new template I downloaded didn't have the html code in the template for "Read More"..."continue reading" or whatever. Therefore, some may have mistakenly felt like it was the end of the post.

Thanks a million. I was just about to give up. I will add you to my blog roll on my site for your expertise.

Thanks again!

Anonymous said...

I hope this will make it simpler.

How to create expandable post in Blogger

Unbelieveable Stuff said...

Nice One.......

Anonymous said...

Is social media going to kill SEO?

Sheila said...

Thanks so much! It worked perfectly and it was just what I was looking for.
Sheila

Anonymous said...

It didn`t work properly on longer posts

kumar said...

thank you so much

Mel said...

I tried this and it works great on Internet Explorer, but doesn't work on Safari or Firefox. What seems to be the problem?

My test blog is here: http://melvelscloset.blogspot.com/

The latest entry works fine on IE, but the other entry includes the expandable summary text even if there are no text hidden? How do I fix that?

Sofie said...

It works for me on small posts!
Like if I paste the test post!
But on larger posts with pictures and all it doesn't work!

My blog http://7stepstostop.blogspot.com/

I lands on the bottom of the page!
Do any of you know how to fix it?