How to enable post summary in old-classic blogger and new-layout blogger?

Since we started Blogging Customization Series, you and I have learned many things together in terms of blog tweaking.

Stuff such as:
Branding your site or your blog with a FAVICON and why install a FAVICON
Quickly add a recent comment widget
Step by Step procedure of Hiding the Blogger Navbar
How to add custom header

These tweaks are based on my experience and what I’ve learned so I can guarantee that all these are working. If it happens that it didn’t work please dont hesitate to drop a comment here so we can check and make it work together. You can see these blog widgets and hacks applied and used here in this blog so feel free to navigate and peruse if you want to.

Lets now move on for today’s topic and this is about how to enable POST SUMMARY in your blog specifically for blogger platform.

What is the Post Summary by the way? Peter Chen has a simple definition:

Expandable post summary is the term applied to blog posts where only short snatches (usually the first few paragraphs or sentences) are displayed with a link at the bottom that may say, usually, “Read More…” which if a reader is interested and when clicked, takes the reader to the full post.

So, Post summary is the clickable “Read More…” that you usually see on the main page of the blog or site. If you are not satisfied yet and want to see live example of the expandable post summary in action, go click this link>> HOME (you will be directed to the main page, so if you want to view the example in new window try clicking the link with your middle mouse instead to open the link in the new tab). Once the blog page is loaded you can see every entry having “Continue Reading Here..” the end of each post summary.

So What!? Why should we enable the Expandable Post Summary?
When I started blogging four months ago, this is the most important feature that I believe should be installed in my blog once and for all. I was so frustrated during that time that I spent many sleepless nights just to make this expandable post summary work with this blog. I even post it in mylot to seek help. There are many blog hack articles teaching you how to enable this cool hack but I can’t make it work with my blog. I found out later that those hacks are for New Blogger , those blog that are already using the LAYOUT feature of blogspot, and I’m a “Classic Blogger” the term I’ve learned from Andianka and SarahCada this blog uses Classic Template in Blogger platform.

What is with this expandable post that I demand it that much?
Its because I think that:
By enabling this feature, my blog will be more neat and easy to navigate.
Showing the summary only on the main page of the blog will promote more navigation, thus, visitor that landed on the main page or archive page will quickly browse all the summary of the entry and they will just click the topic that interest them. If I didn’t use the post summary this could lead us in a longgggggggg page… until you got tired to move the page slider downward just to browse all. Visitor will not most likely do that because we all know that in terms of looking for information we are short-tempered. What they want to see, must be seen immediately!..

OK I got your point! Will you stop your lecture and just tell us how to enable the post summary.
As I’ve said there are numerous articles out there for blog that use LAYOUT to enable the expandable post summary. Here I will give you the useful links that will give you a step by step procedure for this hack for those who are in LAYOUT mode template:

1. How to create expandable post summaries that can be found at blogger help
2. Ramani’s Expandable Post summary for New Blogger
3. Hackosphere Expandable Post with Peek-a-boo view

Please check the above links and use the procedure that suits your taste.

And for the finale!.. the one I use here in my blog. Here I will give you the step by step how to use expandable post summary.. this is for classic blogger so it is advisable for you to create a back up of your existing template first before you use this code. I will also assume that you know atleast the basic of html so that you will not mess up with your code. Just in case something goes wrong, retrieve the template that you back up and start all over again until you get it right. A million thanks to Entrepinoys Blog for the code tweak. Ok here it goes:

NOTE: Edit your template html and insert the code colored RED.

1] Put the following codes just before the </style> </head> tags

=========== insert this =====================
<MainOrArchivePage>
span.fullpost {display:none;}
</MainOrArchivePage>

<ItemPage>
span.fullpost {display:inline;}
</ItemPage>
========= end insert ========================

</style>
</head>

2] Put the following codes right after </head> tag

<script type=”text/javascript”>
var memory = 0;
var number = 0;
</script>

3] Put this block of codes right after the <p> <$BlogItemBody$> </p> tags:

<!– READ FULL ENTRY HACK –>
<MainOrArchivePage>
<script type=”text/javascript”>
spans = document.getElementsByTagName(’span’);
number = 0;
for(i=0; i < spans.length; i++){
var c = ” ” + spans[i].className + ” “;
if (c.indexOf(”fullpost”) != -1)
number++;
}
if(number != memory){
document.write(’<a href=”<$BlogItemPermalinkUrl$>” title=”permanent link”>READ FULL ENTRY</a>’);
}
memory = number;
</script>
</MainOrArchivePage>
<!– READ FULL ENTRY HACK –>

4] In every posts, add these tags to where you want the content to be cut:
<span class=”fullpost”> then put the tag </span> at the very last line of the content.
Make sure that you’re in HTML editor before you insert the tags. You can also refer to Ramani’s illustration in putting this code in “post template” just in case this instruction unclear to you.

There you go, the step by step guide for EXPANDABLE POST SUMMARY for OLD and NEW BLOGGER.

In our next post we will examine How to add TAG CLOUD . If you are not yet subscriber , you may consider SUBSCRIBING OUR FEED now so you can receive Blogging Customization tips and updates. Stay Tuned…

Liked this article? Keep up to date by SUBSCRIBING OUR FEED
Have something in your mind? share with us & leave your comment
Don’t hesitate to drop an e-mail if you know any article that can be featured here.
For future reference right click here to bookmark this page
********************************************************************