Make Auto Read More Functions

Make Auto Read More Functions to blog is very important, caused this function is SEO friendly and make visitor possible to continuous surfing to your site. This time, I would be give tips and trick to make "Auto Read More" without file javascript hosting to others hosting site. If you already have "Manually Read More" function, you can remove first and reinstall with this function. You can remove this script in your posting manually with called function : <div class="fullpost">...</div> or <span class="fullpost">...</span> where this function usually put in our posting page. This version Auto Read More very amazing caused this version can make cut sentence by automated function and make your picture in posting visible to appear, caused your image in posting page created image thumbnail with first sentence paragraph. But only that, we can adjust total number character and adjust image thumbnail size.

See example screenshot bellow:

Note: If you already put "Manual Read More", must be returned back to original script, remove this script code bellow, every template maybe different, but we must adjust to normal, please see code bellow and make normal script in your template.

<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;'/>

After normal adjust that script above, continuous to EDIT HTML and found </head>,copy-paste and put this script bellow in above code script </head>, and continuous "Make Auto Read More Functions".

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

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>

On EDIT HTML, check "Expand widget template" and found this script code bellow:

<data:post.body/>

If you have been found <data:post.body/>, copy-paste this script code bellow:

<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' expr:title='data:post.title'>Read More »»» <data:post.title/></a></span>

</b:if>

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

Save your template and see the result.

Remarks:

var thumbnail_mode = "float"; (decided to put image thumbnail in left "float", if you not like this, change with option "no-float")

summary_noimg = 250; (decided how much sentences character will be appear without image thumbnail)

summary_img = 250;(decided how much sentences character will be appear with image thumbnail)

img_thumb_height = 120; (adjust height thumbnail pixel)

img_thumb_width = 120; (adjust width thumbnail pixel)

Good Luck

Make Auto Read More Functions