21. Creating Expandable Blog PostsBEFORE 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.
|