How to make Blogger create expandable posts, with a clickable link to the full post that only appears if the post is clipped
Sometimes my blog posts get really long. Blogger posts this hack to create short posts that include a link to expand to the full post. However, they only gave half the answer, since their solution places a [Click here for full post] link on every post. Quite frustrating on a short post to click that link and find nothing extra.
So, here is my solution to the problem
Add the following code to your Blogger Template between the <head> and </head> tags:
<style>
<MainOrArchivePage>
span.hide {display:none;}
span.show {display:inline;}
</MainOrArchivePage>
<ItemPage>
span.hide {display:inline;}
span.show {display:none;}
</ItemPage>
</style>
Then further down in your template, locate the <$BlogItemBody$> tag within the <Blogger> </Blogger> section. After the <$BlogItemBody$> tag, wherever you want the link to appear, add this code:
<MainOrArchivePage>
<a href="<$BlogItemPermalinkURL$>">[Click here for full post...]</a>
</MainOrArchivePage>
</span>
Yes, that is a closing </span> tag left all by its lonesome without an opening <span> tag. That’s because the opening tag is used within your individual posts.
When you are creating a post, the tag <span class=”hide”> is used around text you wish to hide in your posts, and <span class=”show”> is used to show text in your posts.
For a short post where you want the whole post to display without the [Click here for full post] link, it would look something like this:
This is a really short post where I don't need to hide anything. <span class="hide">
The “hide” tag will wrap around the [Click here for full post…] link in your template (which contains the closing </span> tag), thereby rendering it invisible.
For a longer post where you want to give the reader a tease paragraph, but then hide the rest and show the [Click here for full post] link, it would look something like this:
This is a really long post <span class="hide">where I want the rest of
this sentence to be invisible on the main page, but visible once the user clicks the
link to the item page.</span><span class="show">
Because of the “hide” tag, the text between “where” and “page.” won’t show up on the main page, and then the “show” tag at the end allows the [Click here for full post] link to display.
ADVANTAGES: You can keep short posts short without displaying the [Click here] link.
You can choose how much of a long post to display before the [Click here] link.
DISADVANTAGES: When you post, you have to remember to use those clumsy <span class=”hide”> and <span class=”show”> tags each and every time.
If you have a huge blog (like me) and want to remain consistent, you have to retrofit EVERY post!
Blogger won’t let you save the <span class=”hide”> tag within your Post TemplateUPDATE: Blogger will now let you store <span class=”hide”></span><span class=”show”> in your post template (which would have been is nice, since most of my posts will be short.)
