Auto read more functions automatically shorten your post and create a thumbnail of an image which is present in the post.It also helps to load page faster.It also shows and image thumbnails which helps to attract the readers.I have also added the auto read more to my blog.You just have to add two codes to blog no need jquery or css.Now lets see how to add auto read more with thumbnails for blogger.

How To Add Auto Read More With Thumbnails For Blogger ?

  • Go to Blogger Dashboard > Design > Edit HTML.
  • Now find </head> tag
  • Place below code just before/above </head> tag.
<script type='text/javascript'>var thumbnail_mode = "no-float" ;
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}

//]]>
</script>

If you want to change image thumbnail size then find these numbers 100 and  120.

  • Now find   <data:post.body/>  and replace it with below code.
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'> createSummaryAndThumb("summary<data:post.id/>");
</script>
<a class='more' expr:href='data:post.url'>Read more ...</a>
</b:if>
</b:if>


Now save it.
If it doesn't works for you then mention it in comments.I'll glad to help you...

Post a Comment

  1. Need Help, I have 2 post bodies, I think I need to replace the first but dont know what to replace, its to large and I dont know which part of it to replace...

    ReplyDelete
    Replies
    1. try the first one if doesn't work then try second...

      Delete
  2. i too had two post body, replacing the both shows an error

    Error parsing XML, line 1381, column 3: The element type "script" must be terminated by the matching end-tag "".

    ReplyDelete
  3. this data post bodies are only visible while expanding the widgets

    ReplyDelete
  4. i found error in detail while only replacing the post body no error found but while putting the first code above head

    the error is fond

    ReplyDelete
  5. error i with the markup script

    ReplyDelete
    Replies
    1. @Sreeraj M - thanks for informing me there was little error in the script and I have fixed it now...

      Delete
  6. @Rahul itz not working replacing the first postbody 2 readmore link appears replacing 2nd postbody no change

    no readmore button is appearing

    ReplyDelete
  7. Hello there,

    Thanks a lot for the info. I got this working on my site by using Firefox, Opera, Crome, and safari.

    Error on Internet Explorer. It display the No thumbnails image and publish the whole post with read more in the end of the post.

    How to fix this?
    Is it just me that getting this error on IE?

    ReplyDelete
    Replies
    1. ops i guess im on the wrong Title. I shoule be on 'Blogger Auto Read More Hack : Improved With Many Control Options' since im using that one

      Delete
  8. it doesn't work , can u help me pleas?

    ReplyDelete
  9. I have tried this, but facing one problem, Read More is present below the image , see this

    http://softclub63.blogspot.com

    ReplyDelete
    Replies
    1. No tension bro. I have solution about it,Follow below steps,

      Find below code in your template,

      ]]></b:skin>

      add below code just above it,

      .more {
      margin-left: 450px;
      }

      Save your template and you are done :)

      Delete
  10. This comment has been removed by the author.

    ReplyDelete
  11. Us this -

    http://www.helperblogger.com/2012/06/blogger-auto-read-more-hack-improved.html

    ReplyDelete
  12. We were using a similar script until we got too frustrated with the lack of customization ability, and the fact that the thumbnail images were always messed up. So we coded a better script that provides more customization and fixes the thumbnail issues!

    ReplyDelete
  13. i want the thumbnail to be at the top center please help

    ReplyDelete
  14. Dear admin Rahul Ippar,
    I want to manage text decoration it display in random order I want to keep them in "justify" and I also want to manage text color, it gives default black color please check my blog business through internet and suggest me please.

    ReplyDelete
  15. This comment has been removed by the author.

    ReplyDelete
  16. No need to change anything just replace first with given code
    see it working here

    ReplyDelete
  17. Oh! you solved my problem. You are a Blogger Genius.
    Thanks.

    ReplyDelete
  18. how to display the read more in right side??

    ReplyDelete
  19. Thanx...nyc post
    softwaresuneeds.blogspot.in

    ReplyDelete
  20. works perfectly... but how to change post thumbnail image

    ReplyDelete
  21. Brother its not working for me Please check my blog
    Http://haseebnet.blogspot.com

    ReplyDelete
  22. How do I get this to work in Internet Explorer?

    ReplyDelete
  23. it did nto work no changes which data body to replace

    ReplyDelete
  24. thanks bro this is the best site in the world

    ReplyDelete
  25. http://www.Saeedbaba.com

    nice post and nice blog

    ReplyDelete
  26. This comment has been removed by the author.

    ReplyDelete
  27. Hi Rahul,

    Thanks a lot its working.

    I change the pic size to 600x430... the size that I prefer, but there is one prob...
    atm the text was beside the pic. Which look so weird..

    What coding should I change to make the text under the image?
    Thanks

    ReplyDelete
  28. Thank you so much.its what i've searching for.
    Read More button with image thumnails.
    Cature Your Dream

    ReplyDelete
  29. it doesnt even allow you to copy the code!!!!!

    ReplyDelete
    Replies
    1. If you are using chrome
      Right click on the box which includes the code and choose inspect element.
      Expand the code tags in inspector
      Right click and choose edit as text.
      Copy it.

      If you are on firefox I do think it has a plugin called FireBug which allows you to do the same thing as Chrome's Inspector.

      Delete
  30. Helpful article...me used in below blog

    Jaysukh patel recently posted : Android latest update for android user.

    http://android-tweet.blogspot.com

    ReplyDelete
  31. This comment has been removed by the author.

    ReplyDelete
  32. boss it does not work in my blog
    please help
    my blog http://techsitebd24.blogspot.com/

    ReplyDelete
  33. Hi Rahul,
    It is not working on my blog..
    http://readlock.blogspot.com

    Please check

    ReplyDelete
  34. It's not working for my blog either http://melina7makeup.blogspot.gr/

    ReplyDelete
  35. how to change the text font style

    ReplyDelete
  36. hi i like ur template design so plz send me ur template link address (jobshineplus@gmail.com)

    ReplyDelete

If you want to be informed about any replies then check "Notify me" option (present at lower right corner of comment box and it will display if you are logged in to your google account).PLEASE DO NOT SPAM

 
Top