This entry is written in respons to Yunia Sribudiani's effort to make expandable posting in Blogger. Hope this explanation can help guiding her through a step by step actions.

First, read official explanation from Blogger, How can I create expandable post summaries?. That is brief document and this entry merely provides examples because on several occasions learning by example is somewhat more applicable. Here is how...

Second, open your blog template (menu: Template) and identify stylesheet section (CSS). It is a block of design explanation of website between <style> and </style>. For example, the beginning part of style sheet of this page is (and is ended with </style>),

<style type="text/css"> /* ----------------------------------------------- Blogger Template Style Name: 565 Designer: Douglas Bowman URL: www.stopdesign.com Date: 28 Feb 2004 ----------------------------------------------- */ body { background:#cdb; margin:0; padding:10px 0 14px; font:x-small Verdana,Sans-serif; text-align:center; color:#333; font-size/* */:/**/small; font-size: /**/small; } /* Page Structure ----------------------------------------------- */ #wrap { position:relative; top:4px; left:4px; background:#ab8; width:744px; margin:0 auto; text-align:left; margin-top: 1em; } #wrap2 { position:relative; top:-4px; left:-4px; background:#fff; padding:10px; } </style>

Insert code from Blogger,

<MainOrArchivePage> span.fullpost {display:none;} </MainOrArchivePage> <ItemPage> span.fullpost {display:inline;} </ItemPage>

To make "safe" (while this is not a must), insert them before </style>, so

<MainOrArchivePage> span.fullpost {display:none;} </MainOrArchivePage> <ItemPage> span.fullpost {display:inline;} </ItemPage> </style>

Before saving that template, third step can be done: inserting Blogger's item body tag,

<MainOrArchivePage><br /> <a href="<$BlogItemPermalinkURL$>">Read more!</a> </MainOrArchivePage>

and as example with my template,

<div class="post-body"> <p> <$BlogItemBody$> <MainOrArchivePage><br /> <a href="<$BlogItemPermalinkURL$>">Read more!</a> </MainOrArchivePage> </p> </div>

Be careful: after <$BlogItemBody>.

Save the template. The main first step has been completed, and now it is time to get into experiment with a new posting.

Fourth, it is now time to create a new post with a new style. Use <span class="fullpost"> to start a new remaining posting which will be hidden in front page and be shown in individual article. An example for this,

The beginning of my post. I will tell you about two things, <span class="fullpost">first is about our mission, and second is about...</span>

Save, and all is done. There is one suggestion not to use paragraph HTML-tag, <p> outside <span class="fullpost"> to let it works.