Monday, December 18, 2006

Metablogging: Getting the "Read More" Working

After reading the help page "How can I create expandable post summaries?" I was even more confused than when I started because the code did not seem to work with the new template system. After a little trial and error I was able to create functional post summaries for the new templating system as well.

THIS IS ONLY APPLICABLE TO BLOGGER BETA The NEW BLOGGER WTIH GOOGLE TEMPLATES! If the above help page appears inappropriate then use the distructions below.

UPDATE: 6/7/2007, Most of this has been integrated into the blogger help page, please try those directions first!


You Want Me To Put What Where?


I looked at the page and was very confused since the tags and variables that are used in the help page don't seem to exist in the new templating system. You can tell you are using the new system by looking for the following string near the top of the template HTML "xmlns:b='http://www.google.com/2005/gml/b'". Once you know that you are using the new system and not the old system you need to change the template in a different way.

Ok, So How?


It boils down to the fact that you need to make two changes to the template. You need to add the conditional css tags and you need to alter the blog posts to include the "read more" link. You will need to be editing the template HTML with "expand widget templates" checked in order to complete this change.

I inserted the following code right before the </head> tag in order to get the conditional css in place.

} ]]></b:skin>
<style>

<b:if cond='data:blog.pageType != "item"'>
span.fullpost {display:none;}
</b:if>
<b:if cond='data:blog.pageType == "item"'>
span.fullpost {display:inline;}
</b:if>
</style>
</head>

<body>

Next we alter the way that posts are displayed. ( you must have expand widget templates checked ).

<div class='post-body'>
<p><data:post.body/></p>

<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'>Read the rest of this story</a>

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

Now What?


In theory, once those changes are made, you should be able to use the direction on the page to edit your posts. The jist is that you need to add the to the bulk of your text in order to achieve the desired affects. You can see a perfect example of this effect on my blog.

UPDATE: You still need to wrap the hidden part of your blog posts in a <span class="fullpost"> ... </span> in order to acheive the affect just as the help page describes.

Problems


There is one problem with this effect and that is it affects all posts, not just long ones. This change is either on or off for all posts.


12 comments:

Anonymous said...

Thanks for the helpful tip.

Anonymous said...

Sir,
Unfortunately, I din't find the said place to add the second part of the code. Any help will be much appriciated.

Template No.897 by Douglas Bowman

Thanks
anand from India

Eric said...

Anand,

I am unfarmiliar with that specific template, but it looks like the old style and THIS IS INAPPLICABLE. You need to be using google templates and not old style templates.

There is a link at the top of the post and that help page should be appropriate to you.

Anonymous said...

Sir,
It is Google beta blogger default template.
As I can not post the code here, I have uploaded it and giving the link.

If possible, please have a look and suggest solution which will be helpful not only to me but also to other bloggers.

Thanking you once again.

Sincerely,
anand

http://mihd.net/x0l15g

Eric said...

Intersting, all of the widget template customizations appear to be missing. Without more input from google and blogger I don't know how to solve this problem.

Here is a copy of my template with the sections highlighted.

http://docs.google.com/View?docid=ddzg2vzg_52gxttf3

J. C. Samuelson said...

Ok, so once I add this code to the template, do I have to do anything to the posts? If so, what?

I tried this, and the link appeared, but the entire post was still showing.

Sorry if this is something I should know. I'm new to modifying the templates.

Eric said...

I have updated the "What Now?" section with info about posts.

Lacanista said...

Wow, this actually worked (after hours of trying other solutions...apparently the code in the HELP section is flawed, or at least it doesn't work with all the templates. The code you provided for the data:post.body was the trick that fixed it for my blog.

Thanks!!

lacanista.blogspot.com

Genie said...

Hi Eric,

Thanks for posting this. I'm stuck though.... The link shows up, but I still see the entire post. I'm sorry, but I didn't quite understand the "Now What" update. Can you clarify that part, please?

Thank you!!!

Anonymous said...

There is some redundancy in your code. In the stylesheet part, you could remove the two if tags and use an else tag.

Also check out how to excluding the first post from Expandable Post Summaries hack for Blogger.

Anonymous said...

I mean remove the second if tag.

Wiwin said...

hai Eric..

I tried this, and the link appeared, but the entire post was still showing.
Help me,please...

www.nafuzu.blogspot.com