Automatic post summaries, Auto read me, Blogger Hacks
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 type of hacks I used in some of my blogspot website. Since the template has had quite a good reception for its simplicity, usability, customizability and the automatic ‘Read More’ hack, (actually you can change read more to any word you like) I thought it would be a good idea to explain the script used: how to install it and customize it.
Installation and Customization
There are two main HTML codes we need to add in our templates, so the hack can work properly. These should be added from ‘Edit HTML,’ in our Blogger Dashboards, with the widget templates expanded.
— The first code we need to insert is the script itself, and it should be located before </head>.
(I’ve uploaded the script file to my own server; you can, though, download it and upload it to your own, then replace URLs.)
<script src='http://myinternetninja.com/js/summary-posts.js' type='text/javascript'/>
<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
img_thumb_width = 120;
</script>
We can use the variables that are highlighted in the code above. Here’s the explanation:
var thumbnail_mode = "float" ; — With this you can decide if you want the thumbnail to float to the left (float), or just display it unformatted (no-float).summary_noimg = 250; — Defines how many characters will be displayed in posts with no images/thumbnail.summary_img = 250; — Defines how many characters will be displayed in posts with images/thumbnail.img_thumb_height = 120; — Thumbnails’ height in pixels.img_thumb_width = 120; — Thumbnails’ width in pixels.
— The second code we will add, will replace the ‘default’ post body for the post summary and thumbnail, in pages different than individual posts.
Simply look for this tag:
<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, but we can always change it for ‘View full post,’ ‘More,’ or any other text. We can even use images, instead of text!
- If we’d like to style these ‘Read More’ links, all we need to do is add the CSS properties to the following element:
a.readmore {
/* CSS properties go here */
}(All of this, of course, before </b:skin>.)
And that’s it, i hope that helps!
