ikmalTips : summarize blog post on blogspot ( I )

As a daily-based internet user, I surf on more and more sites everyday. There`s one thing I hate upon stumbling (stumble upon?) a sites are the one that uses very confusing layout and hard-to-read font (am I one of them?) but post a very well written content. This annoys me that halt down my intention of reading the content.

The widget I`m about to introduce here solve none of the problem above. But. It does make a certain post easier to read by summarizing the header of the post and provide certain link either to expand/collapse the post or to be brought onto a new page featured only the post selected.
The overall layout would be neat and your long written post will not overshadowed the shorter one. Should I have this option on every sites I visit, I be well please because the mouse scroll are getting loose already. There are two option for this widget as stated earlier :

• Selective Expandable Post (provide link to the post page - single post on page of selected topic)
• Peekaboo View (expand/collapse post on the same page)

Credit are given to the creator of this amazing widget, Ramani from Hackosphere. Visit his sites for excellent tutorial on blogger and some iPhone applications he added on his site. Show me Hackosphere.

Well, let`s get along with it.

Selective Expandable Post (the ones I`m using).

Step 1 - Back up your original template

• Whenever your tries to customize your blog template ALWAYS save the original template into your computer. In case of anything goes wrong either with the code or the after-effect are worse, you can always revert back to the original template before you applied the editing.
• To back-up your Blogger template, go to Layout > Edit HTML and click on the "Download Full Template" link near the top of the page. You will be prompted to save a copy of your blog template as an XML file to your computer. Be sure to save this to a location where you can easily find it if required.
  
• To restore to the original setting (before editing), simply upload the template using the upload form located on the same page.
• Or, a quick method I always use. Check Expand Widget Template option and copy all the text (Ctrl + A) in the scroll bar box and save it onto any simple text application (Notepad, Wordpad, etc). In case of mishap, simply reverse the process. - useful when you are going to restore in between editing time.

Step 2 - Start adding the codes

• Find the </head> tag (use Ctrl + F on Firefox for quick find), and paste the following code BEFORE the tag.

<b:if cond='data:blog.pageType != "item"'>
<script type="text/javascript">

var fade = false;
function showFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost") {
if (fade) {
spans[i].style.background = peekaboo_bgcolor;
Effect.Appear(spans[i]);
} else spans[i].style.display = 'inline';
}
if (spans[i].id == "showlink")
spans[i].style.display = 'none';
if (spans[i].id == "hidelink")
spans[i].style.display = 'inline';
}
}


function hideFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost") {
if (fade) {
spans[i].style.background = peekaboo_bgcolor;
Effect.Fade(spans[i]);
} else spans[i].style.display = 'none';
}
if (spans[i].id == "showlink")
spans[i].style.display = 'inline';
if (spans[i].id == "hidelink")
spans[i].style.display = 'none';
}
post.scrollIntoView(true);
}

function checkFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
var found = 0;
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost") {
spans[i].style.display = 'none';
found = 1;
}
if ((spans[i].id == "showlink") && (found == 0))
spans[i].style.display = 'none';
}
}

</script>
</b:if>

• OR, If adding this code failed for some reason (incorrect line breaks, etc). I`m sorry and use the code from this site (- link from the original post on Hackosphere).
  

Step 3 - Find this section of code and add following

• Find this particular div for post-body and add the codes in orange. Check Expand Widget Template to find the section mentioned.
  

  <div class='post-body'  expr:id='"post-" + data:post.id' >

<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>

<span id='showlink'>
        <a expr:href='data:post.url'>Read More......</a>
       </span>
       <script type='text/javascript'>
         checkFull("post-" + "<data:post.id/>");
       </script>
     </b:if>

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

• Change Read More...... section for your desired text on link that brings you to the post page.
  
• Preview your template (nothing will happen but if error occur when editing the codes, you will unable to preview your page. If so, please repeat steps or comment below). Save upon completion.

Step 4 - Format the post template

• Go to Setting > Formatting on your blogger Dashboard menu and look for post template form on the page. Copy and paste the following code below.

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

• Save upon completion.
  
• The next time you write a new post replace purple portion with summarize post and replace green portion for the rest.
• You can also edit previous post using the same method.
• Voila!
  

This hack provided will make you post summarize on your main page and will bring you to the post pages upon clicking the read more link. I chose this because it will make visitors to leave a comment easier.
Thanks again to Ramani from Hackosphere for this great hack. If you like to apply the another method of summarizing post mentioned earlier which make the post expand/collapse on the same page, use Peekaboo version. Show me this hack.

That`s all. Thank you and happy customizing.

More topics on ikmalTips.