1. One with which you can selectively make some of the old posts expandable i.e. only summaries will show up for them and clicking a "read more..." link will take you to the post page.
2. One that expands posts in the main page itself - Peekaboo style.]
Jornada left a comment in my blog that he found a blog which explained how to show expandable post summaries with Beta. Good thing about showing only post summary in the main page is that your readers can quickly find all that you have written about. Also, your blog gets an 'online journal'-like neat look. A "Read more" link is provided which takes them to the post page to read the entire post. Please note that you, as the author, have the flexibility to choose the portion of your post that appears as summary.
This hack is only an adaptation of Blogger's original instructions for expandable post summaries to Beta template. You can find Jornada's post about this here. I thought I will re-post the instructions with minor modifications for my readers.
Step 1. Search for "post-header-line" to find this portion of code in your template and add the lines in red as shown.
<div class='post-header-line-1'/>
<div class='post-body'>
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/></p>
<a expr:href='data:post.url'>Read More......</a>
</b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
Step 2. Goto Settings->Formatting and at the bottom, you will find the text box provided to specify the "Post template". Copy/paste these lines into that text box and save the settings.
Type your summary here
<span class="fullpost">
Type rest of the post here
</span>
If you create a new post now, it shows you clearly where to type the summary and where to add the rest of the post. Follow the format and only summary will show up in your main page. Please note that you also need to divide your old posts like this (atleast the ones showing up in main page) into summary and full portions by editing them.
82 comments:
This is very nice. do you know how this guy this effect on his blog?
Example of button reveal
Ramani,
thank you for this, and for your blog in general. I'm having trouble, though - those bits of code don't appear to be in my template, which is one of the new ones added in Beta (Denim).
i think blogger is coming up with this feature in next version.
http://help.blogger.com/?page=wishlist
What a hacker...
Lucy, all the templates are alike except for the CSS. Look for the lines in black (use the search term 'post-header-line' to get there). Lines in red have to be inserted.
LOVING your blog. I'm new to html and even I can do this stuff! Question: Is there a way to do this and have certain posts NOT have the "Read more" link? I'm having some trouble - when I did this ALL of my previous posts have a Read More link and there's nothing more to read! I also don't want to go back and modify each one separately. Did that make sense?
Kate, yes, I make my instructions simple so that any blogger can use my hacks, not just the techies. The "read more" link will only appear in the main page. If you don't want to change all your posts, you could just divide the posts that currently appear in your main page into summary part and remaining part. That's what I have done. Going forward, all your new posts will have this separation.
Thanks! But, what if I want the option of having the "Read More" link? I want some posts to have the link but not all... Also: is there a way to keep the link in the archived post as well and not just on the main page? I can find ways to do this on the classic blogger, but not with beta blogger... Thanks again for your wonderfully informative blog.
Thanks, Ramani. I found the spot in the template - my problem was that I had not ticked the box to expand widgets.
Hrrrr, just a question... i think u guess which:
How can i make the comments appears on the main page?
:O(
kca, you seem to have a fixation on main page comments :) Unfortunately, Beta doesn't provide the comment data for main page. So, there's no straight forward way. Check with stephen (http://singpolyma-tech.blogspot.com) who developed peekaboo comments for old Blogger, if he has figured out another way.
:O(
So I will not up grade my blog until i found a way to see my comment bubble on the main page.
This is nice but is it possible for you to make this as a collapse/expandable? I've seen like this from blogger help http://help.blogger.com/bin/answer.py?answer=42214. It's a user friendly.
Thanks Ramani, I'm gonna share this to my friends.
Ramani,
Thank you so much for your hack. It clued me to what I wanted.
I have a different variant for expandable posts.
I use <span class="summarypost"> for the portion of the post on the main or archive page to be displayed (and only on the main/archive page). You can use this class to customize the "Read More". And, the <span class="fullpost"> is used as before. Any text outside of these two classes will show on either page types.
I would note also that I place the style definition within the <head> section of the web page. Placing the style definition inside the post body definition repeats the styles unnecessarily.
The drawback is that I manually include a link to "Read more" within the post (which needs to refer to the post link). But, this way, I can choose which posts have a "Read more" and have a custom blurb that only shows on the Archive/Main page. On the other hand, you won't get a "Read more" link on every post, even the ones that don't need it.
So, a post using this would look like -
~ ~ ~ example post body ~ ~ ~
<-- Introduction Text (this is part of the full post display) here -->
<span class="summarypost">
Want to know more?
<-- Teaser or Disclaimer Text here -->
There is more <a href="{your -post-link-manually-entered}">here>
</a></span>
<span class="fullpost">
<-- Full Post Text here -->
</span>
~ ~ ~ /example post body ~ ~ ~
Here is the template hack. This goes after all of the CSS styles but before the </head>
~ ~ ~ Template hack ~ ~ ~
]]></b:skin>
/* Custom - Begin
----------------------------------------------- */
<b:if cond='data:blog.pageType == "item"'>
/* ItemPage */
<style type='text/css'>
.fullpost {display:inline;}
.summarypost {display:none;}
</style>
<b:else/>
/* MainOrArchivePage */
<style type='text/css'>
.fullpost {display:none;}
.summarypost {display:inline;}
</style>
</b:if>
/* Custom - End
----------------------------------------------- */
</head>
~ ~ ~ /Template hack ~ ~ ~
-ANM
If I hadn't seen Lucy's comments, I would have been just as confused as she was initially. The only problem, if you could call it that, that I did discover was that the new code for post template only applies to new posts. You have to copy/paste the code into HTML for all the older posts if you want to edit what is already on your homepage.
But otherwise, it works great, thanks!
I needed to add that the 'read more' link appears on the bottom of every entry on the home page, but until I added copy/pasted the post template code into the older entries to get the full effect.
Raquel,
Do you really want to hide the entire post in main page? Did you see my previous post on peekaboo view for label pages? If you like that, I can tell you how to use it in main page also.
and I didn't know that Blogger had a help page for expand/collapse for classic template!
Honeycakes, I added a note about editing old posts now.
Kate, it is not possible to show "Read more" link selectively. And this should work for archive pages, unless you have installed my Peekaboo hack also.
A nawty mouz, your implementation looks nice. Kate, pls check that comment.
would you look at my blog and tell me how I can hide the tags from the main page? I don't want all this on my page! I don't know what I did wrong.....
Subscribe to Post Comments [Atom]
>
0 Comments:
Post a Comment
<< Home
Trackback
Wednesday, September 13, 2006
and then if there are comments, all of them now show on my main page, and I think it looks crappy.
nayj, can you send me your template through email? I will check what happened. and I am surprised how you got comments showing up in main page!!
"Do you really want to hide the entire post in main page? "No Ramani, what I meant was when you click the "read more...", it's nice if you will add an effect like collapse/expand.
Anyway, how did you control your label tabs on navigation and how did you add the home? Please share it with us. I asked the author about this, but, he doesn't know yet.
Raquel, gotcha. you want peekaboo view with summary in main page :) I was thinking about it. will check if it is doable without changing too much code.
Ohh a bloggerwishlist? That's awesome... I've got a bunch of ideas I need to have updated.
(Glad do see your site runs well under the new version!)
Hello Ramani,
I have a few questions.
1. I inserted the code for the Expandable Post, but it's showing the whole posting rather than just a summary. At the end of the post it says "Read more..". How can I shrink it down to about a paragraph?
2. I'm using the same template as your site, the "Scribe" template. I see that you've expanded the width of your page, but I can't figure out how to do it on mine. I've tried increasing the width number on the Layout section of the template, but things just become disjointed. How did you do it?
My blog is at http://tommyatkins5.blogspot.com/
Any help you can give me will be appreciated. Thanks!
Thomas
Thomas,
After you add this hack, only new posts will use the post template. You have to manually edit your old posts to divide it into summary and full post sections.
Expanding the template may have some side effects. If you are not familiar with CSS, I would suggest you to not to try it. Do you want to expand it to make into 3 columns?
Hello Ramani,
I tried a test run by making a new post. When I opened the page for a new post, it went directly to html format.
I inserted a summary over where it said "Type your summary here", and I inserted the rest of the post where it said "Type rest of the post here". The result was that nothing appeared on the main page but the title.
Then I went to the Compose format and inserted my entire blog there. After which I returned to the html format to insert the Summary. The result was a full posting of my blog with "Read More..." at the very end.
Can you help me find out what I'm doing wrong?
Thomas
Thomas,
You should only be using HTML mode and not compose mode. The line "span class=fullpost" should be after your summary. did you make sure of that?
Hell Ramani,
Yes, I just followed the format from your hack. Where it said, "Type your summary here", I inserted my summary. I did the same thing for where it said, "Type rest of the post here" for my full post.
Am I just not getting it?
Thomas
hmm.. It works for others, Thomas. Can you send me your template through email?
Ramani, I wondered if you'd seen this post on No Fancy Name - instructions I followed when I set up the expandable post on my classic blog but don't work with the beta blogger, obviously.
http://nofancyname.blogspot.com/2005/02/making-expandable-blog-posts-in.html
Doing it this way, you can choose form post to post whether to make it expandable or not.
Hello Ramani,
I figured out what I have been doing wrong and now it's working wonderfully. Thanks for all your help!
Thomas
Hi Ramani,
I dont' know if you were aware about these
folks who made a java hack to blend some sidenotes into Worpress posts. Side
notes that readers could hide if they want.
So it gave me the idea to make a similar for Blogger, easy to do when you
think about the "quotes". Maybe you might take a
look at my blog. 'cause my english is so so.
But the point is that I don' t know how we can show/hide it,... basically
this is where you should act like a Superman.
:O)
ps: I got a question... do have any idea how can I... ;)
KCA, I will take your idea and check it out when I get more free time. thanks.
I'm a newbie to blogging and have had limited success with "expandable post
summaries". My problem is that I only want the "read more" link with long entries. Currently it affixes to ALL my entries. How do I use this for only lengthy entries?
Sun,
Did you check out my other post titled "Expandable posts with peekaboo view"? with that version, read more link can be controlled your way.
OMG this is totally awesome, somothing that I cannot do on my classic blogger but I can! Thanks Ramani =)
I keep getting this error message when I try to upload the new editted template:
"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 "HEAD" must be terminated by the matching end-tag ""."
Thanks Ramani for the hack. Great site, I will be periodically checking it out. I was wondering if it's possible to remove the read more links on posts that are not summarized. I know the improved versions are controllable. But this one creates more page impressions.
Paul,
Can you send me an email? I will reply with some modified code that I gave to somebody who had the same concern. If you test and it works, I will update this post.
Ramani thanks for sharing. I've try it out and work like champ.
Thx Ramani your code for expandable summaries is works for my beta blogger account. But the problem is this things is affect for all of my post,i don't wanna use the expandable summaries for all of my post, because not all of my post is long, some of them is just a short post
Can u give me a solution....???]
Thx Before
Lempuyangan,
I came up with a version to do that. I will write about it in my next post.
Ramani, I've used your code in my blog, but I keep getting the same error that I had with the old blogger, it happens when I open my blog on Internet Explorer. It only shows the first paragraph of the first post, no sidebar, no "read more" link.
If I use firefox, there are no problems, things wotks just fine.
Please help me because a lot of old folks only use IE and there's no way I will get them to change to firefox, I've already get them to read the blog and that was a big step, enough for me.
Thanks,
http://seremieconomiaviregion.blogspot.com
Guillermo, I do see something similar to read more links in your blog in IE.
Hi,
I made the code changes completely and things work if I type directly into the create post window. But I use Google Docs to compose my messages. Can I integrate it to appear in the expandable type option. If not what do I need to do in the Edit Post section to choose the summary and detail sections.
Raghu
Raghavendra, I haven't tried google docs yet. Basically, you need to use the same span tags before and after the full post. Does it not work?
Hi, Ramani
I've tried it, and it worked. But there's a new problem. I figured that I should have could write my post in "Compose" mode (because of the complex-formatting), then doing some minor-edit in HTML mode using span class="fullpost" to enable "Read More" magic.
But now the "Compose" mode completely disappear from my dashboard. What's wrong?
Adrian, that's really strange. Are you using the post template?
Spicc, which blog has this problem?
the blog is kezdoszolesz.blogspot. The widget is recent comments.
Thanks ramani, it's terrific.
Spicc, I have sent you an email. Pls check.
Thankyou very much for this hack - once I got past not reading everything properly it appears to work just dandy now :)
I like this old one
work great, Thanks
Hi everybody,
Big problem here. I do everything as you say, check the box above the template, add the red lines in their place... but when I try to save the template, the iexplorer window closes! And I lose the work!!!
Thanks Guys! It works, I am really happy that I can cut down on the bulky appearance of my blog.
There is one question that I have for you. On the old posts that were there prior to me inserting this html-the "read more...." line appears below all of the text. How can I edit those posts, without losing the information that was there and still have the summary style posts?
Thanks again!
Benin,
I came up with a different version of this hack with which you can selectively make old posts expandable.
Here it is.
Chus, that's very strange. can you retry the same post, maybe remove some images or special things that you might have.
Useless. Everytime I make the most insignificant change in the "expanded" template, the explore window closes when I hit the Save button...
I had a youtube video in the sidebar, but I removed it to try the whole thing again... and the same result. :-(
My blog is
www.odioelmerengue.blogspot.com
Could be a problem with cookies?
This was a great help , thanks! , oh a tip for the others, you may need to check the little box Expand Widget Templates
Works perfectly for me.
Thanks dude.
http://meandthecomputer.blogspot.com
Hey thanks for this entry. My question is what if you don't want the "read more" text to show up on EVERY post? Just the ones you break up?
Thanks again.
dotter, did you not read update no.1?
whoops...I'm a moron...
Thanks again.
thanks for this - it seems to be working very nicely on my blog.
One question: is there an (easy) way to format the "Read More" link - i'd ideally like it right-aligned and bold so that it stands out more...
Brilliant! Works much better than the "official" Blogger hack, which stuffed up on my blog.
www.stirredherd.blogspot.com
Hi,
This is very nice hack, thank you. And very clear instructions also.
Thank you!
Thank you, thank you, thank you!!!
If I would have read your post first, I could have saved about 3 HOURS of time!
This was done in 5 MINUTES!
Thanks,
Brian
hola hacko! thanks for this chiko!
well i couldnt get it to work it shows the readmore and when you click it it goes to the full post but on the front page it doesnt show any of the post
Thank you thank you thank you...I can't believe I've found your help on this...I was so frustrated that I couldn't do the expandable post.
Hi Ramani,
it seems that is only me that cannot expand the post, i have been trying this for weeks and never asked anyone, as i didn't want to be stupid. I do write long posts and this would be very helpful, but it doesn't wanna work in my blog! I keep getting: ***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 "*** even when i manage to save the template i try to post and it shows read more on the very top of the post but is still showing the whole post. Would you be able to tell where i might be going wrong?
Thank you soo much.
Email address serianlive@hotmail.com
Thanks for your tutorial, Blogger help doesn't work for me, but I'm so glad you have this post. Thanks again
thank you very much! I've always wanted to show summary on the first page since i write long blogs.
question though, can it be set to open a new window when clicking the read more link?
Does your Sep. 12, 2006 expandable posts hack still work?
Just curious.
Wretched,
Me
Can someone please help with this? I've got to move out in a few weeks and need to get some ad income in or I'm dead meat. Thanks
sumosalesman@aol.com
Yes, this original hack should work fine.
If anyone can help me get my blog set up the way it should be I'll have $50.00 PayPaled to them by this coming Thursday, 100% guaranteed.
Hi,
This post really helped. I have done this now, and am writing summaries of previous posts.
Thanks for your help.
Visit me on
http://freestuffonly.blogspot.com
San
Post a Comment