Saturday, June 24, 2006

Expandable post summaries

Several months ago I came across instructions on how to insert conditional post summaries on my blog - put simply, if a post I wrote was short, I included a < spanclass="shortpost"> tag in my post, and it displayed everything on the main page, and if it was a long post I included a < spanclass="fullpost"> tag and only a small section of the article appeared on the main page, along with a link to click to view the full article. It required some tweaking of the template but nothing very major, as I recall.

Not long ago I completely redid my template, as I was having massive style issues in IE, and I completely forgot to note down the template codes to include conditional expandable post summaries. I have tried googling for the information but can't find the original instructions (or any new ones which work).

Can anyone help please?

This Post was written by Fahara from Souperior

5 comments:

gerald said...

Here is what you do for blogger:

Add this to your styles section:

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

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


Add this after <$BlogItemBody$>

<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 class='read-more-link' href='<$BlogItemPermalinkUrl$>#more'>Continue reading '<$BlogItemTitle$>'</a><br>");
}

memory = number;
</script>
</MainOrArchivePage>

Add this to your post template:

<span class="fullpost"><a id="more"></a>

</span>


When you post, everything before <span class="fullpost"> will appear on the index page and everything inside it will appear only on the post page.

Fahara said...

Hi Gerald, thanks for the advice, I tried it on my style sheet (had to change the script type to "text/css" though, and it sorta works, but I need the script to create a 'click here to read fullpost' link as a footer in the post, I don't want to have to create a brand new link for the bottom of each post linking to the full article - I know it's possible cos I've done it before, any thoughts?

gerald said...

Fahara,

The second chunk of code (after "Add this after BlogItemBody) is what will automatically create that link for you in each post if there is an expandable part to it. If there is no expandable part to the post, this script will know not to show the "continue reading" link.

Fahara said...

Gerald,

I got a computery minded friend to look at why your script didnt quite work (it really didn't - I double checked) it needed the following inserted into the < body> section in the style sheet to set the memory to zero:

< script type="text/javascript">
< !--
memory = 0;
-->
< /script>

I mention this purely for the use of other people who might need to replicate this effect!

Thanks for your help - I have it sorted now :D

gerald said...

Woops, sorry Fahara, I just saw I forgot to copy those lines of code, incidently, mine is a bit different, but regardless, glad it worked out for you:

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