Home » Blogger Tutorials, Tricks and Hacks » Adding Auto ‘Read More’ with Thumbnail

Welcome to our AllBlogTools.com v.3 new version, We are still in beta, please contact us to report an error.

|| View All Tutorials ||

Adding Auto ‘Read More’ with Thumbnail

Adding Auto ‘Read More’ with Thumbnail

1 Star2 Stars3 Stars4 Stars5 Stars

Report Error


Here’s a nice widget that you may add to your Blogger site which I found. It’s an update that was created by Lasantha Bandara, and this will automatically create a post summary with thumbnail.

Below are the steps:

1. Go to Blogger Dashboard > Template > Edit HTML.

2. Click Expand Widget Templates.

3. Search for </head> tag.

4. Add this code before </head> tag:

<script type='text/javascript'>
summary_noimg = 250;
summary_img = 200;
img_thumb_height = 150;
img_thumb_width = 150; 
<script type='text/javascript'>

function removeHtmlTag(strx,chop){ 
 var s = strx.split("<"); 
 for(var i=0;i<s.length;i++){ 
 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;


Note: You may change the values below with your own preference:
summary_noimg : number of characters shown when there's no image.
summary_img : number of characters shown when there's an image.
img_thumb_height : height of post thumbnails.
img_thumb_width : width of post thumbnails.

5. Look for this <data:post.body/>

6. Replace the code above with this:

<b:if cond='data:blog.pageType != "static_page"'>
<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>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

<b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if>

<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<div style='float:right;margin-right:10px;margin-top:5px;'>
<a expr:href='data:post.url'>Read More</a>

7. Save template

Note: Always perform a backup first before doing any customizations on your template.


Liked It ? Please Share


20 Responses | Post A Comment | Subscribe To Comments RSS Feed

  1. ajdpadbury says:

    Thanks for sharing this great hack, I think most Blogger users should implement this to their blog as it looks a lot smarter, plus it should make their blogs load faster.

  2. thanks for the tutorial
    Read More ‘with Thumbnails

  3. Akshay says:

    great post dude! I was looking for this for the past few days.

  4. Thank You This step by step guide..!
    This Tutorial is working 100% I was successfully. It’s working in my blog:

  5. Blogger Tips says:

    thanks you marvin….

  6. waqas says:

    it is not working on my blog my blog url is waqasgee.blogspot.com

  7. why the number of posts on the front page does not always fit with the setting that I do, even capricious. Are there any tips for me?

  8. nomiking says:

    Its not work for my blog…please help me

  9. Exam Results says:

    Why this code is not working in my site..?

  10. with a determiner to explain what the referent of the noun term is.

  11. alone17 says:

    It is really what I desired to see wish later on you will proceed for discussing such a outstanding post. non permanent hair color

  12. james17 says:

    A web design company creating alternatives like Content management, SEO, product building, etc for many should be kept on top of the list. http://maleenhancementreport.org/

  13. alone17 says:

    Fire-service coaching is very essential for a scenario that will need save and assistance and your aritlce is really excellent. ofwgkta clothing uk

  14. alone17 says:

    They also insist that a conducive- pre-school atmosphere forms a powerful base or basis for protection of the kids experiencing complications in learning or social threats. Teamspeak servers

  15. james17 says:

    It becomes easier the more that you do it and you can find that you will be more relaxed eventually. Hells Kitchen Plum

  16. alone17 says:

    Fire-service training is very important for a situation that will need preserve and support and your aritlce is really outstanding. cast iron lamp post

  17. shthhyu says:

    Alors oui, j’ai souri trois secondes, le temps de me rendre compte que cette dataviz était une tromperie – pour la blague, certes, mais quand même http://www.vimax.info

  18. fsghsdsry says:

    Thank you for the sensible critique. Me & my neighbor were just preparing to do a little research about this. We got a grab a book from our area library but I think I learned more clear from this post. I’m very glad to see such great info being shared freely out there. http://www.plusvigrx.com

  19. vcn says:

    Delsarte’s concepts and workouts became the foundation pay for essays for Stanislavski’s design of performing.

  20. cxcvv says:

    The next paying attention to will take pohttps://www.facebook.com/Drugstore.comCouponCodessition on the 17th Oct in New Delhi. They’re designed by the very best stage developers who will be identified for your polo clothing creating.

Comments will be closed off on this post 365 days (1 year) after it is published. Apologies to this, but it's all about avoiding a growing comment spam problem. See our most recent posts where you can comment here