Blogger Tip: Expandable Posts
Today I added the ability to display expandable posts on my blog. What's an expandable post? Let's take a step back and talk about posts. A blog post is another name for an article written for a blog. Normally all articles, or posts, appear in full on the main page. An expandable post is a post that displays a summary on the main page, and offers a link to another page for the full article. For example;
Expandable posts keep things cleaner on the main page. I plan to use them for the larger posts (articles).
For my fellow Google-Blogger blog users out there, here is how I built my expandable post capability;
1. From the Layout Tab of your Blogger Dashboard, Select Edit HTML.
2. Make a backup copy your Template. This is critical. Changing your template incorrectly can be detrimental to the health of your blog!
3. Check the Expand Widget Templates box.
See the graphic below for a summary of Steps 1-3.
4. Within the HTML, find the code;
</head>
5. Right before the </head> tag, past the the code from <THIS PAGE>.
6. Look for the code <data:post.body/>.
7. Replace it with;
<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>
8. If you are using a standard blogger template, you may need to perform this step.
- Find <div class='post-body'>
- and change to <div class='post-body' expr:id='"post-" + data:post.id'>
9. Lastly, from the Setting, Formatting menu, add this code to the Post Template Box
Type Your Post Summary Here
<span id="fullpost">
The Remainder of Your Post Goes Here
</span>
For example;
Now each new post will be ready for a Post Summary section and a Post Remainder section.
Special thanks to Ramani at Hackosphere.com for this tip! If you decide to use this tip on your blogger blog, be sure to add a link to Hackosphere to your sidebar in return.
10 Responses to Blogger Tip: Expandable Posts
thank you!
this is the only expandable post hack that has ever worked for me
cheers :)
worked for me too, but is there any way to keep it from showing "read more" when there is nothing below the fold?
watercat, no way that I know of other than either manually putting in the SPAN tag or not putting in the SPAN tag.
Wow thanks for the expandable post tutorial!
I tried 6 or 7 tutorials and yours was the only one that worked for me.
Thanks pal. I apppreciate it
Thanks! Worked like a charm!
Hi this still works the same way right? It opens a new page that only shows that 1 post it doesnt actually expand open on the page?
Mkcoy, correct, it does not expand on the open page. It opens the full article on a new page.
Thanks for the help but even when I don't want the "Read me" link it automatically comes up. I haven't even entered the (span) but the read me link shows up. Is there some way to remove it.
Kisnet,
My experiece has been that the Read More… only appears when I add the starting SPAN tag. For example span id="fullpost". Without the opening SPAN tag, you should not get the Read More… prompt on your posts.
I hope this helps.
Thanks Tim for the help but Even when I don't enter the span id="fullpost" the Read Me post automatically comes up. I have tried on my test blog and it still shows up. for eg. http://kiskisnet.blogspot.com/
Something to say?