Membuat Read More Otomatis, Auto Read More dengan Gambar

Sebelumnya saya sudah memberikan trik supaya tampilan blog di homepage hemat (pelajar: hanya judul posting). Hari ini congcot akan membahas tentang pemasangan read more yang otomatis dari www.o-om.com. Ini berkat pertanyaan dan permintaan teman saya tentunya.
Kenapa perlu menggunakan read more?. Yang jelas read more membantu kita untuk meminimalisir tampilan blog, ketika pertama kali homepage dibuka. Bayangkan jika kita menampilkan posting sebanyak tujuh posting (jumlah ini merupakan pemberian manual dari blogger.com), kemudian postingnya panjang-panjang, apa yang akan terjadi?. semua isi posting yang panjang itu akan terlihat di halaman homepage, dan tentu saja akan sangat mengganggu penampilan blog anda.
kelebihan kode ini diantaranya adalah tampilan gambar disetiap posting yang diberi read more. (lihat gambar blog congcot diatas).
Jangan lupa, congcot memakai cara ini jika belum edit template lebih jauh, jadi saran saya gunakan template yang dari minima blogger.
Nah, mari kita mulai sekarang.

Persiapan...

1. Seperti biasa masuk ke www.blogger.com.
2. Pilih rancangan atau tata letak.
3. Klik edit HTML.
4. Sebelum melangkah ke pemasangan kode, silahkan download template anda, klik download template lengkap.
5. Kemudian cheklist Expand widget template.
6. Cari kode <data:post.body/> (gunakan ctrl+F untuk memudahkan pencarian)
7. Harus ketemu, kalau sudah ketemu berarti langkah selanjutnya akan sangat mudah.

Pemasangan...
Jika kode diatas sudah ketemu maka silahkan ikuti pemasangan kode dibawah ini.
Cari kode </head> , dan simpan kode dibawah ini tepat diatas kode </head>
Langsung copy paste aja...

<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
img_thumb_width = 120;
</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>

Jika sudah, Sekarang tahap terakhir, cari kode <data:post.body/> dan silahkan hapus, dan ganti dengan 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:left'><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>

Ganti kata yang bercetak tebal sesuai dengan selera anda.
Sekian trik kali ini, mudah-mudahan besok-besok akan ada trik menarik lainnya.


Intinya...
Read more sangat dibutuhkan dalam hal tampilan supaya lebih menarik. Trik ini akan menghemat tampilan blog tapi memberikan informasi dari sebagian posting kita. Gunakanlah jika diperlukan.

Silahkan tinggalkan jejak kunjungan anda dengan berkomentar. Komentar juga berguna sebagai motivasi dan koreksi jika ada kesalahan dalam pembuatan posting. Terima kasih.