How To Add Read More Button In Blogger (Jump Breaks)

Table of Contents

• Learn how to add read more in Blogger Template:
• Add Auto Read More Button:
• Customize Read More Button: 

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.

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>

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