04 May, 2012

Blogger Auto Read More Summary with Thumbnails


You can add auto read more summary function with thumbnails in your blogger blog that means whenever you publish any post than a summary with Reading More button displayed on your main page or label page of your blog. When users of your blog click on Read More They will move on the full article (post) page. To add auto read more summary with thumbnails follows these simple steps.

Today I will show you how to display a summary with your articles' image on the home page, archives, labels, and search. All this will be done in a fully automated way, that is, you will apply the trick and your articles (old and new) will be summarized without you having to modify them.

Advantages of Read More With Thumbnails


  1. All your articles are summarized automatically.
  2. The first image is displayed in the summary automatically.
  3. The articles in the Archives, Labels, and internal search results are automatically summarized.
  4. Two copy/paste is enough to apply this trick.
  5. You select the length of the summary and the size of the images.

Disadvantages Blogger Auto Read More


  1. The only negative point of this trick is that the abstracts lose all formatting.
  2. But when you click "read more" the article is displayed as normal.
  3. The images are distorted if their size is too different from the default size for the abstracts.
This tip is perfect for blogs that use little (or no) images in articles.
It is especially handy for anyone (including me) who wants to summarize their articles without too much taking the lead using the classic method the Blogger summary button.
I always use images of the same size (128x128) and an equivalent text length, which gives a Pro look and pretty nice to the home page.

Auto Read More Summary with Thumbnails for Blogger

  • Login To Your Blogger Account
  • Go To Theme>> Edit HTML>> 
  • Search This Code </head>
  • Add Below given code just before </head> 
<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 230;
summary_img = 140;
img_thumb_height = 100;
img_thumb_width = 100;
</script>
<script src='http://folsol.googlecode.com/files/readmore.js' type='text/javascript'/>

  • Now Check Expand Widgets Box option and Search for <data:post.body/>
  • Remove <data:post.body/> and paste below given code

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<div expr:id='&quot;summary&quot; + data:post.id'>
<data:post.body/>
</div>
<script type='text/javascript'>
createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<div style='clear: both;'/>
<span style='padding-top:5px;;float:right;text-align:right;'><a expr:href='data:post.url' rel='bookmark'><b>Reade more...</b></a></span>
</b:if>

  • Now SAVE TEMPLATE and check your blog and enjoy....

Muhammad Shoaib have a good experience in the field of Blogging since decade. If you are a new blogger who just starts your blogging career then www.shoaibonline.com is the perfect place to learn about blogging.

2 comments

Hi Muhammad,

I really like your blog. Looks very professional and very informative. Thank you for the nice tip on how to make thumbnail clickable.

I'm just wondering how you add extra lines on top of the comment box, like SPAM = Trash... I'd like to add some guidline about commenting on my blog but I'm not sure how.

Thanks a million! I’ve only glanced at what you’ve presented and already I can see I’m going to be able to make great use of this tutorial.
website design


EmoticonEmoticon