How to Add a Read More Blogger

Read more for Blogger bloggers

How to Add a Read More Blogger

Read more Smart and important add-on for bloggers on Blogger platform.

The addition of Read more to bloggers is an important add-on, which makes blog appearance more comfortable for visitors and contributes to SEO, and is an important addition to all bloggers.

In this explanation just follow the steps and apply them and you will see the result of adding Read more.

* Save a backup copy of the template as a type of security.

How to Add  Read More.... to Blogger :

• 1 - Go to your blog : go to >> theme >> edit HTML

Illustrative image

• 2- Search the template for :  </b:skin>  by : Control+F, or Command+F on a Mac 

.Add this code above

/* Read more css - www.bttemb.blogspot.com */
.jump-link {
 font-size: 14px;
 text-align: center;
 padding-top: 30px;
}
.jump-link a {
 border: 1px solid;
 padding: 10px;
}
/* Read more css end - www.bttemb.blogspot.com */

• 3- Search the template for : <data:post.body/>

Replace the previous code with the code below

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<div expr:id='&quot;summary&quot; + data:post.id'>
<data:post.body/>
</div>
<script type='text/javascript'>
createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<span class='jump-link' style='font-weight:bold;padding:5px;float:right;text-align:right;'><a expr:href='data:post.url'>Read More..</a></span>
<div style='clear: both;'/>
</b:if>
</b:if>

• 4 - Search the template for :  </head> 

.Add this code above

<script type='text/javascript'>var thumbnail_mode = &quot;no-float&quot; ;
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
</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){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]></script>

Customize

430 = Number of letters with a picture

340 = Number of  letters without a picture

100 = heigh image

120 = image width

• 5- Last step: Save, and congratulations you have been successfully added.