Mapiles.com | Your Partner Online

Sometimes, we tend to publish 3 or more posts daily. In effect, due to very long entries, the other post will likely be invisible to the readers. At some instances, the blog owner is forced to create navigational links on the sidebars or even near the header just to expose other articles. Certainly, this requires effort on the part of the blogger.

As a matter of fact, this has been my case. Although I like the idea of exposing my other post both on the sidebar and header, still, I want to have a newspaper like blog wherein the top stories are highly visible. This is the reason why I decided to search the net on how to have expandable post.

Luckily, I found many articles through the search engine but I’ve chosen this simple tutorial from It’s A Fun. And now, you can even attest through my blog if this tutorial has been effective. Absolutely, the tutorial has served it’s purpose.

Below is the complete steps to “Make an Expandable Post in Blogger (Blogspot)”

Pre Requisite: Make sure you have enabled post pages.

1. Go to your blogger setting panel >> Template >> Edit HTML

2. Back-up your template first by clicking “Download Full Template” link (this is a best practice).

3. Check on “Expand Widget Templates”

4. Search for </head> & replace it with following javascript code:

<script type=’text/javascript’>
function truncate_body (postid) {
var id = document.getElementById(postid);
var postbody = id.innerHTML;
var len = postbody.toLowerCase().indexOf(”<br”);if(len>0)
postbody = postbody.substring(0, len);

id.innerHTML = “<p>” + postbody + “</p>”;
id.style.display=”block”;
}
</script>
</head>

5. Search for <p><data:post.body/></p> & replace it with following code:

<b:if cond=’data:blog.pageType != “item”‘>
<div expr:id=’”postid_” + data:post.id’>
<data:post.body/>
</div>
<script type=’text/javascript’> truncate_body(”postid_<data:post.id/>”); </script>
<p>
<a class=’read_more’ expr:href=’data:post.url’><b>Read More…</b></a>
</p>
<b:else/>
<p><data:post.body/></p>
</b:if>

Yes, that’s all. If you have any problem implementing this solution feel free to leave a comment and I’ll get back to you. If you think this will be helpful to our fellow bloggers just link them to this site.