Automatic Post Summaries and Thumbnails on Blogger and their Customization.

Automatic post summaries and thumbnails provide freedom to blogger to add “Insert Jump Break” every time during publishing new post. Moreover, it is very difficult to insert the jump break at right point to have similar summaries at homepage and other index pages. Care is also taken to provide equal size first images in all post to get equal thumbnail size in summaries.

I’m going to discuss a method that will create summaries and thumbnails of all posts automatically. You can control the thumbnail size, its design and number of characters in summary to suit your needs. You can modify the looks of post summaries with little CSS coding.

After implementation of this method, your homepage looks like as shown below:



You can further modify its looks as you wish. Some modified looks are given at end of this tutorial.

Adding Automatic Post Summaries and Thumbnails on Blogger:

The step by step procedure is as follows:

Step 1. First of all, you must make a backup of your current template. This will help you get previous look if something wrong takes place with implementation. If you don’t know how to make backup of blogger template, you can use this tutorial: Backup Blogger Template.

Step 2. After login to Blogger Dashboard, Go to “Template” and then click “Edit Html”.

Step 3. Click anywhere inside the template code area, then press CTRL + F keys to open search box. Search for following code:

<data:post.body/>

Note: You may find this code multiple times in the template. Select the last one.

Step 4. Replace the above code with code given below:

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;,&quot;<data:post.url/>&quot;,&quot;<data:post.title/>&quot;);</script>
 <span class='readmore' style='float:right;'><a expr:href='data:post.url'>Read More &#187;</a></span></b:if></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>

Step 5. Now search for the closing head tag:

</head>

Step 6. Paste the below code just above Closing head tag:

<!-- Automatic Summaries with Thumbnail Script starts --> 

<script type='text/javascript'>

posts_no_thumb_sum = 500;
 /*  Number of characters in Post Summary when there is no thumbnail available. You can change it as per your requirement   */
posts_thumb_sum = 400; 
 /*  Number of characters in Post Summary when there is a thumbnail available. You can change it as per your requirement   */
img_thumb_height = 120;
 /*  Thumbnail Height  */
img_thumb_width = 240;
/*  Thumbnail width  */

</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
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, pURL, pTITLE){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = posts_no_thumb_sum;
if(img.length>=1) {
imgtag = '<span class="posts-thumb" style="float:left; margin-right: 15px; float: left; margin-left: 10px;"><a href="'+ pURL +'" title="'+ pTITLE+'"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px" /></a></span>';
summ = posts_thumb_sum;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style type='text/css'>
.post-footer {display: none;}
.post {margin-bottom: 5px; border-left: 5px solid #3CAF4E; padding: 5px 15px 5px 15px; background-color: whitesmoke;}
 .readmore a {text-decoration: none; }
</style>
</b:if>
</b:if>

<!-- Automatic Summaries with Thumbnail Script ends --> 

Note: Although the above script create summaries automatically with given number of characters,
but still if you provide “Jump Break” in your posts, then

1. If  number of character in summary created by “Jump Break” position in post > number of characters in summary created automatically by this script,

then the number of characters in post summary will be equal to number of character as decided by this script.

2. If  number of character in summary created by inserting “Jump Break” < number of characters in summary created automatically by this script,

then the number of characters in post summary will be equal to number of character as decided by “Jump break” position.

Customization of post styles:
The code highlighted in Green Color in above code (Step 6) can be replaced with following codes according to match template design:

1. To get uniform border all around post summary and thumbnail:

.post {
   margin-bottom: 5px;
   border: 1px solid rgb(213, 213, 213);
   padding: 5px 15px 5px 15px; 
   background-color: #f5f5f5;
}

• Change code in Red Color { rgb(213, 213, 213) for border and #f5f5f5 for background color } to get desired background and border color. You can use best tools for color coding in blogger.
• Code in Red highlight in above code can be replaced with “groove”, “dotted”, “outset”, “ridge”, etc. to get desired border style.

2. A very good looking grey color bordered post style can be obtained with following code:

.post {
   margin-bottom: 5px; 
   border: 5px #E6E6E6; 
   border-style: ridge; 
   padding: 5px 15px 5px 15px; 
   background-color: rgb(223, 223, 223);
}

Step 7: Click on “Save Template” to save the changes.

Note: If you find two "Read More" links below post summary, then search for code:

<div class="jump-link">

and replace it with following code:

<div class="jump-link" style="display: none;">

To provide or change the style of “Read More”, follow this tutorial: Styling Read More in blogger.