How to add automatic 'read more' on blogger/blogspot

Posted On / 3 comments

How to add automatic 'read more' on blogger/blogspotIn our previous post we have discussed how to fix a broken static page by removing automatic 'read more' features on blogger. And today I will share to you the opposite of my previous post, how to create post summaries on your blogger posts.

Some blogger templates does not have an automatic post summary feature so you have to insert 'jump break' on each of your articles. This trick is good if you don't want the hassle of putting jump break one by one.

So lets start shall we

How to add automatic 'read more' on blogspot

1. Go to your blogger template > edit HTML > click expand widget

2. Search for the </head> using CTRL+F.

3. Add the code below just before the </head> tag.

<script type='text/javascript'>
summary_noimg = 250;
summary_img = 200;
img_thumb_height = 150;
img_thumb_width = 150; 
<script type='text/javascript'>

function removeHtmlTag(strx,chop){ 
  var s = strx.split("<"); 
  for(var i=0;i<s.length;i++){ 
    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;


Note: You can change the values as you like.

summary_noimg : number of character to display when there is no image.
summary_img : number of character to display when there is an image.
img_thumb_height : hight of the post thumbnails.
img_thumb_width : width of the post thumbnails.

4. Look for this tag <data:post.body/>.

5. And replace it with the following codes below.

<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" +'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<>");</script>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

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

<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<div style='float:right;margin-right:10px;margin-top:5px;'>
<a expr:href='data:post.url'>Read More</a>

Save template!

Did this trick help? Kindly spread the love by sharing us on your favorite social networking site.

Receive News From The Blog In Your E-mail

Sign up and receive directly in your email. Its free!! Enter your email address and then confirm to begin receiving exclusive news from Blog!


Please read first before commenting:

1.) No spamming please

2.) Do not flood the comment box with links.

3.) To get free updates, kindly subscribe.

4.) Have fun visiting my blog.

emailSubscribe to our mailing list to get the updates to your email inbox...
Delivered by FeedBurner | powered by blogtipsntricks