Read More Button For Blogger Blogspot simple 5 step

Today we give you trick to Add Automatic Read More Button For Blogger your long blog post which appear in your home page. Read more buttons needed because blogger show full post on your home page but many blogger want to show only summary of blog post on home page. So we need to add read more buttons on home page to split long blog post to summary and add read more after summary. Here I am showing you How to Add Automatic Read More Button For Blogger Blogs. After add this code your home page long post automatically convert into 3-4 line summary and add read more button after summary.

step 1.Login into Blogger Account and Go to Blogger Dashboard.

step 2.Go to Blogger Template at the left panel and Click on Edit HTML Link as shown in below picture.

step 3.Following script above " </head> " section

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

step 4.search this " <data:post.body/> " replace this code ,note you will see two code you  need to replace second  like following screenshot

<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'>Continue Reading...</a></span>
<div style='clear: both;'/>
</b:if>
</b:if>

step 5.search this code " ]]></b:skin> " and place the following code above this " ]]></b:skin> "  line

.jump-link {
 display: block;
 font-size: 12px;
 font-weight: bold;
 text-align:right;
}

.jump-link  a {
        font-family: Arial, Helvetica, sans-serif;
 font-size: 12px;
 color: #ffffff;
 padding: 6px 15px;
 background: -moz-linear-gradient(
  top,
  #42aaff 0%,
  #003366);
 background: -webkit-gradient(
  linear, left top, left bottom,
  from(#42aaff),
  to(#003366));
 -moz-border-radius: 8px;
 -webkit-border-radius: 8px;
 border-radius: 8px;
 border: 1px solid #003366;
 -moz-box-shadow:
  0px 1px 3px rgba(000,000,000,0.5),
  inset 0px 0px 1px rgba(255,255,255,0.5);
 -webkit-box-shadow:
  0px 1px 3px rgba(000,000,000,0.5),
  inset 0px 0px 1px rgba(255,255,255,0.5);
 box-shadow:
  0px 1px 3px rgba(000,000,000,0.5),
  inset 0px 0px 1px rgba(255,255,255,0.5);
 text-shadow:
  0px -1px 0px rgba(000,000,000,0.7),
  0px 1px 0px rgba(255,255,255,0.3);
}

If you want to change button From normal Read More  text button to graphical Read More  text button Go to Template, then Customize.
Click Advanced, then Add CSS (you'll have to scroll all the way down). Paste the following code into the CSS box. If you have other CSS in the box, just add this at the end.

Normal text Read More:

.jump-link {
  text-align: center; /* center the button-can also use left or right */ 
  background: transparent;
}
.jump-link a {
  background: #444444; /* change background color for the button */
  color: #ffffff; /* change text color */ 
  padding: 5px;
  border-radius: 5px; /* button shape: 0px for squared edges or 5px for a rounded rectangle */ 
}
.jump-link a:hover {
  background: #ffffff; /* change background color on hover */
  color: #444444; /* change text color on hover */  
  text-decoration: none;
} 

Button Read More Button:After pasted CSS