rssrss

Jumat, 26 Februari 2010

Cara Membuat ReadMore Otomatis Di Blog

Fungsi read more kali ini sedikit berbeda dan lebih modern dan memudahkan kita untuk tidak lagi membatasi artikel yang akan disembunyikan dengan readmore.

Fungsi Read More ini mampu menampilkan image pertama dalam postingan dan mem-float image tersebut di awal paragraf awal, meskipun gambar yang kita letakan berada di tengah atau akhir postingan. Mungki lebih nyaman kita sebut saja dengan fasilitas image thumbnail.

Tidak hanya itu saja, kita dapat juga pengatur jumlah karakter yang ditampilkan. Disini ada 2 pilihan untuk jumlah karakter.

1. jumlah karakter yang ditampilkan, jika ada image yang diikutsertakan dalam postingan

2, jumlah karakter tanpa image. apabila masih bingung langsung aja kita bahas dengan praktek.


Penting! Yang sudah memasang Read More versi lama sebaiknya di kodenya kembalikan dulu ke seperti semula, caranya hapus kode yang berwarna hijau dibawah ini (Setiap template mungkin berbeda, jadi tinggal disesuaikan saja)

kode yang kita pelajari sebelumnya tampilannya seperti di bawah ini :

<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'>Read More.. &#187;&#187;</a> </b:if>


Cara Membuat Read More Otomatis :

Pertama Klik EDIT HTML, Cari kode
</head>

kemudian letakan script dibawah ini di atas atau dibawah kode </head>.

<script type='text/javascript'>var thumbnail_mode = &quot;no-float&quot; ;
summary_noimg = 500;
summary_img = 400;
img_thumb_height = 150;
img_thumb_width = 150;
</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>


Kalau sudah jangan lupa disimpan terlebih dahulu.

2. Masih pada EDIT HTML, Beri tanda centang pada "Expand widget template" lalu temukan kode seperti dibawah
<data:post.body/>
Kalo sudah, ganti kode <data:post.body/> menjadi seperti kode dibawah 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>

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)

silahkan disimpan dan lihat hasilnya :)

Keterangan:

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)


Trim's . . .

Kembali Ke Beranda Blog

7 komentar:

Abi on 29 Agustus 2010 20.29 mengatakan...

thanks for information bro..

blog ane http://abi-wiyono.blogspot.com/

baru nyoba" buat blog.. maklum kalo masih ancur tampilannya..

beri on 29 Oktober 2010 23.26 mengatakan...

thans info ya

gunawan on 29 Januari 2011 20.25 mengatakan...

mantap bgt tips nya.. cara membuat banner ada 'g??

Nikmaya John on 8 Maret 2011 00.18 mengatakan...

Bkin pembaca penasaran,,, hehe,, ATau ngrit space posting...

Yogi mengatakan...

Gimana caranya agar "page" ga ikut berisi kata read more ya? Saya cm pengen biar di postingan aja, bukan di page jg.. makasih..

Gilang_Hokage on 23 Juni 2011 06.18 mengatakan...

Dicoba dulu

Chrizto Mau on 21 September 2011 23.41 mengatakan...

makasih infonya...selama ini pake yg bantuan dr blogger tp ttp aja g bisa...


Posting Komentar

 
Terima kasih atas kunjungannya

Pengunjung Blog

Pengikut