Belajar Desain Blog dengan Readmore Otomatis

Sunday, August 8, 2010

read_more_blogspot
For Blogspot users, the beautifull view of blogs is a key condition so that their blog has high traffic. One trick that makes our blog are comfortable and beautiful to looked is to use the facility "readmore", readmore can makes the view of our blog articles are simple, minimalist, beautiful and did not look too long or chaotic anymore.

On occasion this time I will explain about how to set automatic  blogger read more on your blog, the steps I will explain below

1. Login to blogger, select the "Design" -> "Edit HTML" -> check "Expand Widget Templates"
2. Search code "</head>", read on how to find the code in the template blogspot
3. Place the script below just above the code no.2


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




4. Once completed, look for more code "<data:post.body/>"
5. If you've found, replace the code with the script below



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

6. Click "Save Template"
7. Completed

Please see the changes on the home page of your blog

1 comments:

Buy domain in India December 8, 2011 at 7:13 PM  

You have described it very well. Now a day, I feel that, No need to go to out because Internet showing me a more information to read. Today I have got a new information from your blog...

Post a Comment

Recent Posts

There was an error in this gadget

  © Blogger template The Beach by Ourblogtemplates.com 2009

Back to TOP