Sunday, April 30, 2017

How To Add Read More Button In Blogger

Last Update:

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.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<>","<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}//]]>
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{}

Recommended Post:  

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

Join to BLOGGER™ Community - COMPROMATH. Ask Questions & Get Help

About me

Elliyas Ahmed
Elliyas Ahmed

Hi, I am Elliyas Ahmed, the founder of COMPROMATH. I try to share what I learn.

Work With Me - My Premium Services

Lets Start The Discussion on This Article

Put Your Valuable Comments

Welcome to comment section. Each comment is modereted. So don't try to spam.