Wednesday, 17 July 2013

Add 'Read More" to blog post

So here how you could add read more button in 
your blog, step by step.
1. Log into your Blogger account and select the Blog in which you want to add the read more button
2. Select Template button from the Left navigation menu
3. Click on Edit HTML
4. Select the check box   Expand Widget Templates  on the top
5. Do a CTRL+F and search for: <data:post.body/>
6. Replace the code with script below:
<!– For read more button script 1 starts –>
<b:if cond=’data:blog.pageType == “static_page”‘>
<data:post.body/>
<b:else/>
<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’>Read more…</a></span>
</b:if>
<b:if cond=’data:blog.pageType == “item”‘><data:post.body/></b:if>
</b:if>
<!– read more script ends –>
7. Search for  </head>
8. Paste the  following code just above the tag:
<!– For read more button script 2 starts –>
<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>
<!– read more script 2 ends –>
9. Save template, close it and click on settings in left navigation which is first from bottom.
10. And you are done and ready to add read more to your post.