How to add Read More button in blog posts

How to add Read More button in blog posts

Read More button is must for a blog. By default a blog displays a whole post therefore a single post is displayed at a time. If you add a read more button almost 10 posts will be shown at a time. By adding a Read More button your blog will attract more visitors.  ReadMore button increases the beauty of the blog as well. Go through the steps below to add a Read More button to your blog posts.

Step 1. Login to Blogger. Go to Template and click Edit HTML button.

Step 2. Now click anywhere in the text, then press Ctrl+F buttons. A search box will appear. Type </head>  in search box and hit enter. It will search the code in the Template.

Now copy the below code and paste it above </head> code.

<script type='text/javascript'> posts_no_thumb_sum = 500; // posts_thumb_sum = 400;    // img_thumb_height = 160;   // img_thumb_width = 180;    // </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 = posts_no_thumb_sum; if(img.length>=1) { imgtag = '<span class="posts-thumb" style="float:left; margin-right: 10px;"><a href="'+ pURL +'" title="'+ pTITLE+'"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px" /></a></span>'; summ = posts_thumb_sum; } var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>'; div.innerHTML = summary; } //]]> </script> <b:if cond='data:blog.pageType != &quot;static_page&quot;'> <b:if cond='data:blog.pageType != &quot;item&quot;'> <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; } </style> </b:if> </b:if>

Customization:-

You can change the numbers colored red in the code according to your choice.

Posts_no _thumb_sum=500;//   500 words if there is not an image in the post

Posts_thumb_sum=400;//   400 words if there is an image

Img_thumb_height=160;//    160 is the height of image

Img_thumb_width=180;//    180 is the width of image

Step 3.  Now press Ctrl+F and search for this code <data:post.body/>

Note:This code can of at many places. Press enter as many times as required to find how many times this code is in the template.

Erase the last code and copy paste the below code there

<b:if cond='data:blog.pageType != &quot;static_page&quot;'> <b:if cond='data:blog.pageType != &quot;item&quot;'> <div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div> <script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;,&quot;<data:post.url/>&quot;,&quot;<data:post.title/>&quot;);</script>  <span class='readmore' style='float:right;'><a expr:href='data:post.url'>Read More &#187;</a></span></b:if></b:if> <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if> <b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>

Step 4. Now click on Preview Template and check it. 
Step 5.Now click Save Template and you are done.

Important Note: Download a backup of your Template before applying this. If you are not sure how to do this, you can read my post on How to download backup of Template in Blogger.


If you like this post or have any questions, Please leave a comment below