Auto Read More For Blogger with Customization

Tweet

Auto Read More with Thumbnails for Blogger Blogspot Blogs:
Now a days, almost every blogger integrated auto read more system in their blogs, Unlike conventional method in which you can add read more using jump break(single post only), You can change read more text(Go to blogger layout click on edit posts, a window will pop up, change the text). For more details Read Designing and managing posts in blogger 
In Updated auto read more system you can easily integrate for all posts.
Changes in one place will effect on all posts published on your blog.

How to Add to Blogger?
Follow the Below Steps.
Step-1:-Go to Blogger Template then Edit html, click on Proceed.
Step-2:- At the Top left Tick the Expand widget Box.
Step-3:- Search for <data:post.body/>
Step-4:-Replace the above code with the Below codes.

<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");
</script> <span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'>Read more...</a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
</b:if>

Step-5:- Now Search for </head> and paste the below code just Above </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>

 Step-6:- Now click on Preview to check. If it work fine for you. then Save Template.

Customization :- You can customize the read more style according to your desire needs and to adjust better look for your posts. You can do changes in step-5 codes.
Line#2: To change value 430, Refer to the number of characters if there are no image in the post.
Line#3:-To change value 340, Refer to the number of characters if there is image in the post.
Line#4: To change value 100, if you want to increase or decrease height of the image.
Line#5: To change value 200, if you want to increase or decrease width of image.

Please Share it! :)