Sign up for PayPal and start accepting credit card payments instantly.



Tuesday, September 11, 2007

Summary/Expandable Post



Interesting Teaser


Wow! Times sure running fast these days. It has been about two weeks since my last post. I got a little bit of a problem with my (ISP), Streamyx. It's really a long story and annoying. I shall tell about it on my next post.

For now I'm trying to help a fellow Blogger, baLooT Don JuaNer. He sent a question in a local forum that I've been visiting now and then, but I cannot post an answer due to the said problem above. You can read his thread at this useful information.

Usually a summary is used when a has long posts on his/her blog. Sometimes it can be an irritating experiences to your blog's readers because they have to scroll down your long posts many times.

Using you can attract your readers with an interesting teaser. Write a short summarize post that can attract your readers to read more of your awesome post. That is, the main page will show only post summaries and when you click "Read more", the full post appears in the main page itself.

FYI, we at ArahMan7's team don't use this application because ArahMan7 have make it their policy to publish only one post per page.

When it come to hacking a Blogger's template, several outstanding names came to my mind, but I've always preferred to use Han's hack. Hans improved it by adding a "Summary only" link with which you can collapse the post back to summary. He also made the "Read more" link to show up only for the posts that have a summary. This is what you have to do;
  1. A word of caution: Before your start tweaking with your template, please save a copy of your template by clicking the Download Full Template link. That way if anything goes wrong, you can always upload it again.

    Okay, now add the following javascript to the head of your template. Preferably before </head>

    <script type='text/javascript'>

    function showFullPost(id) {
    post = document.getElementById(id);
    var fullpost = post.getElementsByTagName('div');
    if (fullpost.length != 0) {
    fullpost[0].style.display = 'inline';
    fullpost[1].style.display = 'none';
    fullpost[2].style.display = 'inline';
    }
    }
    function hideFullPost(id) {
    post = document.getElementById(id);
    var fullpost = post.getElementsByTagName('div');
    if (fullpost.length != 0) {
    fullpost[0].style.display = 'none';
    fullpost[1].style.display = 'inline';
    fullpost[2].style.display = 'none';
    }
    }

    </script>

  2. Find the includable called 'post' in your template and add the codes in red. You must click in the box to Expand Widget Templates. If not, you will never find it.

    <b:includable id='post' var='post'>
    <div class='post'>
    <a expr:name='data:post.id'/>
    <b:if cond='data:post.title'>
    <h3 class='post-title'>
    <b:if cond='data:post.url'>
    <a expr:href='data:post.url'><data:post.title/></a>
    <b:else/>
    <data:post.title/>
    </b:if>
    </h3>
    </b:if>
    <div class='post-header-line-1'/>

    <div class='post-body' expr:id='"post-" + data:post.id'>
    <b:if cond='data:blog.pageType == "item"'>
    <p><data:post.body/></p>
    <b:else/>
    <style>#fullpost {display:none;}</style>
    <p><data:post.body/></p>
    <div>
    <p><a expr:onclick='"javascript:showFullPost(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>Read More...</a></p>
    </div>
    <div style='display:none'>
    <p><a expr:onclick='"javascript:hideFullPost(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>Summary only...</a></p>
    </div>
    </b:if>
    <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>
    </div>

    .... rest of template code ....


    After adding the red codes, save your template.

  3. After saving your template, go to your settings and click the formatting button. At the bottom of the page there's a Post Template's box. Copy and paste the following codes in the box. Please do not type it yourself because you might create some space that will break it functionality.

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


    Then save your settings.


That's about all you got to do. Here's some explanation what it gonna do after pasting the codes. When you create a new post, it will shows you clearly where to type the summary and where to add the rest of the post. It is important to make sure that the </div> tag above is at the end of the post.

To be able to do so, when typing your new post, type it in Edit HTML mode. It's difficult to see it in Compose mode. I type my post this way. After typing the new post, use Compose mode to change your fonts, colours or anything to your heart contents.

Below is an interesting news what blogging can do to you. Brought to you by the fabulous The News Room. Keep on blogging, may you prosper always.





I hope you enjoy this post.

Greetings and lotta loves from


Subscribe to My Journey To Recovery

A candle loses nothing by sharing its flame.

2 Responses to "Summary/Expandable Post"

Unknown said...

thanks a lot arahman for this post..

i will try as soon as possible...

now im quite busy to edit that template...

if that code working..thats great..

anyway, thanks again arahman..

see ya..

Unknown said...

helo again arahman..

aku dah try code tu...

apa yang aku maksudkan bukan peek-a-boo post...

yang aku maksudkan ialah nak summary post tu, lepas org click kat title post tu, baru pegi ke full post utk title tu...

time summary takde adsense, time dah pegi ke full post, baru ada adsense...

kamu paham apa yang aku maksudkan ni?? kalau x paham, bagitau r..

aku boleh explain lebih detail lagi...

Post a Comment

I loves to receive comments from everybody and I tried to make everything easier for my readers to comments. So please, be nice even though you totally disagree with me. No comment moderation and whatnot here. So, please respect the privileges given.

God's willing, all comments will be followed and replied.

p/s Please leave your URL so that I can follow it and leave comments on yours. No URL = No Comments. It is as simple as that. Thank you in advance.


~ ArahMan7

PS - Word verification has been enable. Sorry about that [Sept 3rd, 2013].



Back To Top

BlogMalaysia.com