Insert Auto Read More on Blogger Posts

Note: 
For those of you who have put up read more manual code please uninstalled first before installing the code auto read more .

1. Log in to Blogger. Go to the menu Design-> Edit HTML
2. You can check the "Expand Widget Templates"
3. Put the code below just above </ head>

<script type='text/javascript'> thumbnail_mode var = "no-float"; summary_noimg = 300 ; summary_img = 301 ; img_thumb_height = 150; img_thumb_width = 150 ; </ 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);
imgtag var = "";
var img = div.getElementsByTagName ("img"),
if (img.length <1) {
imgtag = '< span style = "float: right ; padding: 0px 0px 10px 5px; "> <img src =" http://2.bp.blogspot.com/_0Nr--qemD8Y/TCLunoOn0SI/AAAAAAAAAsU / PFNWur48hKg/s1600/def-thumb.png "width =" '+ img_thumb_width +' px 'height = "' + img_thumb_height +" px "/> </ span > ';
var summ = summary_noimg;
}
if (img.length> = 1) {
imgtag = '< span style = "float: right; padding: 0px 0px 5px 10px;"> <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>

Description: 
summary_noimg = 300 indicates the number of characters that are displayed without images summary_img = 301 indicates the number of characters displayed include images img_thumb_height = 150 thumbnail image shows highimg_thumb_width = 150 indicates the width of the thumbnail images float: rightindicates the position of the thumbnail images on the right. If you want the thumbnail to the left switch right to left img backup image that appears if there are no images in the post. You can replace the image with another image backup or just delete the picture address if you do not want to use the backup image. 4. Then find<data:post.body/> or <p> <data:post.body/> </ p> 5. Replace the code with the code below

<b:if cond='data:blog.pageType != "item"'> 
<div expr:id='"summary" data:post.id'> <data:post.body/> + </ div > 
<script 
style = "float: left"> <a expr:href='data:post.url'> <b> Read more »</ b> </ a> </ span > 
</ b: if> 
< b: if cond = 'data: <b:if == "item"'> <p> <data:post.body/> </ p>
</ b: if>

6. If so, save your template. 7. Completed. Please see the results as usual you can be creative yourself link read more instance to add the post title in it or change the read more link to the image . Same way with read more manual . Good luck! When there are less obvious please inquire through the comment section I will try to help you.