Minggu, 10 April 2011

Cara Membuat ReadMore Otomatis..

Sallam blogger untuk Brew" smua......

Gymn nih brew kabarnya pada, smoga baik" dan sehat" za agar bisa selalu up to date Mlihat postingan" ane yang baru ok........ hihihihihih(*Basa-basi Dikit lah*)..

Ok deh brew kali ini ane mau posting tentang Membuat Readmore otomatis yang dimana readmore oromatis ini lebih efisien lagi untuk digunakan dalam membuat postingan brew" smua di dunia blogger'n dan lain"......
Dan di samping itu postingan" di blog kita terlihat lebih rapih lagi and keren paztinya....... hehehheheh

eeemmmmmmmmm......
sepertinya brew" sudah tak sabar lagi yah menunggu caranya bagaimana....

OK dech kita langsung masuk langkah"nya aza:

1.Silahkan login ke blogger brew terlebih dahulu,
2.Klik Tata Letak,
3.Kemudian klik Edit HTML,
4.Centang Expand Template Widget.
5.Letakkan kode berikut ini di bawah atau diatas kode </head>  :
    
<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 450; summary_img = 360; img_thumb_height = 120; img_thumb_width = 150; </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>
 kalo sudah jangan lupa di simpan terlebih dahulu..

6. Masih pada EDIT HTML, Beri tanda centang pada "Expand widget template" lalu temukan kode seperti dibawah:
       <data:post.body/> atau <p><data:post.body/></p>
 kalau sudah ketemu kode di atas tersebut, ganti kode tersebut dengan kode di bawah ini:
       

<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'>Read More... <data:post.title/></a> </span> </b:if> <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/> </b:if>


Keterangan:
Tulisan yang berwarna Ungu itu menandakan readmore+judul postingan jika kita tidak menghendakinya tinggal di hapus.
dan tulisan right yang berwarna biru menandakan letak daripada tulisan read more tersebut.
jika left : berarti berada di sebelah kiri. tetapi jika kita ganti menjadi
right : berarti berada di sebelah kanan (seperti pada contoh gambar di atas)
tulisan readmore di atas bisa brew ganti dengan kata-kata sesuka brew" smua


var thumbnail_mode = "float"; (kita dapat memutuskan apakah letak thumbnail berada di (float) kiri atau jika tidak silahkan ganti dengan (no-float)
summary_noimg = 500; (Menetapkan berapa banyak karakter akan ditampilkan di posting tanpa gambar / thumbnail)
summary_img = 400; (Menetapkan berapa banyak karakter akan ditampilkan di posting dengan gambar / thumbnail)
img_thumb_height = 150; (Thumbnail 'tinggi dalam piksel)
img_thumb_width = 150; (Thumbnail 'lebar dalam piksel)


silahkan disimpan dan lihat hasilnya :) 
ok selamat mencoba dan semoga berhasil !! amieen..pertamax

Bersumber Dari Ghulamz Blogger Cummunity....
Thankz ya brew masih mau mampir" ke blog ane.... hehheheh

0 komentar:

Posting Komentar

Template by:

Free Blog Templates