Best links, fun photos and great videos. Free music, Share, discover, bookmark, and read stuff that's important to you.

Thursday, March 22, 2007

How to split post on blogger.com

Your blog's main page usually shows the entire content of each post. If your posts are usually more than 2 paragraphs, then your visitor will find it difficult to quickly find the topic of interest to him because he needs to scroll down a lot. This is where expandable post summaries helped in the old Blogger. This hack serves the same purpose for the new Blogger and more! That is, main page will show only post summaries and when you click "Read more", the full post appears in the main page itself (Peekaboo view)!! I got some requests to do such a hack and I managed to get it working. Later, Hans improved it by adding a "Summary only" link with which you can collapse the post back to summary. Together, we also made the "Read more" link to show up only for the posts that have a summary. This is an amazing hack but you need to be careful while changing your template. If you are not familiar with HTML, I strongly suggest you to get help from somebody who knows HTML while applying this hack. Here are the steps to follow.


Step 0: Download and save your template so that you can go back to it if there is any problem with this hack (Important!)
Step 1: Find the </head> tag in your template and add this line before it (if you have not already done so).

<script type='text/javascript' src=
'http://www.anniyalogam.com/widgets/hackosphere.js' />

Step 2: Find the includable called 'post' and copy/paste the changes highlighted in red in this page (Be very careful and avoid mistakes. Note that the word "uncustomized-post-template" may not appear in your template but that's fine.). To find the includable, you could search for the term id='post'. If you are not able to find it, you may not have expanded the template. Select the checkbox named "Expand Widget Templates", which is right above the template code, to expand it into more code.
Step 3. Goto Settings->Formatting and at the bottom, you will find the text box provided to specify the "Post template". Copy/paste these lines into that text box and save the settings. (Please DON'T type these lines yourself because you might introduce some spaces that will break the functionality)

Type your summary here
<span id="fullpost">
Type rest of the post here
</span>

If you create a new post now, it shows you clearly where to type the summary and where to add the rest of the post. It is important to make sure that the /span tag above is at the end of the post. To ensure this, use Edit Html tab instead of Compose tab while typing the post. After typing, you can go to compose mode and change fonts/colors etc. Please note that you could also divide some (or all) of your old posts into summary and full post by editing them. The "Read more" link will appear only for the posts that have been divided like this.

9 comments:

GreekCharmed said...

Does not work for me at all.
I made the changes in template and when I post both the summary and the full post are visible.

Ståle said...

Thank you!

This worked fine when I tried it. As you said, it required careful reading. The insertion of the extra code was a bit tricky, as there were some differences between the example we were to copy from and the actual code.

klkatz said...

thanks.. this is a very easy insert... however my "read more" link doesn't seem to work - any suggestions?

go to http://ushistoryblog.com to see.

klkatz said...

FYI - i had accidentally overwritten the script tags to be placed above the header tag, this forced the 'read more' link not to work... all is good now.

very easy, thanks for sharing.

johnH said...

awesome. thanks all!

Syarif said...

i cannot finding "Expand Widget Templates" or expand code setting. Help me,please?

Nonconformist said...

YATAAAA!

thank you verry much
Needed this

Shifting Sands said...

Thankfully the tag feature in the new blogger has eliminated the need for this

Bort said...

Followed directions exactly and they do not work. Nothing happens when clicking the "read more" link and everything in the post is doubled.