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>


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>


About the Author

Rohit Langde is Founder and Editor-in-chief of Blogsolute. Tech Blogger by Passion & Profession | Mechanical Engineer by Qualification | Introverted Geek by Choice

11 Enlightened Replies

Trackback  •  Comments RSS

  1. dinu says:

    it won’t work on my blog –
    I get this error:

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

  2. Wasim Mughal says:

    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!


  3. JORP says:

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

  4. vivek says:

    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.

  5. Sachin says:

    Thanks a lot…

    good one..

  6. Maan says:

    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;

    function removeHtmlTag(strx,chop){
    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.



  7. buhth says:

    Thanks working great on my blog

  8. sekar says:

    pls help me

    redmore with thumb not working my blog

  9. can you tell if i want only auto read more upto some word limit only and Show date as thumbnail
    Visit my blog

  10. Shingi says:

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

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

Post a Reply

Your email address will not be published. Required fields are marked *