How To Add Blogger Post Summaries With Read More Button

Hi friends many you have seen many blog which looks very nice due to they have added a thumbnail which is known as read more. Also read more thumbnail in blogger makes you a perfect and good blogger. I got this question from a lot of people that how to add a read more button in blogger.

Also Read Make Contact Us Form In Blogger Blog

Also you can make the post summaries by using read more buttons. This trick helps to make perfect blogger templates. This is a very easy step to add the post summaries with read more button. This is take time of 5 minutes but after this your blog would be part of a amazing look. So now let’s start.

Step 1
(A) Login to your account.
(B) Click on template.
(C) Click on HTML.

Step 2 – Now search <data:post.body/> second time

Step 3 – Replace<data:post.body/> with the given below given code.

<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.body/></div>
<script type=’text/javascript’>createSummaryAndThumb(&quot;summary<>&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 
(A) Now search </head>
(B) Put below given code above the </head>

<script type=’text/javascript’>
posts_no_thumb_sum = 490;
posts_thumb_sum = 400;
img_thumb_height = 160;
img_thumb_width = 180;
<script type=’text/javascript’>
function removeHtmlTag(strx,chop){
var s = strx.split(“<“);
for(var i=0;i<s.length;i++){
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;

<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; }

(C) After putting code click on “Save Temples”

Now read more button with post summaries will show in your blog. This is a good way to give a great look to your blogger. You need to know.

Also Read How To Create HTML Coding ?

(1) Read more with post summaries will show only in main page, label page and achieve category.
(2) If second <data:post.body/> is not working the try it with first or third.
(3) You modify the value which is marked as read and blue as per your requirement.