How To Add ‘Read More’ Link with Thumbnails in Blogger Blog

Short story of your latest posts in Homepage with "Read More" link help visitors to read summary before full post. Visitors can navigate their interested post easily which will make them stay more times in your blog. With this hack before each summary there will a thumbnail image to make it more beautiful. This Blogger Trick will automatically create post summaries with thumbnails.

Steps to add 'Read More' Feature with Thumbnails:

1. Login to Blogger.com. From Dashboard->Layout->Edit HTML

2. Click on " Expand Widget Templates ". Now search for </head> tag.

3. Just before this </head> tag add the following code:

<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://keerthiset2.110mb.com/excerpt.js' type='text/javascript'/>

You can change the following value as your choice.

summary_noimg = 230;
summary_img = 140;
img_thumb_height = 80;   //Thumbnails height;
img_thumb_width = 70;   // Thumbnails width;

4. Now scroll down to find this code: <data:post.body/>

Now replace the above code with following 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>

You are done. Now save your template. I hope you like this Blogger Tips. For Latest Blogger Tips keep in touch.