making expandable blog posts in Blogger
MOST IMPORTANT NOTE OF ALL: This was written for the original Blogger. I have not updated this for Blogger Beta. I have no plans to update this for Blogger Beta.
NOTE: A more step-by-step version of this post, with screenshots and what not, is Topic 21 in Chapter 3, "All About Posting," in my
book on Blogger,
Sams Teach Yourself Blogging in a Snap.
If you're a
Blogger user and have always wanted to use expandable posts, you've come up short. Or, if you're
Scrivener, you asked me how to do it and then I didn't get around to writing a post about it for
months. The Blogger Help entry, "
How can I create expandable post summaries?" leaves something to be desired, especially for users unfamiliar with DOM, CSS and JavaScript—you know,
most of the Blogger user base.
What I've compiled is a post that shows one method for achieving expandable posts in Blogger, so that the link to "read more" (or whatever text you use) is only shown in a post when
you decide to show it. I did not come up with the JavaScript snippet—I got it from
this fellow and just added a
very wee bit of info and explained what the code was doing.
The information in this post may not work for everyone. I have not tested it backwards and forwards and inside out (shame on me), but I have tested it in Firefox and IE; caveat emptor. Before you get started, be sure that "post pages" are selected in your Blogger settings.
The first modification is to your Blogger template. Within the style sheet, which lies between the <style> and </style> tags, add the following lines:
<MainOrArchivePage>
span.fullpost {display:none;}
</MainOrArchivePage>
<ItemPage>
span.fullpost {display:inline;}
</ItemPage>
This is a mixture of Blogger code and standard style sheet entries. Since this is being placed in the Blogger template, two conditional Blogger template tag pairs are used: <MainOrArchivePage></MainOrArchivePage> and <ItemPage></ItemPage>. Based on these conditions, Blogger will print a different span.fullpost style sheet entry on a main/archive page (e.g. the page with a long list of posts on it, either the main page of the blog itself or a per-week/month/whatever archive page) than it will on an item page (e.g. an individual blog post. Thus, we are conditionally going to define the span.fullpost entry as either displayed or not displayed. We will discuss this in a moment, but first we need to make a few more modifications to the Blogger template.
The next modification should be placed after the closing style tag (</style>) and before the closing head tag (</head>). Add the following lines of code:
<script type="text/javascript">
var memory = 0;
var number = 0;
</script>
These lines of code initialize two JavaScript variables, memory and number, and set their initial values to 0. These variables will be used in the JavaScript code snippet that determines when to show the "read more" link.
Next, scroll through the template code and find the area where the individual elements of the blog posts are defined. Look for this Blogger template tag:
<$BlogItemBody$>
Directly after it, place this Blogger template tag/JavaScript snippet:
<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="[your class]" href="<$BlogItemPermalinkUrl$>">[your text]</a><br>');
}
memory = number;
</script>
</MainOrArchivePage>
This bit of JavaScript will only be printed to main/archive pages. All it does is scan through the HTML used in that post, and collects all the span tags. It examines the span tags to see if any of them are defined with the class of "fullpost"—this was defined previously in the style sheet and will be used within the blog post itself. If it encounters a <span class="fullpost"> element, it increments one of those placeholder variables you saw earlier (number, to be exact). When it has finished looking for span tags, it compares this potentially-incremented number with the other placeholder value (memory). If they are different, meaning that number has been incremented because a <span class="fullpost"> element has been found, then it produces a link. That link is your "read more" link.
Let's look at the line that writes the link to the page:
document.write('<a class="[your class]" href="<$BlogItemPermalinkUrl$>">[your text]</a><br>');
The following items should be replaced:
- class="[your class]" should either be removed or replaced with whatever class you use for your links.
- [your text] should be replaced with whatever you want to use as the "read more!" text.
NOTE: Because all this is placed two single-quotes in the JavaScript document.write() method, you must escape any single-quotes you use in [your text]. In other words, if [your text] is: Wait! There's more then what you need to type for [your text] is Wait! There\'s more.
I created a simple little button style for use with this particular link. It has four parts: sitting there as a link (unvisited), sitting there as a link (visited), when you mouseover it, when it's being clicked. The (admittedly verbose, but at least you're sure just what's what) style sheet entries are:
a.readmorebutton:link, a.readmorebutton:visited {
float: left;
margin: 2px 2px 2px 2px;
padding: 2px;
width: 115px;
border-top: 1px solid #CCCCCC;
border-bottom: 1px solid #000000;
border-left: 1px solid #CCCCCC;
border-right: 1px solid #000000;
background: #CCCCCC;
text-align: center;
text-decoration: none;
font: normal 10px trebuchet ms, verdana, sans-serif;
color: #194B77;
}
a.readmorebutton:hover, a.readmorebutton:active {
float: left;
margin: 2px 2px 2px 2px;
padding: 2px;
width: 115px;
border-top: 1px solid #CCCCCC;
border-bottom: 1px solid #000000;
border-left: 1px solid #CCCCCC;
border-right: 1px solid #000000;
background: #EEEEEE;
text-align: center;
text-decoration: none;
font: normal 10px trebuchet ms, verdana, sans-serif;
color: #194B77;
}
You can use this as a base for your own style; mine's pretty simple and of a fairly boring color. I then use the text "continue reading..." on the face of the button, which is really just where the [your text] goes. So, if you were to use this style and the same link text as I do, the link would look like this:
<a class="readmorebutton" href="<$BlogItemPermalinkUrl$>" >continue reading...</a><br>
But really, be creative on your own. Much more fun.
Now, the moment you've all been waiting for: what to do in your post. Well, type it up. Then, whichever part you want to be in the extended entry, surround it with: <span class="fullpost"></span>. For example:This is test. Blah blah blah. Here I am, wittering about.
<span class="fullpost">Here is the extended entry, where I prattle on about things.</span>
That's it. The "read more!" link will have been generated at the template level, because the JavaScript will have come across a <span class="fullpost"> tag. The generated link will be to the individual post page, where the user goes to read the extended entry. That brings up another thought—providing a link back to the main page of your blog. Sure, users can just hit the back button, but when I enclose my extended entry in the <span class="fullpost"></span> tag pair, I also add a link back home:This is test. Blah blah blah. Here I am, wittering about.
<span class="fullpost">Here is the extended entry, where I prattle on about things.
<a class=readmorebutton href="[my URL]">go to main page</a></span>
Voila. Don't forget to republish your entire blog after making template changes.
technorati tag: blogger
go to main page
