Automatic Expandable Post summaries (Read More hack) in Blogger

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 .

We can (and must, actually ) 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:

and change it for this:

  

  
  Read more »

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 */
}