Blogger Auto Read more with thumbnail

Update Feb 2010:  Prevent read more from being applied to Blogger (static) Pages by adding static page conditional tag.

Expandable post or popularly known as “read more” is a feature that make your blog shows only a part of your posts on index pages i.e. home, labels and archive pages. At the end of each preview there will be a link to the post page, usually attached to the phrase “read more”.

Not too long ago I wrote a tutorial on how to make a “conventional” read more, this time around we will make an auto read more with thumbnail. Before we go on, let me highlight the differences between conventional and auto read more.

(Blogger’s own read more -the jump break, can be classified as conventional read more)

 

Conventional read more vs. auto read more

Conventional read more	Auto read more with thumbnail
Uses HTML	Javascript
Need to insert code in post.	Post is untouched.
Length of each snippet can be customized.	Length can be changed, but it affects all posts.
Read More is applied only to posts with the code added.	Read More applied to all posts, no exception.
No thumbnail. To show picture, you must place the picture inside the snippet (at the beginning of post).	The first picture in each post will be used as a thumbnail. You can also choose not to show thumbnail.
The code loads full post but only shows the snippet.	Only loads the snippet.

 

Applying auto read more

Here we go:

1. Login to your Blogger account.
2. Go to Dashboard > Design > Edit HTML.
3. Back up your template.
4. Check the  Expand Widget Templates check box on top right of the HTML window.
5. In the code window, look for </head> line.
6. Add the Read More code below right after that line.

   <!-- Auto read more script Start -->
   <script type='text/javascript'>
   var thumbnail_mode = "yes"; //yes -with thumbnail, no -no thumbnail
   summary_noimg = 430; //summary length when no image
   summary_img = 340; //summary length when with image
   img_thumb_height = 200;
   img_thumb_width = 200;
   </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){
    var div = document.getElementById(pID);
    var imgtag = "";
    var img = div.getElementsByTagName("img");
    var summ = summary_noimg;
           if(thumbnail_mode == "yes") {
    if(img.length>=1) { 
     imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
     summ = summary_img;
    }
    }
    var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
    div.innerHTML = summary;
   }
   //]]>
   </script>
   <!-- Auto read more script End -->

7. After that, find this line: <data:post.body/>
8. Replace the line with this code:

   <!-- Auto read more Start -->
   <!-- http://www.BloggerSentral.com -->
   <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>
   <a class='more' expr:href='data:post.url'>Read more ...</a>
   </b:if>
   </b:if>
   <!-- Auto read more End -->

9. Click Preview. If it works, then click Save Template.

 

Customizing the snippet

You can customize the read more by changing the values of the variables below:

1. thumbnail_mode –set to “yes” if you want to show thumbnail with text summary. Set to other than “yes” to show only text summary.
2. summary_img –specify the number of characters (including spaces) you want to show in the summary, with thumbnail.
3. summary_noimg –specify the number of characters (including spaces) you want to show in the summary, when there is no thumbnail.
4. img_thumb_height and img_thumb_width -specify the thumbnail height and width (in pixels).
5. You can change the words “Read more” with your own by changing it in line 12 of the code in step 8.

That’s it, enjoy!

Before you leave:

• Do you find this article useful? Share it via Retweet, Share or Stumble buttons below.
• Any suggestion, question or comment? Please post it in the comments below.