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 == "item"'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>
<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='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.
it's not working........
ReplyDeleteSorry for the Trouble, there was slight error in coding, now I've fixed it. You can try this out ;)
DeleteIt's not working for me either. :( Do you know how to fix this?
ReplyDelete