Auto Read More

Wednesday, April 7, 2010
read more As we know, bloggers have support read more. But still we have to divide the posts that will appear first and which will appear whole. Read more automatic advantage is you no longer need to manually divide the posts read more will work automatically according to the sentence fragment height, which we previously had on the Edit HTML settings.

And once again I explained, that I've placed the code read more automated in this template. But if you want to come along put on another blog, then please follow the tutorial below.

Log in to Blogger, then on the Edit HTML page, click the Expand Widget Templates. Look for the code </ head> and put the following code before the code </ head>

<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 300; summary_img = 300; img_thumb_height = 100; 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>

Search code <data:post.body/> or <p><data:post.body/></ p>, then delete the code and replace with the following 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:right'><a expr:href='data:post.url'><br/><b>Read More … </b></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

and the Save Template.


Description:
  1. summary_noimg = 300 -> high for posting without a picture.
  2. summary_img = 300 -> to higher posts with pictures.
  3. img_thumb_height = 100 -> high-image.
  4. img_thumb_width = 120 -> width of the image.
  5. Read More ... -> you can replace with Read Full Story or whatever you want.

1 comments:

Rudy said...
April 9, 2010 at 7:37 AM  

test comment

Post a Comment

recent posts

About Me

My photo
Just Blogging and create templates.

News From My Blog

  • Why is SEO Important? - For those of you who have read the article about using SEO or SEO for business purposes, of course you are curious how to improve your knowledge for this ...
    3 years ago