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 = "no-float" ; 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 == "item"'><data:post.body/></b:if>
and the Save Template.
Description:
- summary_noimg = 300 -> high for posting without a picture.
- summary_img = 300 -> to higher posts with pictures.
- img_thumb_height = 100 -> high-image.
- img_thumb_width = 120 -> width of the image.
- Read More ... -> you can replace with Read Full Story or whatever you want.
