Automatic Read More Button For Blogger

Read More Button is one of the most important things related to Blogger Blog. Adding a Read More Button to your blog can decrease your blog’s bounce rate. You might have seen various kind of Read More Buttons at many blogs or websites, specially on pro-blogger websites or those blogs which are designed by high cost and premium templates. Its really easy nowadays to customize blogger blog template easily with few CSS codes. I have shared several CSS codes and tutorials to make your blog looking like professional and with unique design. You might have seen various tutorials about adding the Read More buttons, but I don’t think they are much better than the CSS Optimized Read More Button we are going to see today. You can see the live demo image of this Read More Button below.

Whats New in This Read More Button ?

1. CSS optimized.
2. Quick Response even with the high CSS coding.
3. Doesnt affect page loading time.
4. Easy To install.
5. Effective and Decent Look.
6. Fully Automated. No Need of Jump Breaks in Blogger Posts.

Now, you can have a look on below picture its snapshot of our Read More button. Its highly customized with CSS code which gives it really awesome and decent look. It really easy to install this automated Read More Button on your blog, it just need to copy paste some codes in your blogger template which I'm gonna explain step by step.

How to Install Read More Button for Your Blog ?

Just follow these easy steps :
1. Go to Blogger > Dashboard > Template. [Backup Your Blogger Template]
2. Find the code </head>
3. Now after finding this code, simply copy paste the below code just above it.

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

Note :
summary_ noimg= 430; >> The length of the summery if the post does not have a thumbnail.
summary_img = 340; >>The length of the summery if there is an image in the post that will be converted into a thumbnail.
null_thumb_height = 120; >> The height in pixels of the thumbnail.
null_thumb_width = 120; >>The width in pixels of the thumbnail.

4. Now find the following code <data:post.body/> and replace it with the below code.

<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='rmlink' 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>

5. You can also change "Read More" to "Continue Reading". Now search for ]]></b:skin> and copy paste the below code just above it.

.rmlink a {  float: right;  }
.rmlink a {   border: 1px solid rgba(0, 0, 0, .2); color: #fff; display: inline-block;  text-decoration: none; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3); -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3);  background: #D56540; background: linear-gradient(top, #D56540 0%, #cc6633 100%); background: -moz-linear-gradient(top, #D56540 0%, #cc6633 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#D56540), color-stop(100%,#cc6633)); background: -webkit-linear-gradient(top, #D56540 0%,#cc6633 100%);  cursor: pointer;  }
.rmlink a:hover {  background: #E1704B;  color: #fff;  text-decoration: none;  }
.rmlink a { font-size: 14px; font-family: georgia; line-height: normal;  padding: 5px 10px;  }

Note : If you want to add just "Read More" text without any CSS Button then don't add code in ]]></b:skin> section and click on save you're Done !
Don't forget to say thanks and I hope you would have Subscribed Us via Email. Kindly share this post with your friends. If you have any problems just drop them here. Stay Connected.