Sunday, April 30, 2017

How To Add Read More Button In Blogger

Learn how to add read more button in Blogger template. By this option you will be allowed to add jump breaking or continue reading after each post.

Learn how to add read more in Blogger Template:

Putting auto read more or continue reading button in Blogger post will help to decorate your home page with Blogger post summary for each post with thumbnail and your audience will feel better to stay with your blog.
how to add read more in blogger

This Tutorial For:
  • If you want to add auto read more button with thumbnail.
  • If you have already tried but blogger jump break not working.
  • If you want to customize or change read more button in Blogger.

Add Auto Read More Button:

To add jump break or auto read more button in Blogger post follow the below steps.
Step-1: Go to Blogger Dashboard → Theme → Edit HTML
Step-2: Click on HTML code and press Ctrl + F from keyboard and search for <data:post.body/>

You may find this more once. First stop in second time. If it doesn’t work in second after completing the following steps, then try to in third time.
Step-3: Now replace the above code with the following code.
<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>
 <span class='readmore' style='float:right;'><a expr:href='data:post.url'>Read More »</a></span></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>
Step-4: Now search for </head> tag
And add the following JavaScript code just before it.
<script type='text/javascript'>posts_no_thumb_sum=400,posts_thumb_sum=300,img_thumb_height=120,img_thumb_width=160;</script>
<script type='text/javascript'>//<![CDATA[function removeHtmlTag(t,e){if(-1!=t.indexOf("<")){for(var n=t.split("<"),i=0;i<n.length;i++)-1!=n[i].indexOf(">")&&(n[i]=n[i].substring(n[i].indexOf(">")+1,n[i].length));t=n.join("")}for(e=e<t.length-1?e:t.length-2;" "!=t.charAt(e-1)&&-1!=t.indexOf(" ",e);)e++;return t=t.substring(0,e-1),t+"..."}function createSummaryAndThumb(t,e,n){var i=document.getElementById(t),m="",r=i.getElementsByTagName("img"),s=posts_no_thumb_sum;r.length>=1&&(m='<span class="posts-thumb" style="float:left; margin-right: 10px;"><a href="'+e+'" title="'+n+'"><img src="'+r[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px" /></a></span>',s=posts_thumb_sum);var g=m+"<div>"+removeHtmlTag(i.innerHTML,s)+"</div>";i.innerHTML=g}//]]>
</script>
Step-5: Save your template.

Customize Read More Button: 

To customize read more button paste the following read more button CSS code just before </head> and edit your CSS as you want.

  <b:if cond='data:blog.pageType == "index"'>
    <style type='text/css'>
      .post-footer {display: none;}
      .post {margin-bottom: 10px; border-bottom: 1px dotted #E6E6E6; padding-bottom: 20px;}
      .readmore a {text-decoration: none; }
      .readmore a:hover{}
    </style>
</b:if>

Recommended Post:  

Have got this article helpful or not working? Put your comment below.