Selasa, 05 Februari 2013

Membuat Read More

Sore kawaaan.. :)
kali ini aku bakal bikin postingan tentang membuat read more..
mungkin hal ini udah hal umum buat yangg ahli, sedangkan buat yang awam seperti saya yaa membingungkan.
Tapi tenang aja, ini gak ribet kok ^^

Oke langsung aja yaah.
1. sign in ke blog masing-masing ya :)
2. Pilih rancang-template-edit HTML
kalo udah jgn lupa kotak Expand Template Widget dicentang.
3. Cari tulisan </head>. Biar mudah nyaringa tekan CTRL+F
kalo udah ketemu copy aja script di bawah ini pas di atasnya </head>

<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; 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>
4. Yg tadi belum kelar. habis tu cari lagi tulisan  <data:post.body/>
Ganti  <data:post.body/> sama script di bawah ini yaa..


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

<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>

<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);

</script>

<span class='rmlink' style='float:right;padding-top:20px;'>
<a expr:href='data:post.url'> <b>Read more</b> &#187;&#187;&#160;&#160; </a></span>

</b:if>

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

</b:if>

Nah, selesei deeeh read more otomatisnya..
Jgn lupa di save yaa.... ^_^

Tidak ada komentar:

Posting Komentar