How Add Automatic Read More With Thumbnail To Blogger

Automatic Jump Break save lot of time of user and it automatically arrange all the post with thumbnail.This time I am giving you Improved and Updated version of jump break.It's also more professional looking and as visitors have to click through to the full post it increases page views.

Add Auto Read More Post Summary's To Your Blog

• Go To Blogger Dashboard
• Click On Template Tab
• Now Click On Edit HTML>>Proceed
• Tick The Expand Widget Templates Box 
• Find </head> And paste below code above </head>

<!-- Auto read more script Start -->
<script type='text/javascript'>
var thumbnail_mode = "yes"; //yes -with thumbnail, no -no thumbnailsummary_noimg = 430; //summary length when no imagesummary_img = 340; //summary length when with imageimg_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 -->

• After that find <data:post.body/>
• Replace <data:post.body/> 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>

• Now Click On Save Template and Enjoy your Auto Jump Break.

Changing Read More Link to Button

Many user want to change ream more link to button.If you also want to do it then follow below steps-

• Go To Blogger Dashboard.
• Click On Template tab
• Now Click On Edit Html>>Proceed
• Now Find ]]></b:skin> And pasteBelow Code Above ]]></b:skin>

.rmlink a{
  border-top: 1px solid #54bdff;
   background: #005af5;
   background: -webkit-gradient(linear, left top, left bottom, from(#33adff), to(#005af5));
   background: -webkit-linear-gradient(top, #33adff, #005af5);
   background: -moz-linear-gradient(top, #33adff, #005af5);
   background: -ms-linear-gradient(top, #33adff, #005af5);
   background: -o-linear-gradient(top, #33adff, #005af5);
   padding: 12px 24px;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border-radius: 5px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
   color: white;
   font-size: 17px;
   font-family: Georgia, serif;
   text-decoration: none;
   vertical-align: middle;
}

• Now Save It
• For More button style visit here.