How to Add Read More button in Blogger

We can add read more button in blogger in 2 types. one is globally and the second one is each blog post.

globally means you have to write the small script in "blog edit"  at "post.body" tag. after you write a piece of code at  "post.body" level then you can find the view like below image with Read More Button with image thumbnail.

The features of this read more button in the blogger are pointed below list

1. Short summary
2. Thumbnail with image
3. Read More Link Button

Below are the 5 steps to create a read more view in home page.

Step 1. Go to blogger dashboard -- > Theme --> click at ellipse button as show below image

Step 2. click at edit HTML as shown below image.

  

Step 3. <data:post.body/> is the tag inside blogger html. The use of the "post.body" is placing the content at that tag. we can customize that tag in different ways like read more or tiles etc. replace that "post.body" with below code.

       

<div expr:id='&quot;summary&quot; + data:post.id'> <data:post.body/> </div> <script type='text/javascript'> createSummaryAndImageThumbnail &quot;summary<data:post.id/> &quot;,&quot;<data:post.url/> (&quot;,&quot;<data:post.title/>&quot;); </script> <span class='continueRead' style='float:right;'> <a expr:href='data:post.url'>Continue Reading &#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. After replacing the above code then place the CSS code above just at </head>.below is the CSS code used for style the thumbnail image and summary snippet.

       

<script type='text/javascript'> posts_sum_number = 390; post_sum_t = 300; img_h = 140; img_w = 160; </script> <script type='text/javascript'> //<![CDATA[   function deleteHtmlTag(str,split){ if(str.indexOf("<")!=-1) { var s = str.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); } } str = s.join(""); } split = (split < str.length-1) ? split : str.length-2; while(str.charAt(split-1)!=' ' && str.indexOf(' ',split)!=-1) split++; str = str.substring(0,split-1); return str+'...'; } function createSummaryAndImageThumbnail(pageId, pageUrl, pagetitle){ var divTag = document.getElementById(pageId); var imgtag = ""; var img = divTag.getElementsByTagName("img"); var summ = posts_sum_number; if(img.length>=1) { imgtag = '<span class="posts-thumb" style="float:left; margin-right: 10px;"><a href="'+ pageUrl +'" title="'+ pagetitle+'"><img src="'+img[0].src+'" width="'+img_w+'px" height="'+img_h+'px" /></a></span>'; summ = post_sum_t; } var summrysnipper = imgtag + '<div>' + deleteHtmlTag(divTag.innerHTML,summ) + '</div>'; divTag.innerHTML = summrysnipper; } //]]> </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: 9px; border-bottom: 2px dotted #8c8b8b; padding-bottom: 15px;}  .continueRead a {text-decoration: none; } </style> </b:if> </b:if>

Step 5. finally click save button to save the all the changes in edit html. once save it then check in browser for UI as we as expect is there or not.

Conclusion

Read More button in Blogger has 2 main places to change the code, one is normal html and the second one is java script. if you have knowledge on html and java script is fine to develop your own blogger template. if you have knowledge on java script and html then you can develop your own read more button in blogger.