Add Auto Read More With Thumbnail, cSS3 Button to Blogger blog

This nice trick will automatically create post summaries with thumbnails.You don't need to add any extra code in every blogger post that you make. if you display full posts on your home page it will severely slow down the load time, Also With the jump break in place visitors that land on your home page will see a selection of your posts without the need to scroll. Using automatic read more on your blog will make your blog load faster by showing few post instead of the full post on the homepage. This Tricks will summarize content and show only summary in Home page, Archives Page and Label Page using Automatic Read More simple script in your template.

How Apply Auto Read More

Always Remember Before Editing Your Template Make a Template Backup (how to make a template backup)
1. Login to your Blogger account >> Go to Dashboard >> Template >> Edit HTML Check the  Expand Widget Templates check box on top right of the HTML Window.
2. Press CTRL+F In the code window find the </head> line.
3. and paste the following Code Before </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> 
<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(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> 

Note:
summary_ noimg= 430; >> The length of the summery if the post does not have a thumbnail.
summary_img = 340;       >>The length of the summery if there is an image in the post that will be converted into a thumbnail.
null_thumb_height = 120; >> The height in pixels of the thumbnail.
null_thumb_width = 120; >>The width in pixels of the thumbnail.

4. Find The Following code <data:post.body/> and replace 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> 
<span class='jump-link' style='font-weight:bold;padding:5px;float:right;text-align:right;'><a expr:href='data:post.url'>Continue Reading...</a></span>
<div style='clear: both;'/> 
</b:if> 
</b:if>

You can change the words “Read more” with your own Words.
and now add some css codes for Read More button I have three style for Read More buttons.

1 Blue Color Button

Add Below code before/above ></b:skin>

.jump-link {
	display: block;
	font-size: 12px;
	font-weight: bold;
	text-align:right;
}

.jump-link  a {
        font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #ffffff;
	padding: 6px 15px;
	background: -moz-linear-gradient(
		top,
		#42aaff 0%,
		#003366);
	background: -webkit-gradient(
		linear, left top, left bottom, 
		from(#42aaff),
		to(#003366));
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	border-radius: 8px;
	border: 1px solid #003366;
	-moz-box-shadow:
		0px 1px 3px rgba(000,000,000,0.5),
		inset 0px 0px 1px rgba(255,255,255,0.5);
	-webkit-box-shadow:
		0px 1px 3px rgba(000,000,000,0.5),
		inset 0px 0px 1px rgba(255,255,255,0.5);
	box-shadow:
		0px 1px 3px rgba(000,000,000,0.5),
		inset 0px 0px 1px rgba(255,255,255,0.5);
	text-shadow:
		0px -1px 0px rgba(000,000,000,0.7),
		0px 1px 0px rgba(255,255,255,0.3);
}

2 Gray Color Button

.jump-link {
display: block;
	font-size: 12px;
	font-weight: bold;
	text-align:right;
}
.jump-link a {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000000;
	padding: 6px 15px;
	background: -moz-linear-gradient(
		top,
		#ffffff 0%,
		#b5b5b5);
	background: -webkit-gradient(
		linear, left top, left bottom, 
		from(#ffffff),
		to(#b5b5b5));
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	border: 3px solid #0088ff;
	-moz-box-shadow:
		0px 1px 3px rgba(000,000,000,0.5),
		inset 0px 0px 3px rgba(255,255,255,1);
	-webkit-box-shadow:
		0px 1px 3px rgba(000,000,000,0.5),
		inset 0px 0px 3px rgba(255,255,255,1);
	box-shadow:
		0px 1px 3px rgba(000,000,000,0.5),
		inset 0px 0px 3px rgba(255,255,255,1);
	text-shadow:
		0px 1px 2px rgba(000,000,000,0.5),
		0px 1px 2px rgba(252,254,255,0.9);
}

3  Black & Gray Button

.jump-link {
display: block;
	font-size: 12px;
	font-weight: bold;
	text-align:right;
}

.jump-link a {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #ffffff;
	padding: 6px 15px;
	background: -moz-linear-gradient(
		top,
		#eaeaea 0%,
		#000000);
	background: -webkit-gradient(
		linear, left top, left bottom, 
		from(#eaeaea),
		to(#000000));
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	border: 1px solid #a2a89f;
	-moz-box-shadow:
		0px 1px 3px rgba(000,000,000,0.5),
		inset 0px 0px 2px rgba(255,255,255,1);
	-webkit-box-shadow:
		0px 1px 3px rgba(000,000,000,0.5),
		inset 0px 0px 2px rgba(255,255,255,1);
	box-shadow:
		0px 1px 3px rgba(000,000,000,0.5),
		inset 0px 0px 2px rgba(255,255,255,1);
	text-shadow:
		0px -1px 0px rgba(000,000,000,0.4),
		0px 1px 0px rgba(255,255,255,0.3);
}

Note:- If you want to add just read more text don’t  add button CSS code in b:skin> section and click on save you're Done! 
Need Help!….
I just hope this little object may help in adding a new spice to your blog's appearance. If you have any problems installing the widget, just post me a query. If you encountered any problem during installation of the codes then feel free to let me know.  Thanks for reading our post. Stay Connected for daily update.