How to Add Auto Read More Link To Blogger Blog

If you are new to blogger blog then you must be know that how to add read more link to your blogger blog post. This post will help you to resolve this issue. In blogger home page you can have snippets with thumbnails and add stylish read more button. If user clicks read more button then full post will come into picture. Adding read more link to blogger blog is always easy, you can have customized CSS button or you can add button image to you blogger blog page. Most of the blogger blog beginners wants to add read more link to there blog so here I explained steps to do that. “Read more” button will improve your blogger blog look and this will be the very good navigation to your blog post.


Always include more attractive and customized read more buttons to your blogger blog. The bellow steps will help you to add read more link to your blog.

Step 1: Log in to your blogger blog and open template section.

Step 2: Click Edit Template button and search for <data:post.body/>. You will find more than once occurrences. Replace the above code with the below code.

<!-- Auto read more Start -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<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>
<a class='myButton' expr:href='data:post.url'>Read more</a>
</b:if>
</b:if>
<!-- Auto read more End -->

Step 3: Copy the below code and paste it before </head> tag.

<!-- Earnviablog Auto read more script Start -->
<script type='text/javascript'>
var thumbnail_mode = &quot;yes&quot;; //yes -with thumbnail, no -no thumbnail
summary_noimg = 530; //summary length when no image
summary_img = 400; //summary length when with image
img_thumb_height = 170;
img_thumb_width = 170;
</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(thumbnail_mode == "yes") {
 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>
<!-- Earnviablog Auto read more script End -->

Step 4: Final step is you need to customize you read more button.

That’s it! Now you are able to view read more button.

All the best!!!