2 ways to add read more with thumbnails on blogger

Adding read more on blogger may further be tweaked by inserting thumbnails next to it. This can be done in two ways. WITH JAVASCRIPT, and WITHOUT JAVASCRIPT.

add read more with thumbnails with and without javascript

Technique #1. Read More with Thumbnails USING Javascript.

Pros.
-post snippet length may be customized based on your preference
-thumbnail size (width and height) may be changed based on your preference
-no need to place image before the jump break just to generate thumbnail

Cons.
uses javascript, thus
-it doesnt work if javascript is disabled on user's browsers
-the extended coding brought by the script may cause the site to slow down, and
-it is not search-engine friendly.

In this case, we'll use Greenlava's hack to add post summaries with thumbnails where it uses this script placed before </header>:


<!-- 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 -->

and these lines of code to replace <data:post.body/>


<!-- 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 -->

To learn more about this hack and how to customize the snippet length and thumbnail size, check out Blogger Sentral's auto read more with thumbnail hack.

Technique #2. Read More with Thumbnails WITHOUT Javascript.

Pros.
-no need at add jump breaks on every post as it automatically creates post snippet
-automatically generates first image as thumbnail
NO JAVASCRIPT NEEDED thus
-cross browser compatible
-faster page loading
-more search-engine friendly

Cons.
-thumbnail width and height dependent on blogger's default thumbnail size which is 72px by 72px.
-post snippet length dependent on blogger's default length summary which is about 20 words including the word "read more >>"
-thumbnail does not work if the only content before the jump break is an image.

View demo.

This hack from Blogger Buster involves:
(1) replacing codes in the template from


<data:post.body />


      <b:if cond='data:blog.pageType != "item"'>
          <b:if cond='data:post.snippet'>
          <b:if cond='data:post.thumbnailUrl'>
              <div class='Image thumb'>
                <img expr:src='data:post.thumbnailUrl'/>
              </div>
          </b:if>
            <data:post.snippet/>
    <b:if cond='data:post.jumpLink != data:post.hasJumpLink'>
      <div class='jump-link'>
        <a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
      </div>
    </b:if>
          <b:else/>
            <data:post.body/>
          </b:if>
      <b:else/>
      <data:post.body/>
      </b:if>

(2) and including the below CSS property to properly align the thumbnail to the post snippet.


.thumb img {
  float: left;
  margin: 0 10px 10px 0;
}

View her full tutorial.

If you're using a template from Blogger's Template Designer, a neater code would be to:
1. search for:


<data:post.body/>

2. find this block of codes, highlight them.


<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'>
      <data:post.body/>
      <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>

    <b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'>
        <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
      </div>
    </b:if >

3. replace the entire block with the whole block of codes below:


   <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'>
      <b:if cond='data:blog.pageType != "item"'>
          <b:if cond='data:post.snippet'>
          <b:if cond='data:post.thumbnailUrl'>
              <div class='Image thumb'>
                <img expr:src='data:post.thumbnailUrl'/>
              </div>
          </b:if>
            <data:post.snippet/>
    <b:if cond='data:post.jumpLink != data:post.hasJumpLink'>
      <div class='jump-link'>
        <a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
      </div>
    </b:if>
          <b:else/>
            <data:post.body/>
          </b:if>
      <b:else/>
      <data:post.body/>
      </b:if>
      <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>

the highlighted lines came from Blogger Buster.