HOW TO CREATE EXPANDABLE POST SUMMARIES
This has been covered by a lot of bloggers in many blogs and nowadays can be seen in almost all the blogs. This is a nice trick to show only the summary of posts in your blogs front page and a link to the full post. Users who want to read the rest of the post can click a link to see the full post. This trick is useful when you have much bigger posts or have more contents to show in the front page.
We will see how to create an expandable post summary in blogger using only CSS styles. We are not using any JavaScript or doesn't require and complex coding for this. Just copy the code as shown in this post and paste it in your blog template and you are ready to go.
To achieve this we need to complete three steps and are described as given below. The tree steps contain three components : a CSS Style, a Read More link and some change in the blog settings.
STEP 1 :Back-Up you existing Template. This is extremely important as you are going to play with the code and if something bad happens you can always revert back to your existing template.
If you don't know how to make a backup of your template follow these steps.
STEP 2 : Go to Blogger Home. Navigate to Layout >> Edit HTML.
STEP 3 : Remember to select the check box Expand Widget Templates.
STEP 4 : Find the piece of code as shown below.
STEP 5 : Now replace the above given code with the piece of code as given below. Just copy the code given below and replace the two lines you found in the templates code as said in STEP 4
<b:if cond='data:blog.pageType == "item"'>
<style>span.fullpost {display:inline;}</style>
<b:else/>
<style>span.fullpost {display:none;}</style>
</b:if>
<p><data:post.body/></p>
<b:if cond='data:blog.pageType != "item"'><br />
<a expr:href='data:post.url'>Read more!</a>
</b:if>
STEP 6 : Now after this if whenever you creates a post, you need to include the tags <span class="fullpost">
and </span>
inside your post content like this.
When your post is displayed in the front page it will be like this.This is the summary of my post.
Read More
And when you click on the Read More link it will take you to the page for the post article where the whole article is shown like this.This is the summary of my post.
And here goes the rest of the post content. Read the full post here.<span class="fullpost">
and </span>
tags invisible.
When the user click on the Read More link, it takes the user to the item page where the whole article is displayed and the span style is set as inline
, which shows the whole article to the user.
The part of code which is in BLUE places a link whcih links to the articles page if the page is blog front page.
"Thank You!!! You’ve reached the end of this post. Seeing you made it this far, we hope you enjoyed this post. If so, please consider leaving a comment or subscribing to the feed to have further articles deliverd to your feed reader. You can also follow me on Twitter."
I'm wondering if there is a way that you can have it say something else beside "read more" for only CERTAIN posts...
Meaning... I love that it says read more, but for certain posts that are about music I'd like it to say something different.. is that possible?