Adding Post Summaries with Thumbnails For Blogger

Most of the Website Today Especially in News Blog are using Post Summary Plug-in in their Main Page with image. The Advantage of Using this Plug-in is to Minimize the Space of Your Blog and at the same time it is easy for the readers to navigate your blog posts. In a Single Drag of your mouse you can see the summaries of your posts.

In This Tutorial you can learn on how to add Post Summary Widget in your Blogspot Website.

Step 1: Before We Start, Please Save your Template First (for back-up purposes).
             Go to Design - Edit html - Check Expand Widget Templates.
             Ctrl+F Find </head>
             Copy The Code Below and Replace </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://wiseblogger.googlecode.com/files/postsummary.js" type="text/javascript"></script>
</head>

Step 2: Ctrl + F to Find  <data:post.body> and Replace with the code below.

<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>
<span style='padding-top:5px;;float:right;text-align:right;'><a expr:href='data:post.url' rel='bookmark'><b>Read more >></b></a></span>
</b:if>

Then Save Template

Customization:

• You Can change Read More to Continue Reading or Image like this-->

      Replace the Read More with the code below.

<img src="http://2.bp.blogspot.com/-K78cRAc3VBg/TaAkHGVb9DI/AAAAAAAAAbw/O6vsdCYdEyM/s1600/read_more.gif" />

• You Can Also Change the number of Character Display and the size of the image at the Step 1 Code.

           summary_noimg = 230; Floating Display
           summary_img = 140;  Character Display
           img_thumb_height = 100;   Image Display
           img_thumb_width = 100;   Image Display

---

What's Next?

• Digg It
• Stumble It
• Twit This
• Save This Page

Related Posts :