Read More_automatic

Weee ... Good night all. Why "good night"? Because when I was posting this article, as it was night time show. Hoho ...
Well, at night, I started again with my journey of learning more about blogging. At that time, I found a study obout "automatic read more". Is it? Automatic read more is the text read more on each end of our postings, without we have to write extra code as we did post an article. Very helpful instead.

Well, for you who are interested, we just follow the steps below :
1. First, you must login to your blogger account.
2. Then, click Layout > Edit HTML > check the "Expand Widget Templates"
3. Then push CTRL-F, write <data:post.body>
4. And change that code with this

<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 == "item"'><data:post.body/></b:if>

5. For the next step, you can push CTRL-F again. And write </head>
6. And copy this code. Above </head> code,

<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)!=' ' &amp;&amp; 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>

7. For last, you can save it.

Nb :
- Var thumbnail_mode = "float"; (we can decide whether the location of the thumbnail in the (float) left, or, you can replace it with (no-float)
- Summary_noimg = 250; (Define how many characters will be displayed in the post without a picture)
- Summary_img = 250; (Define how many characters will be displayed in the post with a picture)
- Img_thumb_height = 120; (Thumbnail 'height in pixels)
- Img_thumb_width = 120; (thumbnails' width in pixels)


"So easy, hah? Happy blogging. Hehe.. "