Kamis, 21 April 2011

Read More Otomatis Buat Blog Kamu :)

Read more otomatis (Automatic Read more ) adalah read more atau baca selengkapnya dengan secara otomatis mengambil ringkasan dari blog kita di tambah lagi read more otomatis ini juga akan mengambil gambar thumbnailnya.
Berikut cara pasang readmore otomatis di blog kamu :
Langkah Pertama:
Pergi Ke TATA LETAK - EDIT HTML (sebelum mengedit HTML sebaiknya backup dulu template anda)

Langkah Dua:
Beri tanda centang pada Expand Template Widget

Langkah Tiga :
Copy-paste kode javascript berikut tepat diatas kode </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>

Langkah Empat :
Temukan kode <data:post.body/> gunakan CTRL + F pada Browser anda.

Langkah Lima :
Ganti kode (langkah empat) tersebut dengan cara menghapus kode <data:post.body/>  dengan yang berikut

<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'>&#187;&#187;&#160;&#160;read more</a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/>
</b:if>

Langkah Enam:
Save Template - Selesai

Trik kode Javascript ini dari Kang Jaloe dan blogtemplate4u

Penjelasan Langkah Ketiga :

Kita dapat mengatur nilai value kode berikut sesuai dengan kebutuhan
summary noimg= 430 – tinggi artikel terpenggal tanpa image
summary img=340 – tinggi artikel terpenggal dengan image



Bagi Yang Telah Memiliki Readmore versi Lama :
Bagi Yang Telah memiliki Readmore versi lama sebaiknya kodenya dikembalikan dulu seperti semula. Caranya dengan menghapus kode berwarna merah (setiap template mungkin berbeda, jadi tinggal disesuaikan saja).
<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;'/>

SELAMAT MENCOBA :)

Tidak ada komentar:

Posting Komentar