Section 21. Creating Expandable Blog Posts | Blogging in a Snap (Sams Teach Yourself)

21. Creating Expandable Blog Posts

BEFORE YOU BEGIN

15 Creating a Post Using the Blogger Editor in Compose Mode

16 Creating a Post Using the Blogger Editor in Manual Mode

SEE ALSO

30 Identifying Elements in the Blogger Template Source

Some of us are rather verbose bloggers, and some readers are turned off when a very long post is fully visible on your blog index page. The solution to this is to modify your Blogger template so that you can create expandable blog posts. Expandable blog posts are that those that contain a link to the full version. When expandable blog posts are used, the reader will see only a small portion of the texta teaserfollowed by a link that will take them to the individual post page.

Please follow these steps closely because even the smallest typo in your code will cause it not to work. Before you begin, ensure that your selection for Enable Post Pages? is Yes in your Archiving settings. If it is not, make it so and republish your blog before continuing.

WEB RESOURCE

http://nofancyname.blogspot.com/2005/02/making-expandable-blog-posts-in.html

If you want to cut and paste the code rather than type it, you can visit my original blog entry on the subject.

The first modification you must make is to your Blogger template. You will learn more about working with the Blogger template in Chapter 5, "Working with Blogger Templates," so for now just follow closely. To get to the template editing interface, select Change Settings from your Blogger Dashboard, and then click the Template tab. You will see a textarea that contains your template code.

21. Creating Expandable Blog Posts

Within the stylesheet portion of your template, which is near the top of your template and is enclosed between the <style></style> tag pair, add the following lines:

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

This code is a mixture of Blogger code and standard stylesheet entries. The two conditional Blogger template tag pairs are <MainOrArchivePage> </MainOrArchivePage> and <ItemPage></ItemPage>. Based on these conditionswhether the user is viewing the main page or archive page or whether the user is viewing an individual post pageBlogger will print a different style sheet definition for the span.fullpost class. With these stylesheet entries, you conditionally define the span.fullpost entity as either displayed or not displayed, depending on which page is viewedyou want the full entry to be displayed on only the individual post page.

The next modification to your Blogger template occurs directly 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 sets their initial values to 0. These variables will be used in a JavaScript code snippet that determines when to show the link to the full post.

Next, scroll through your template code and 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 href="<$BlogItemPermalinkUrl$>">[link text] </a><br>'); } memory = number; </script> </MainOrArchivePage>

By surrounding this bit of JavaScript with the <MainOrArchivePage> </MainOrArchivePage> tag pair, you ensure that it will be printed on only main or archive pages and not individual post pages. This bit of JavaScript scans through the HTML used in a particular post, and collects all the <span></span> tags used by the author. The code then examines those <span></span> tags to see whether any 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 the JavaScript encounters text surrounded by the <span ></span> tags, it increments one of those placeholder variables you saw earlier (number, to be exact). When the JavaScript has finished looking for <span></span> tags, it compares the value of number with the other placeholder value (memory). If these numbers are different, meaning that number has been incremented because a <span ></span> element has been found, the JavaScript produces a link. That link is your Read More link.

Let's look at the line of JavaScript that writes the link to the page:

 document.write('<a href="<$BlogItemPermalinkUrl$>">[your text] </a><br>');

You should replace [your text] with whatever you would like the link text to be. Additionally, you can add any style to the <a></a> tag by using a class attribute. After these changes are made, click the Save Template Changes button, and then click the Republish button. You can now move on to creating a post that utilizes this new functionality.

The following steps assume that you have logged in to Blogger and selected New Post from your Blogger dashboard.

1.	Add Code to Create the Link to the Expanded Entry After you have typed the opening of your blog entrythe teaser text, if you willplace the `<span >` opening tag in the spot where you would like to see the link to the full post. When the post is published and viewed, the link to Read More (or whatever text you use in your template) will be located wherever the `<span >` opening tag is placed.
2.	Add Code to Print a Link back to the Main Page After the `<span >` opening tag, type the remainder of your blog post. Before typing the closing `</span>` tag, create a link that will take the user back to the main page of your blog when they are finished reading your extended entry. For example: <p><a href="http://yourblog.blogspot.com">go home now</a></p> After this last bit of code is added, click the Publish Post button to publish the post to your blog.
3.	Click to Expand the Post and Read Additional Text When your blog post is published, you will see the link to the full post appears where you placed the `<span >` opening tag while typing your text. You will also notice that all the text you typed after the `<span >` opening tag is hidden from view. The user will see this only if they click through to the expanded entry.
4.	The Expanded Entry Is Displayed When users click on the link to the extended entryin this case, a link that says `continue reading...`they will be taken to the individual post page. The link to the extended entry will be replaced by the text of the extended entry itself.
5.	Click to Return to the Main Page In the extended entry portion of the post, you can see the link created by performing step 2adding a link back to the index page. Clicking this link will take users back to your index page, where they can continue reading your other blog posts without the clutter of a long blog post that takes up most of the visible space.