Automatic Read More for blogger posts

Auto Read More/Continue Reading with Thumbnail For Blogger

This is a simple hack that will improve the look of your blog and avoid inserting "jump break" manually to every post. By adding few lines of code to the html template  "Read  more" / "Continue reading" is automatically added for every (old / new) blog posts.

Step 1
Go to Dashboard >> Design >> Edit HTML >> Download Template (for back up) >> Click on Expand Widget Templates and look for </head>


Now add following code 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></span>
Step 2
Now look for <data:post.body/>


Add following code ABOVE <data:post.body/>
<b:if cond='data:blog.pageType == "static_page"'><br/>
Also add following code BELOW <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 "<data:post.title/>"</a></span> </b:if> <b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if> </b:if>
Step 3
Save your template.


Customization
summary_noimg = 430;
is post cut height without image


summary_img = 340;
is post cut height with image


img_thumb_height = 100;
is thumbnail image height


img_thumb_width = 120;
is thumbnail image width
You can change these values as per your needs.

Note:

In stead of Read More you can write Read Full Article or Continue Reading… or insert an image or something like that. To make a change, edit the second code that you had to add below <data:post.body/> and edit that term Read More to whatever you want.

You can also add the post title to Read more links. To do this replace the code below <data:post.body/> with this code

<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'> <u>read more</u> "<data:post.title/>"</a></span> </b:if> <b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if> </b:if>