How to shorten lengthy posts in blogger by adding the "READ MORE" option

This will be achieved through editing the blogger HTML so it is worth noting that before you make any changes on your templates, always make a back up of it; to avoided stories that touch the heart.

STEP 1: Login to your blogger account, then navigate to theme, then select edit HTML

STEP 2: Click anywhere and press the Ctrl + F keys; You will see a search box appear.

STEP 3: Type the code </head> into the search box and search for it. Now place the code below just before/above the </head> tag in your templates:

<script type='text/javascript'>
summary_noimg = 300;
summary_img = 300;
img_thumb_height = 120;
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 in above codes you can change the numeric numbers in RED according to how you wish it appears on your blog.

summary_noimg = 430

this code will decide how much characters must be shown in the post if that post doesn’t contain any images. I have selected 430 characters. You can customize it to suit your template

summary_img = 340

If the post contains image, then this code will decide how many characters must be shown in that post. Change the number of characters to be shown to suit your template.

img_thumb_height = 100

this tag decides the height of the thumbnail to be shown in the post. Vary the number 100 to suit your template.

img_thumb_width = 120

This tag decides the width of the Thumbnail image to be shown.

STEP 4: Now find <data:post.body/> using the search box in the template. (You will find two but need to stop at the second one). Repalace the second <data:post.body/> tag you see with the code below

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<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>
<div class='readmore-wrap'>
<span class='rmlink' style='font-weight:bold;padding:5px;float:right;text-align:right;'><a expr:href='data:post.url'>Read More</a></span>
</div>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>

.
You can now preview your template and then save it and It will look like this:


.
Incases were you have multiple/too much <data:post.body/> unlike having two just like most simnple blogs, it might not work exzactly. You will need to proceed to step 5 below for such exceptional cases.
.

STEP 5: search for <div class='post-footer'> instead, and above it paste the code you used to replace the second &lddata:post.body/&gt tag. Once everything is done, press "Save Template" button present on the top of your screen