How to Add readmore code and readmore image to your blogger blog?

Older interface blogger front page template you won't notice any readmore button, you've only the option page-break on post editor.
There is no cut off point automatically let's readers views your full posts.
For this problem a external script is required to add "Read More" for your blogger blog.
BlogTariff makes you educate how to add to install "Read More" code for your blogger blog which makes images inside quite simple.

How to install "Read More" code to blogger blog?

Sign into your blogger blog
Click on Design -- (Layout in new blogger interface)
Click on "Edit HTML" (before you do this just backup your template, if anything goes wrong you can reuse it.)
Tick the "Expand the widget Template"
Now search the code

</head>

Paste the below code above </head>

<a href="http://www.blogtariff.com" target="_blank" title="Blogger Widgets"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP1p4Uozq24QvnZdAepZz2_zWRN6QQ6eWoHrbKH7kT9LQG27liMGaTysHwxrmqcEVI2APEm9Nj47zBBXS-jOKlxlpGMC4_WWTI2M4pXIX_XE88UjfX1fjVVV4-kgEcIhwzXNaJHvuZQ_c/s150/bt.jpg" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a>
<script type='text/javascript'>var thumbnail_mode = "no-float" ;
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>

After successful pasting find the below code

<data:post.body/>

After finding the above code just replace it with below code

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");
</script> <span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRM9CNTV3-Vd5-lG0Krtepm8yVCgVTrE3PcHqFkG2tXrmnzuGHAOqTfQV5hF4DfMAgNbynTPwiemIuiyKa-WTE9zdBKlBKz8GNQNgrvM6pdFdiE8osP_Pc_8WSWnKA1SjpEws2nhl8Q-iL/s1600/Read+more.png'/></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

Save the template
If you want to replace the image with below images or your own images then change this code with your image url
"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRM9CNTV3-Vd5-lG0Krtepm8yVCgVTrE3PcHqFkG2tXrmnzuGHAOqTfQV5hF4DfMAgNbynTPwiemIuiyKa-WTE9zdBKlBKz8GNQNgrvM6pdFdiE8osP_Pc_8WSWnKA1SjpEws2nhl8Q-iL/s1600/Read+more.png"

If you need various types and beautiful "Read More" images to your blogger blog