Automatic Configurable “Read More” on Blogger

If you just want to show summary of post on frontpage of blogger then unfortunately, you don’t have any option by default. You will need a external script to make it working.

It’s true that, there have been many hacks released to have Read more option on Blogspot or Blogger blogs. Problem with them is that you cannot select the cut-off point and also, there was no support for thumbnail too initially. Here are some scripts which can solve both issues.

This new script, which derives from the “read more thumbnails” (in fact,  its an improved version) has two advantages:

  1. You can choose the cutoff point according to the summary of each post, choosing to show or not show a thumbnail image.
  2. Limit the article’s excerpt is set at a number of words, not characters (and the words will not be cut off).

read more configure blogger

It’s a simple two step operation.

1) Find the following code in your template (with expanded HTML):
<data:post.body/> and Replace it by

2) Insert this before <body>

Settings

Now, you can set up a script to change the following variables:

  • thumbnail_mode var = ‘no-float’;
  • classicMode var = false;
  • summary_noimg var = 60;
  • summary_img var = 50;
  • img_thumb_height var = 150;
  • img_thumb_width var = 220;

Thumbnail_mode determines the variable buoyancy to the left of the image. If you choose ‘no float’, the image will not show thumbnails if you choose to ‘float’ will display a thumbnail on the left of the posts on the homepage.

ClassicMode determines whether all entries are to be cut at the same point or not. It is advisable to change it soon changed to true if the variable value thumbnail_mode to ‘float’.

Var Summary_img and Summary_noimg corresponds to the cutoff of the abstract when your post has no image and when it does, respectively. The value 50, for example, means “50 words”.

Img_thumb_height and img_thumb_width correspond to height and the width of the thumbnails (thumbnail image).

The novelty of this version of the script is that you can put Read more on your posts, just like WordPress.

For Example :

<Summary> <! – More -> <Rest of Article>

Click Here to Leave a Comment Below 11 comments
dinu - August 2, 2009

it won’t work on my blog – http://dinuzara.com
I get this error:

Mesaj de eroare XML: Open quote is expected for attribute “{1}” associated with an element type “type”.

Reply
Wasim Mughal - August 14, 2009

This is benificial article, one can make it facourite.

I also have written some content for this trick, Read My Article HERE

My article tells how to add READ MORE with THUMBNAIL and READ MORE Badge or without Badge!

Must SEE!

Thanxxxx!

Reply
JORP - September 11, 2009

it did not work for my site. i am using HYBRID NEWS blogger template

Reply
Vivek Bandebuche - October 15, 2009

read more option is really helpfull to bloggers beacause when some of the post are too long the readers not satisfy withe long apperance of website…….your suggestion about it is really good…thanks for this post.

Reply
Sachin - February 3, 2010

Thanks a lot…

good one..

Reply
Maan - November 19, 2010

Its perfectly work: follow this instructions,

Go to Layout > Edit HTML in your Blogger dashboard and check the “expand widget templates” box.

Find the closing tag in your blog template, and paste the following section of code immediately before it:

var thumbnail_mode = “no-float” ;
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;

//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i”)!=-1){
s[i] = s[i].substring(s[i].indexOf(“>”)+1,s[i].length);
}
}
strx = s.join(“”);
}
chop = (chop =1) {
imgtag = ”;
summ = summary_img;
}

var summary = imgtag + ” + removeHtmlTag(div.innerHTML,summ) + ”;
div.innerHTML = summary;
}

//]]>

Note in above codes we can change the numeric numbers according to our need

summary_noimg = 430; is post cut height without image
summary_img = 340; is post cut height with image
img_thumb_height = 100; is thumbnail image height
img_thumb_width = 120; is thumbnail image width

Now find this code in your template and replace it with below codes.

createSummaryAndThumb(“summary”);
read more “”


Thanks.

Reply
buhth - April 9, 2011

Thanks working great on my blog

Reply
sekar - June 5, 2011

pls help me

redmore with thumb not working my blog

http://vinayakarkoyil.blogspot.com

Reply
puneet Kapoor - July 3, 2011

can you tell if i want only auto read more upto some word limit only and Show date as thumbnail
Visit my blog technofreak-cooldude.blogspot.com

Reply
Shingi - June 9, 2012

What code should i use to show the caption of the image below the image.

Reply
Jehad Hussein - February 10, 2013

it won’t work I found error:
can’t you sloved it

Reply

Leave a Reply: