Expandable post atau yang umum di kenal dengan istilah "Read More" adalah sebuah fitur yang membuat postingan sobat blogger terpenggal di halaman index Beranda atau Home Page. Di setiap akhir preview, terdapat sebuah link yang menuju ke halaman posting, yang biasanya menempel pada kata "Read More" atau "Baca Selengkapnya".
Perbedaan antara Read More konvensional dengan Read More Otomatis dengan thumbnail adalah :
Read More Konvensional :
- Menggunakan HTML
- Harus memasukkan kode di dalam postingan
- Panjang potongan atau penggelan dapat disesuaikan.
- Fungsi Read More hanya akan terlihat kalau kode sudah ditambahkan di dalam postingan.
- Tanpa Thumbnail. Untuk menampilkan thumbnail atau gambar, maka gambar harus diletakkan dibagian paling atas postingan.
Read More Otomatis dengan thumbnail :
- Menggunakan Javascript.
- Tidak perlu memasukkan kode di dalam postingan.
- Panjang potongan dapat di ubah, tetapi akan berpengaruh di semua postingan.
- Read More diterapkan untuk semua posting, tanpa terkecuali.
- Secara otomatis menampilkan thumbnail atau gamabar yang ada di dalam postingan tersebut.
Itu adalah sekilas gambaran tentang perbedaan antara Read More Konvensional dengan Read More Otomatis dengan thumbnail. Untuk membuat Read More otomatis atau untuk membuat fitur baca selengkapnya, silahkan ikuti langkah di bawah ini!
Cara Buat Auto Read More :
- Login dulu di akun blogger sobat
- Dari Design, klik Edit HTML dan tandai Expand Widget Template
- Back Up terlebih dahulu template sobat.
- Cari kode </head>
- Tambahkan kode berikut Setelah atau di bawah kode </head>
<script type='text/javascript'>
var thumbnail_mode = "yes"; //yes -with thumbnail, no -no thumbnail
summary_noimg = 430; //summary length when no image
summary_img = 340; //summary length when with image
img_thumb_height = 200;
img_thumb_width = 200;
</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(thumbnail_mode == "yes") {
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>
<!-- Auto read more script End -->
- Setelah itu, cari kode <data:post.body/>
- Ganti kode <data:post.body/> dengan kode berikut :
<!-- http:lenterablogger.blogspot.com -->
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'> createSummaryAndThumb("summary<data:post.id/>");
</script>
<a class='more' expr:href='data:post.url'>Read more ...</a>
</b:if>
</b:if>
<!-- Auto read more End -->
- Klik Preview, kalau sudah berhasil klik Save
Tambahan :
- summary_img adalah jumlah karakter yang akan ditampilkan dalam penggalan dengan thumbnail.
- summary_noimg adalah jumlah karakter yang akan ditampilkan dalam penggalan tanpa thumbnail
- img_thumb_height dan img_thumb_width adalah ukuran tinggi dan lebar gambar, Sobat blogger bisa menyesuaikan angka tersebut.
- Kata "Read more" bisa di ganti dengan kata yang sobat blogger inginkan misalnya : Baca Selengkapnya, Lebih Lengkap, Baca Lagi, Selengkapnya, dll.
Kalau postingan atau artikel ini bermamfaat buat sobat blogger, jangan lupa tinggalkan pesan atau komentar sobat pada kolom komentar di bawah ini
Read more at http://lenterablogger.blogspot.com/2012/04/cara-buat-auto-read-more.html#CigzKlC8cMFX1oq1.99
