How to Add Automatic Read More Hack For Blogger With Thumbnail

Automatic Read More Hack For Blogger With Thumbnails, In every time you create post and add a jump link to post this means Jump link will display full post in post page only.

In other pages it show summary that you select and image if any. In every time you choose some summary. But with this hack you just don’t need to locate your image and summary, the script will do all work automatically.Just you have to write your post and publish it with one image in post. If your post not containing any image this will show only summary.

Now how to install Automatic Read More Hack For Blogger With Thumbnails

Note: Backup your template Before applying this hack

INSTALLATION:-

1. Login to Blogger Dashboard
2. Go to Design Section
3. Select Edit HTML tab
4. Check Expand Widgets ( i.e Tick Expand Widgets check box )
5. Find the closing </head> tag
6. Replace it with bellow Code

<script type='text/javascript'> var thumbnail_mode = "no-float" ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </script> <script type='text/javascript' src='http://bloggerblogwidgets.googlecode.com/files/auto_readmore_blogger.js' ></script> </head>

<script type='text/javascript'> var thumbnail_mode = "no-float" ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </script>

 in above codes you can change the numeric numbers according to our use

<script type='text/javascript' src='http://bloggerblogwidgets.googlecode.com/files/auto_readmore_blogger.js' > </script>

or    

<script type='text/javascript' src='http://way2blogging.github.com/blogger-widgets/w2b-auto-readmore-blogger.js' > </script>

Or

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(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;
}

Save this Code as " auto_readmore_blogger.js" Upload it in hyper link .

# in above codes we can change the numeric numbers according to our use

summary_noimg = 430;	:Summary length if no image
summary_img = 340;	:Summary length if it has image
img_thumb_height = 100;	:Thumbnail image height
img_thumb_width = 120;	:Thumbnail image width

7.Now find this <data:post.body/> tag in your template and replace it with below code.

<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 class='rmlink' style='font-weight:bold;padding:5px;float:right;text-align:right;'>

<a expr:href='data:post.url' >Read more ... </a></span> </b:if> </b:if>

8.Finally Save your template and check your blog