Automatic Readmore ( New Version )

Read More function this time is quite different from the version of the old Read More (part 1). When the history we need to cut any posts using the manual way with the function <div class="fullpost"> .. </ div> or <span class="fullpost"> .. </ span> where the code is usually our enter manually into the posting page. To Read More Auto version of the latest time this seems more sophisticated, the functions of the beheading sentences directly work automatically without the need to add the code above

Read More this function is able to display the image in the first post and put the image at the beginning paragraph, even though the image that we put in the middle or end of the posting. I might mention more comfortable with the facility only a thumbnail image.

Not only that, we can also the number of characters that are displayed. Here there are 2 options for the number of characters. The first, the number of characters that is displayed if the image is included in the post and the second number of characters without image. Ok directly to tutorialnya...

Important! That is to install an older version of Read More in the code should return to the past as they are, I remove the red code below (Each template may be different, so just stay adjusted)

<div class='post-header-line-1'/>

<div class='post-body'>

<b:if cond='data:blog.pageType == "item"'>

<style>.fullpost{display:inline;}</style>

<p><data:post.body/></p>

<b:else/>


<style>.fullpost{display:none;}</style>

<p><data:post.body/></p>

<a expr:href='data:post.url'>Readmore</a>

</b:if>

<div style='clear: both;'/>

OK, I have to stay up with the tutorial below.

First, please heading directly to the EDIT HTML page and Check the "Expand widget templates", Search code </head> then paste script under code </head> , do not forget to save.

Direct copy code below and paste under code </head> :

<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>

find the code <data:post.body/> and replace with tihis code :

<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>>

Description:

thumbnail_mode var = "float", (we can decide whether the location is in the thumbnail (float) left, or if not, please change the (no-float)
summary_noimg = 250; (Define how many characters will be displayed in the post without a picture / thumbnail)
summary_img = 250; (Define how many characters will be displayed in the post with the picture / thumbnail)
img_thumb_height = 120; (Thumbnail 'high in pixels)
img_thumb_width = 120; (Thumbnail 'width in pixels)

Happy trying .. happy with a tutorial

Related Article for this post :