Showing blog posts with summary and image thumbnails

---

In some blogs, there is a thumbnail and the summary of the posts instead of the full posts. And at the last of the post there is a link saying Read More>> or something like this. Most of the blogger blog users use Jump Break to show the Read More>> option and they do it manually for every post. Let's follow the steps to add post summery and image thumbnail automatic for every single post.

 Step 01  Log-in to Your Blogger Account First
First of all you have to log-in to your blogger account. Then need to click on Template from the left side menu bar as showing in the image below.

 Step 02  Click on the Edit HTML button
Now click on the button Edit HTML to access the HTML Codes of the blog's template.

 Step 03  Find out the closing head tag
Now click anywhere of the codes and press Ctrl+F keys together, a text input box will appear. Now type </head> and press the Enter Key to find out the closing head tag </head>. Then replace the codes with the following codes given below in the box.

<b:if cond='data:blog.pageType != "item"'> <b:if cond='data:blog.pageType != "static_page"'> <script type='text/javascript'> var thumbnail_mode = &quot;float&quot; ; summary_noimg = 800; summary_img = 700; img_thumb_height = 150; img_thumb_width = 150; </script> <script src='http://bloggergadgets.googlecode.com/files/excerpt_min.js' type='text/javascript'/> </b:if> </b:if> </head>

 Step 04  Find Out the Codes <data:post.body>

Now you have to find out another line <data:post.body/>, that's why need to type them or copy and paste them into the text input box to find out. After pressing the Enter Key again, you will get the line. Now replace the line with the following codes given below.

<b:if cond='data:blog.pageType == &quot;item&quot;'>  <data:post.body/>  <b:else/>  <b:if cond='data:blog.pageType == &quot;static_page&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.canonicalUrl' rel='bookmark'><b>Read more >></b></a></span>  </b:if>  </b:if>

 Step 05  Click on the button Save Template

Finally click on the button Save Template to save the changes and reload the homepage of your blog to check the post summery and image thumbnails. Feel free to contact with me if you face any problem.

---

---