ikmalTips : summarize blog post on blogspot ( II )

Earlier I post a topic about how to summarize blog post on the main page. This is the extension for the post title summarize blog post on blogspot (I). In this version of post I`m going to post how to summarize post using expand/collapse method.
This are however NOT my creations, instead it`s a creation by a great developer named Ramani from Hackosphere. Visit his site for more hacks and iPhone application created by himself. Don`t have an iPhone ? Get one, it`s cool !

This version of post summarizing called Peekaboo View. One the code was correctly implemented on your template. Your blog post will no longer shows all your written post. Instead it provide link at the bottom of summarize post and will expand/collapse on the same page.
If you prefer the links direct you to the post page, check out my post mentioned earlier. Okay. Let`s get on with the editing.

Peekaboo View (expand/collapse post)

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. Please note that there may not be uncustomized-post-template word on your template. It will just work fine.
  

<b:includable id='post' var='post'>
<div class='post uncustomized-post-template' expr:id=' "post-" + data:post.id'>
<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'>

<b:if cond='data:blog.pageType == "item"'>

<p><data:post.body/></p>

<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p><a href='javascript:void(0);' expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"'>Read More...</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a href='javascript:void(0);' expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"'>Summary only...</a></p>
</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... and Summary only... section for your desired text on link that expand/collapse the post.
• 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.
• Done !
  

Kindly leave comment below for any question/difficulty occur.

That`s all. Thank you and happy peeking.

More topics on ikmalTips.