Expandable Entries with JavaScript
You can create expandable entries even if you are not using Blogger. The trick simply makes use of permalink variables, which almost every blogging software supports, as well as JavaScript.
Blogging softwares make use of their own permalink and/or post ID variables. Variables are those tags that act as placeholders for data that are inserted into your blog's content dynamically each time it is read.
For example, Blogger recognizes <$BlogItemPermalinkURL$> and replaces it with the URL of a particular post page. Journalspace provides two variables that reference the permanent post page: The #PERMALINK# variable creates the entire hyperlink with the permanent page's URL and link text, while #ENTRY_ID# refers to just the post ID. WordPress makes use of the %post_id% variable and the more comprehensive <?php the_permalink(); ?> method.
There is no single way of creating the redirection tags that contain the address of the post page and the link text. How you do so depends to a greater extent on your blogging software. If you know how to make use of these variables, then creating expandable posts is a relatively straightforward process.
Here are the steps to create expandable entries in your blog:
There you have it. When the index page loads, all entries containing the <div class="post-hide"> tag will be displayed partially. A redirection link at the bottom of every post points to the permanent post page of the entry in question.
For example, Blogger recognizes <$BlogItemPermalinkURL$> and replaces it with the URL of a particular post page. Journalspace provides two variables that reference the permanent post page: The #PERMALINK# variable creates the entire hyperlink with the permanent page's URL and link text, while #ENTRY_ID# refers to just the post ID. WordPress makes use of the %post_id% variable and the more comprehensive <?php the_permalink(); ?> method.
There is no single way of creating the redirection tags that contain the address of the post page and the link text. How you do so depends to a greater extent on your blogging software. If you know how to make use of these variables, then creating expandable posts is a relatively straightforward process.
Here are the steps to create expandable entries in your blog:
- Create a new class property .post-hide
For this, you need to make two external CSS files, one for the home page and the other for the other pages, both of which contain only the display setting for class .post-hide.
The CSS file for the home page (let's name it home.css) will contain just this code:
.post-hide {
display:none;
}
The CSS file for the other pages (let's name this other.css) will contain just this code:
.post-hide {
display:block;
}
The display value of class .post-hide switches between block and none depending on the document content. It assumes a value of none if the document is the index page (posts are not displayed in full). In pages other than the index, its value becomes block (full posts will be displayed).
The procedure to determine whether a document is the index page and loading the appropriate style sheet can be carried out with JavaScript.
Insert this code in the document <head>, preferrably after the document's main <style> block.
<script type="text/javascript">
<!-- //begin
if (document.location.href ==
'http://myblog.domain.com/') {
document.write('<link rel="stylesheet"
type="text/css" href="home.css">');
} else {
document.write('<link rel="stylesheet"
type="text/css" href="other.css">');
}
//end -->
</script>
The above script checks the document if it is the index page by comparing its URL with the URL of the index page. If the operation yields true, that is, both URL's are the same, then the document is the index page and the home.css style sheet is loaded. Otherwise, other.css is loaded.
This hack works with any blogging tool that makes use of post ID or permalink variables. There is no need for you to work with your blogging software's conditional tags. It is particularly useful in systems that do not provide conditional tags, such as Journalspace.
Of course, you must replace the example URL with the full URL (including the http://) of your blog's index page between the single quote marks and with a forward slash [ / ] at the end (this is important!). Also include the absolute or relative URL of the CSS files if these are not in the same directory as the template.
Tip:If your blog uses a linked style sheet, you can make a copy of it -- one for the home page and the other for the other pages. Add .post-hide { display:none } to the copy for the home page and rename it to home.css. In the other copy, add .post-hide { display:block } and rename it to other.css.
Then, replace the original <link rel="stylesheet"> tag with the above JavaScript code. - Add the redirection tag in the post section of your template, after the post body variable.
Coding this part, as I wrote above, depends on how permalink variables should be used, which is determined in large part by your blogging software. For example, applying Journalspace's post ID variable, the redirection tag could look like this:
<a href="/?entryid=#ENTRY_ID#">View the full post</a>
For WordPress, the following method may be used:
<a href="<?php the_permalink(); ?>">View the full post</a> - The third and last step is adding the <div class="post-hide"> to the post itself. Insert the text that will not be displayed in the home page between <div class="post-hide"></div>. However, because the display value of .post-hide is "block" in the other pages, the post will be shown in its entirety in these pages.
There you have it. When the index page loads, all entries containing the <div class="post-hide"> tag will be displayed partially. A redirection link at the bottom of every post points to the permanent post page of the entry in question.
