Ringkasan Otomatis Dengan Link Read More Dan Thumbnail

Ketika kita membuat sebuah posting di blog kemudian dipublish, secara default isi posting tersebut akan ditampilkan secara penuh pada halaman depan blog kita. Mungkin anda menginginkan agar tampilan di halaman depan tersebut setiap isi posting tidak ditampilkan secara penuh, melainkan hanya berupa ringkasan-ringkasan saja (seperti terlihat pada tampilan blog ini).

Tampilan berupa ringkasan (disebut juga excerpt atau summary) bertujuan memudahkan pengunjung untuk mencari tulisan-tulisan yang menarik dari sebuah blog, dengan cukup melihat ringkasannya. Apabila tertarik dengan sebuah tulisan, pengunjung tersebut dapat melihat isi posting secara penuh dengan sebuah klik pada link yang biasanya bertuliskan "read more" atau "baca lebih lanjut".

Sekedar informasi, untuk blog di Wordpress.com anda bisa melakukannya secara manual dengan klik tombol bergambar kertas terpotong pada form pembuatan posting.

Khusus untuk blog di Blogger/Blogspot, berikut ini saya sampaikan langkah-langkah berikut scriptnya untuk membuat tampilan ringkasan.

Langkah 1.

Download file script utama yaitu auto-excerpt-readmore-thumbnail.js (dalam bentuk file terkompresi .zip, silahkan anda ekstrak setelah didownload).

Langkah 2.

Upload file yang sudah diekstrak tadi ke sebuah server file hosting (pilih saja yang gratisan, misalnya di http://fileave.com atau situs lainnya). Setelah anda upload, copy alamat atau link file yang disediakan oleh penyedia jasa file hosting.

Langkah 3.

Login ke akun blogger anda, di Blogger Dashboard lihat blog milik anda, klik "Layout", kemudian klik "Edit HTML". Untuk berjaga-jaga, sebelum melakukan html editing pada template blog anda, sangat disarankan untuk melakukan backup template. Caranya klik "Download Full Template". Setelah anda melakukan backup itu baru siap malakukan editing. Klik "Expand Widget Template".

Langkah 4.

Cari tag </head> di template anda, kemudian tempatkan html code berikut ini tepat di atasnya:

<script type='text/javascript'>var thumbnail_mode = "no-float" ;
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
</script>
<script src='http://your-uploaded server-link/auto-excerpt-readmore-thumbnail.js' type='text/javascript'/>

Ganti teks link berwarna merah dengan link file script yang tadi anda upload di langkah 2.

Anda juga dapat merubah angka-angka berikut ini:
summary_noimg = 430; --- tinggi ringkasan bila tulisan tak ada gambar
summary_img = 340; --- tinggi ringkasan bila tulisan berisi gambar
img_thumb_height = 100; --- tinggi tampilan thumbnail
img_thumb_width = 120; --- lebar tampilan thumbnail

Langkah 5.

Cari tag <data:post.body/> di template anda, ganti dengan html code berikut 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;padding-top:20px;'><a expr:href='data:post.url'> read more "<data:post.title/>"</a></span>

</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

Anda dapat mengganti kata read more dengan kata lain, misalnya "baca lebih lanjut", atau apa saja.

Langkah 6.

Klik "PREVIEW" untuk melihat perubahannya. Apabila berjalan lancar dan tampilan blog anda tampil dalam bentuk ringkasan sesuai harapan, silahkan klik "SAVE".

Demikian caranya. Sebagai catatan, dengan script ini semua ringkasan dilakukan secara otomatis, tanpa pelu lagi melakukan setting tambahan ketika anda membuat dan mempublish sebuah tulisan/posting.

Selamat mencoba...