With little bit of modifications to your Blogger Beta template you can easily implement expandable post summaries in your blog main page. Expandable posts gives very professional and elegant look to your blog. You can hide most of the detailed content from main page and display them when the page of the post is opened. 
If you observer my blog, voting widgets are displayed on my post links and not in my main page. Also, most of the images in my posts are shown only in the actual post links only. Moving bandwidth intensive content to posts’ pages loads your main page very fast.
Let us see the steps to be followed for modifying the template to implement this
- Log in to your blogger account select Layout of the blog which you want to modify
- Navigate through Template –> Edit HTML
- Take backup of your template by clicking Download Full Template. This backup will help you if you want to revert to old template
- Search for ]]></b:skin> in your template HTML and paste the below code in between ]]></b:skin> and </head>
- Save your template and click on select Expand Widget Templates
- Search for <data:post.body/> in the template HTML and paste the below code after <data:post.body/>
- After pasting the code , your template should look like as shown in the following image.
- That’s all. Your template is modified to show expandable posts.
- Now in every post, the content which you want to show only in post’s page should be included between <span class=”fullpost”>This will be shown only in post’s page</span>.remenmbering code every time is not easy for every one ,so for this also there is one trick .
- Go to Setting>> Formatting Scroll down yours cursor and put below code in Post Template.
<span class="fullpost"> </span>
- Post a test article using the following HTML to see your blog working as expected :D
Click Here To Get The Code:D
<!-- Code to show "Read the rest of this entry >> " Link (Begin) -->
<b:if cond='data:blog.pageType != "item"'>
<span>
<a expr:href='data:post.url' style='color:#0000FF; text-align:right; font-weight:bold; text-decoration:none'>Read the rest of this entry >> </a>
</span>
</b:if>
<!-- Code to show "Read the rest of this entry >> " Link (End) -->
Another thing you must have to care about that is the part of post you want to show in home page is writen above <span class="fullpost"> and the part you do not want to show in homepage is written below<span class="fullpost"> as shown in below image.;)
- Read More Feature In Blogger
- Blogger Hacks-Wrap adsense text ads on left and right side or in between blog post of blogger.com
- Change Blogger Title Tags To Increase Page Rank
- Blogger Archive Hacks -Show Blog Post Headers In Archive
- Adding Or Embedding Comment Box Below Blogger Post
13 Responses to “Blogger Hack - Expandable post summaries for professional blog design”
Please Wait
Leave a Reply
Thanks for sharing this wonderful hacks. In future, I would like to read more about your hacks )
I tried several times as per se but I do have problem with the hidden post. Read the rest of this entry which is under < a href …… is not shown!
Thanks for the tips….really helpful for newbies like me.
It works…thank U…
how to add pics using edit html in new post
Hello sir ,
pls email me 
How to make only post title visible when user click on lable
it worked!Thanxooo!
It’s a great hack, but all my old hacks have that “Read the rest of the entry link” when there isn’t any more to read. Is there a way that I can add it only to new posts and not all?
Thanks.
massively helpful! thanks!
I have the same issue as seouleats — the shorter posts all say “read the rest of this entry” - is there a way to fix that?
you have to edit the html of your post before publishing short posts…
delete the
HI,
Im also having similar probs as them. How do I edit the “read the rest of this entry” to different ones in every post?
you can change “read the rest of this entry” to any othertext like “continue reading ” etc rite inside the code Check above code and edit all whre you are seeing “read the rest of this entry”