Readmore function for blogspot

Readmore from Blogger

Blogger announced readmore function is now available .
To use this function , just click button in image bellow if you use new blogger editor tool

if you use old blogger editor tool ,just add this code <!-- more --> in edit HTML mode

like Wordpress ,a part of your post from where you insert readmore code to the beginning of post is considered post summary .

The only templates this method will not work with is those which have added an automatic post summaries hack, which summarizes the posts based on the number of characters or words. This is because such customizations ignore any code added to the body of our blog posts and don't register Blogger's Jump Links.

If you'd prefer to use Blogger's Read More function than your current automatic post summaries, follow these steps :

1.Find this line <data:post.body/>
2.Remove references to the post summaries script - anything between the <script> and </script> tags used for your particular method
2.insert these code lines right after <data:post.body/>
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>
</div>
</b:if >
and here is the result of blogger readmore function

Auto readmore

Because Readmore function of Blogger is manual readmore function ,you have to insert code to mark post summary by yourself. So I'd like an auto version which create post summary automatically .

Here is instruction for adding auto readmore function to blogspot by Anhvo .

1.Open your template

2.Find this line <data:post.body/>

3.Replace <data:post.body/> by these line :

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id' style='display:none;'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<div style="clear:both" align='right' class='rmlink'><a expr:href='data:post.url'>-->��c tiếp...</a></div>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
4.insert these line after </head>
<!--
/*****************************************************
Auto-readmore link script, version 4.0 (for blogspot)
(C)2009 by Anhvo
Homepage: http://vietwebguide.com
Please dont remove this copyright or change it into your own
******************************************************/
-->

<style type="text/css">
.thumbnailimg IMG {
max-width:150px;
width: expression(this.width > 150 ? 150: true);
max-height:120px;
height: expression(this.height > 120 ? 120: true);

}
.thumbnailimg {
float:left;
padding:0px 10px 5px 0px;
}
</style>
<script type='text/javascript'>
var thumbnail_mode = "no-float" ;
var classicMode = false ;
var summary_noimg = 50;
var summary_img = 40;
var indent = 3;
</script>
<script type='text/javascript'>
//<![CDATA[
function stripHtmlTags(s,max){return s.replace(/<.*?>/ig, '').split(/\s+/).slice(0,max-1).join(' ')}

function getSummaryLikeWP(id) {
return document.getElementById(id).innerHTML.split(/<!--\s*more\s*-->/)[0];
}

function getSummaryImproved(post,max){
var re = /<.*?>/gi
var re2 = /<br.*?>/gi
var re3 = /(<\/{1}p>)|(<\/{1}div>)/gi
var re4 = /(<style.*?\/{1}style>)|(<script.*?\/{1}script>)|(<table.*?\/{1}table>)|(<form.*?\/{1}form>)|(<code.*?\/{1}code>)|(<pre.*?\/{1}pre>)/gi

post = post.replace(re4,'')
post = post.replace(re3,'<br /> ').split(re2)

for(var i=0; i<post.length; i++){
post[i] = post[i].replace(re,'');
}
var post2 = new Array();
for(var i in post) {
//if(post[i]!='' && post[i]!=' ' && post[i] != '\n') post2.push(post[i]);
if(/[a-zA-Z0-9]/.test(post[i])) post2.push(post[i]) ;

}


var s = "";
var indentBlank = "";
for(var i=0;i<indent;i++){
indentBlank += " ";
}
if(post2.join('<br/>').split(' ').length < max-1 ){
s = post2.join(indentBlank +' <br/>');
} else {
var i = 0;
while(s.split(' ').length < max){
s += indentBlank + ' ' + post2[i]+'<br/>';
i++;
}
}
return s;
}


function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var content = div.innerHTML;
if (/<!--\s*more\s*-->/.test(content)) {
div.innerHTML = getSummaryLikeWP(pID);
div.style.display = "block";
}
else {

var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
if(thumbnail_mode == "float") {
imgtag = '<span class="thumbnailimg"><img src="'+img[0].src+'" /></span>';
summ = summary_img;
} else {
imgtag = '<div class="thumbnailimg" align="center"><img src="'+img[0].src+'" /></div>';
summ = summary_img;
}
}

var summary = (classicMode) ? imgtag + '<div>' + stripHtmlTags(content,summ) + '</div>' : imgtag + '<div>' + getSummaryImproved(content,summ) + '</div>';

div.innerHTML = summary;
div.style.display = "block";
}
}
//]]>
</script>

in the code above :
-150 and 120 are width and height of thumbnail image .Change these to your own
-Value 'false' for classicMode mean Blogger readmore function is off . You can change this value to "true" and use Blogger readmore function as I mention above .
-value 60 for summary_noimg mean the maximum word for summaries without image are 60
-value 50 for summary_img mean the maximum word for summaries with image are 50
Note:
With this method ,if you want to show post summary as Blogger readmore function ,just insert
<!-- more --> to separate summary and the rest of your post

In this post ,I recommend you two methods for show post summaries . If you find anything wrong or get another ideas for these methods ,please give me some comments