This tutorial was recently updated.
There are plenty of ‘Read More’ hacks for Blogger on the web; however, not all of them create automatic post summaries with thumbnails for each post. This is the type of hacks I used in my latest template, Whiteness. Since it has had quite a good reception for its simplicity, its usability and its automatic ‘Read More’ hack, I thought it would be a good idea to explain the script I used.
Important: I am not, by any means, the original creator of the hack here presented. I first saw it in a post from BloggerSphera and have since worked on/with it.
Installation
There are two main HTML codes we need to add to our templates. These should be added from ‘Edit HTML,’ in our Blogger Dashboards, with the widget templates expanded.
The Script
We first need to install the script. To do this, we must add the following code, before </head>:
<script src='http://quiterandom.com/js/summaries/post-summaries.js' type='text/javascript'/> <script type='text/javascript'> summary_noimg = 250; summary_img = 250; </script>
I’ve uploaded the script to my server, but we can always download it and upload it to our own host or free hosting service, or check other useful solutions.
The Summaries
We must now replace the default post bodies for the actual post summaries and thumbnails (in all the pages different from the individual posts.)
Look for the following line:
<data:post.body/>
and change it for this:
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary-" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary-<data:post.id/>");</script>
<a class='readmore' expr:href='data:post.url'>Read more »</a>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
The highlighted text in red is the one appearing in the link next to the summaries. ‘Read More’ is the most common phrase, but we can always change it for ‘View full post,’ ‘More,’ or any other text. We can even use images.
Customization
The Summaries
To determine the number of character to be shown in the post summaries, we must change the number next to the variables we added first (right below the script):
summary_noimg = 250; — Defines how many characters will be displayed in posts without thumbnails. summary_img = 250; — Defines how many characters will be displayed in posts with thumbnails.
The Thumbnails
In order to style the thumbnails, we need to copy and customize the following code, right before ]]</b:skin>:
.post .post-body img.post-thumbnail {
float: left; /*Defines whether the thumbnail will float to the left, to the right, or not at all.*/
height: 120px; /*Defines the height of the thumbnail.*/
margin: 0 5px 10px 0; /*Defines the margin.*/
width: 120px; /*Defines the width of the thumbnail.*/
}
The ‘Read More’ links
To style the ‘Read More’ links, we need to copy and customize the following code, right before ]]</b:skin>:
a.readmore {
/* CSS properties go here */
}
Demo
You can take a look at the result right here.