Bringing the OFW's Around The Globe Closer Together

Expandable Post Summary Made Easy

This is actually a follow-post on the post summary hack that I’ve written last week. This time I will try to make the instruction as simple and as clear as I can so that you won’t get stuck along the way, expandable post summary made easy. I hope this post will shed some light for the confuse fellow bloggers out there who tried the hack and were not able to successfully implement the expandable post summary.

As I’ve told in our previous article there are two types of blog template style being used in blogger. These are the LAYOUT and the CLASSIC template. If you are a blogger that uses a classic template I strongly advice you to read that post instead and follow the direction carefully. You can read the CLASSIC expandable post summary hack instruction HERE.

When I first start to navigate the html code to implement this hack I also failed several times. I start over and over again and no matter how I try I can’t make it work. Later I realize that I’m using the wrong code for the wrong template. *Sigh*.. I’m using the hack for layout whereas my Blog is using the CLASSic template. Its totally contradicting, and there is no way that it will going to work… so check your template mode and use the appropriate code so you will not commit the same mistake.

For the LAYOUT code, I’m going to summarize how you will do it. I’ve already tried and used it in my dummy blog. If I’ve done it I’m 100% sure you can do it too.. .

Here is how to do it for LAYOUT TEMPLATE BLOG:

1) Log-in to blogger

2) Under the blogger dashboard page you will see here POST, SUMMARY, LAYOUT., If the blog where you want to implement this hack has a “TEMPLATE” instead of “LAYOUT” then go to this link and follow the instruction for CLASSIC post summary hack, otherwise continue on the next step.

3) Go to SETTING >> ARCHIVING and make sure that “Post Enabled Pages?” is set to YES.

4) Save the setting

5) Now select the “TEMPLATE” tab and click the “EDIT HTML”

6) If you don’t have a back-up copy of your template yet back up your template now by copying and saving in accessible folder. You are going to use this backup in case something goes wrong.

7) CHECK the “Expand Widget Template” box.

Let us first define our CSS by searching the “/head” in your html template box. (TIP: press CTRL+F, and type “/head”, press enter until you find the “/head”)
Just before the “/head” add below line so it will look like the code below (code in red are the ones that you will paste in your html code)

body#layout #footer-wrap1 {
padding-top: 0;
}
]]></b:skin>
<style>
<b:if cond=’data:blog.pageType == “item”‘>
span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;}
</b:if>
</style>
</head>

9) Now look find the <data:post.body/> by using the tip I mentioned in previous step (CTRL+F)..Then paste the code below right after that line, see below for reference (code in red are those that you will insert in your html template)

<div class=’post-body’>
<p><data:post.body/>
<b:if cond=’data:blog.pageType != “item”‘>
<a expr:href=’data:post.url’>Read more!</a>
</b:if></p>
<div style=’clear: both;’/> <!– clear for photos floats –>

10) Save template

11) Now go back to SETTING>>FORMATTING at the bottom of the page you will see the “POST TEMPLATE BOX”. Copy/Paste the code in the post template box.

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

12) Save settings and you’re done. Start Posting and Happy Blogging.

Note: Expandable post summary using the above procedure will take effect only on the new post that you will publish. For your old post, you have to insert the code provided on step 11 manually. And make sure that you are in the post page “edit html” mode. For example if I want the ” The quick brown fox” only in my summary page this will be my page post.

The quick brown fox <span class=”fullpost”> jump over the lazy tired dog.</span>

You could also try the procedure illustrated by Ramani or Hackosphere regarding the layout expandable summary.

Let me know if this post clarify the confusion that you have now, or if this post confuses you more then it is MANDATORY for you to let me know.. hehehe.. feel free to leave a comment here or send me an email, you can reach me at reysipat@yahoo.com.

Proceed to this link for other BLOGGER CUSTOMIZATION TIPS & TRICKS. Let me know the hack that you want so I can research and feature/post it here for you.. I’m just a comment/email away..

If you enjoyed this post, please consider to leave a comment or subscribe to the feed and get future articles delivered to your feed reader. You may also subscribe via email for FREE by entering your email below and have us deliver what you need directly to your inbox.

Enter your email address:

Powered by Wordpress | WP Premium
Copyright 2008. OFW LIFE Blog. All rights reserved.

• Home
• Advertise Here
• Watch Tagalog Movies Free
• Links
• Privacy
• Contact
• Log Pan News