Add Auto Read More Buttons in Blogger

Create a jump link within blog post not only makes things organized and well managed but also makes your homepage load faster. Also your blog readers come to know about various posts at a time while they are actually browsing home page. But definitely it is a boring job to insert jump break or read more link for each post separately. Sometimes it may happen that you forget to insert jump break link. In that case you have to reedit that post which is a bit of annoying. That why all bloggers usually go for auto read more links. This nice and simple trick adds jump link or read more button automatically within your blog post. Even you don't need an extra code within your every blog post to create this. I wish this simple and little trick works for all of you.
You may also like
✓ Replace 'Read More' buttons with your own image

Before you make any changes in your blogger template, it is recommended to backup your blog in case something goes wrong.

All right. Let's proceed.

1. Go to 'Template' and click on 'Edit HTML'.
   
2. Make sure that 'Expand Widget Templates' is checked.
3. Search for (
   Ctrl
   +
   f
   ) </head> and paste these codes before </head>

   
   <script type='text/javascript'>
   sum_noimg = 330;
   sum_img = 340;
   img_th_height = 100;
   img_th_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, pURL, pTITLE){
    var div = document.getElementById(pID);
    var imgtag = "";
    var img = div.getElementsByTagName("img");
    var summ = sum_noimg;
    if(img.length>=1) { 
     imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><a href="'+ pURL +'" title="'+ pTITLE+'"><img src="'+img[0].src+'" width="'+img_th_width+'px" height="'+img_th_height+'px"/></a></span>';
     summ = sum_img;
    }
    var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
    div.innerHTML = summary;
   }
   //]]>
   </script>
   

   ❝ Configurations ❞

   You can change these values if you want to

   sum_noimg ( default : 330 )

   Number of characters to display if there is no image within your blog post.

   sum_img ( default : 340 )

   Number of characters to display when an image present within your blog post.

   img_th_height ( default : 100 )

   Height of post thumbnails

   img_th_width ( default : 120 )

   Width of post thumbnails

4. Search for (
   Ctrl
   +
   f
   ) <data:post.body/>. You will find several matches. Take that one which exactly matches with the below code.

   
   <div class='post-body entry-content' expr:id='"post-body-" + data:post.id' itemprop='description articleBody'>
     <data:post.body/>
     <div style='clear: both;'/> <!-- clear for photos floats -->
   

5. Replace that <data:post.body/> with the code shown below

   
   <b:if cond='data:blog.pageType != "static_page"'>
    <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/>","<data:post.url/>","<data:post.title/>");</script>
    </b:if>
   </b:if>
   <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>
     </div>
    </b:if>
   </b:if>
   

6. Hit save.

Share this post if you find it informative and write down in comment section if you face any problem. Happy blogging.