10.06.2009

Membuat Read More Otomatis

Read More Otomatis ini saya dapatkan dari blog beberapa kawan yang nun jauh di sana yaitu My-Blogwalking, Kang Jaloe dan blogtemplate4u

Cara nya adalah sebagai berikut :

Log In ke blogger >> Klik tata letak >> Edit HTML >> Chek Expand Wiget Template

(Jangan lupa Back Up Template sebelum melanjutkan)

Tekan CTRL +F untuk mencari kode </head>
Lalu Copy-paste kode javascript berikut tepat di atas 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>
_____________________________________________________________________


Lalu lakukan langkah berikutnya

Tekan CTRL + F cari kode <data:post.body/> ganti kode tersebut dengan script di bawah ini


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

Kemudian SAVE template dan selesai.

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

Bila kawan inginkan tulisan Redmore menjadi gambar kaya punya saya silahkan ikuti langkah berikut


10 komentar temen:

DIGITAL BACA mengatakan...

Mantabs infonya, jadi lebih praktis nich.
Salam sukses ya... :D

Blogger Admin mengatakan...

sip makasih juga digital baca........linknya udah aq pasang jd bisa sering maen ke digital baca deh....

Adin mengatakan...

cara itu udh banya dicoba bos tpi kok masih ga keluar readmorenya kadang malah kode yg dicari tdk ada.apa ada solusi bos...?


tank's

JuneBlog mengatakan...

thanx ya buat panduannya.....

@minumino mengatakan...

BERHASIIIIIIIIIIIIILLL!!! :D
THX A LOT!!!
hehe
nanti saya ulik2 lagi deh.......
hihiiii senangya :)

@minumino mengatakan...

eh,,,tapi tumbnail foto yg d artikelny jd ada yg melar,heu heu...
*ngga ngerti

Blogger Admin mengatakan...

sama-sama mbakkkk.......hehehe

Agung Aritanto mengatakan...

waaah mantep ni bisa buat artikel yang panjuang

Alfarobi mengatakan...

mas aditya makasih nih atas step2 nya.....salam kenal....

"SIMBAH" net mengatakan...

mantep bro infonya. tp kok setelah di readmore kenapa postingannye jadi dobel ya? apa ada kesalahan ya?