Add "Read More" For Your Article

Wednesday, September 2, 2009

For blogger, there is no automatic setting for split an article. And If you have long article and you want to split it into two section, There is a trick for you to setup your blogger template and you can add "read more" for your article. And for split your article with "read more..", you can add this code below, go to EDIT HTML, and add this code before </head> code in your template blogger.

And there is the code :

Just copy-paste it ....

<script type='text/javascript'>

var thumbnail_mode = "float" ;

summary_noimg = 250;

summary_img = 250;

img_thumb_height = 120;

img_thumb_width = 120;

</script>

<script type='text/javascript'>

//<![CDATA[

/******************************************

Auto-readmore link script, version 2.0 (for blogspot)

(C)2008 by Anhvo

visit http://en.vietwebguide.com to get more cool hacks

********************************************/

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>

And If you finish with it, save it first. And Then "expand widget template", and find this code <data:post.body/>

and replace that code with

<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:left'><a expr:href='data:post.url'>READ MORE - <data:post.title/></a></span>

</b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

For Edit your parameter you can find :

var thumbnail_mode = "float"; => "Float" is for your thumbnail float left
summary_noimg = 250; => 250 is number of character for summary in front of site without image.
summary_img = 250; => 250 is number of character for summary in front of site with image
img_thumb_height = 120; => 120 is number for your thumbnail height
img_thumb_width = 120; => 120 is number for your thumbnail width

Emm..... OK, lets Try It bro :)