Insert Auto Read More on Blogger Posts

I'm sure readers are familiar with the features read more is a method to hide some of the contents of articles from the front page of the blog to the blog look more presentable and professional. methods to read more of time , usually a blog owner should insert code on each post that features a read more work. The downside of this method is certainly less practical. Well for those of you who do not want to be bothered, you can use the 'auto read more '. With this feature you do not need to add the code read more in each post, but the system will automatically generate a link read more to your post. In this way our work will certainly be lighter. Well for those of you who want to implement a system of auto read more on your blog simply follow the steps below.

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.