How to Add Read More Link in Blogger Post Summaries

How to Add Read More Link in Blogger Post Summaries

Adding Read More link in Blogger post Summaries is good to make your site load faster, a better SEO score and more page viewing. AllAboutBlogger and many bloggers suggests using summaries. Post summaries is a small description of your article/post, which usually consists of four to five sentences, Post Summaries give an idea to the reader about the whole story in just a few lines. If you want to see live example? then Click here and checkout AllAboutBlogger homepage where you might notice a read more link present towards the bottom of every post, In this article, we will show you how to automatically add a Read more link in Blogger Post summaries.
Before Start i'll suggest you to take a backup of your blogger template. after taking a backup of your blogger template

How to Add Read More Link in Blogger Post Summaries -

• Go to your blogger dashboard.
• Select your blog (if you have more then one) and Click on Template. 

How to Add Read More Link in Blogger Post Summaries
Click on Template - Demo 

• Now Click On Edit HTML
• Now Click any where edit html area and click Ctrl + F  to enable search and copy below code or type in search box and hit enter.

<data:post.body/>

• you will find above code 3 times but you have to stop at 3rd one.
• Now replace above code with below 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.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>

Note:- If you don't see any changes after going through all the steps, please try to replace the second <data:post.body/> with above code

• Now again search for </head> tag and copy paste below code just above </head>

<script type='text/javascript'>
posts_no_thumb_sum = 490;
posts_thumb_sum = 400;
img_thumb_height = 150;
img_thumb_width = 150;
</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>

•  After doing above thing Click on Save Template.

Inportant Things :-

1. I have set is number of characters shown when there is no thumbnail in post 490 and when thumbnail in post characters shown is 400. you an change value as you want.
2. If you want to show larger thumbnail, Modify 150 (height) and 150 (width) values as you want.

I hope you like this article. if any problem feel free to ask by comment below are ask on our Facebook page.