Modifikasi Auto Read More untuk Blogger

Read more berfungsi untuk memotong tulisan panjang dalam satu posting sehingga hanya beberapa kalimat yang akan ditampilkan, sisanya akan terlihat setelah read more diklik. Beberapa narablog biasanya menggunakan fungsi read more pada halaman depan dimana terdapat banyak posting. Istilah yang biasa digunakan pada fungsi read more ini antara lain : Read More, Selengkapnya, Baca Selengkapnya, More, Full History, Rest, dan lain-lain.

Dulu saya sempat membahas cara membuat read more pada Blogspot yang dilakukan secara manual pada tab Compose dengan cara klik tombol "Insert Jump Break" (gambar icon kertas sobek) atau dengan cara menulis kode <!--more--> pada tab Edit HTML ketika posting. Setelah itu akan tampil garis horizontal. Hanya kalimat sebelum garis horizontal atau sebelum <!--more--> yang akan ditampilkan, sisanya akan terlihat setelah read more diklik. Sampai saat ini cara tersebut masih sering digunakan khusunya penulis yang ingin leluasa memotong jumlah kata atau kalimat yang akan ditampilkan sebelum read more diklik. Kekurangan metode ini adalah selain penulis harus melakukannya secara manual juga penulis terkadang  lupa sehingga tulisan akan tetap tampil semuanya ketika dipublikasikan meskipun tentu saja dapat diedit kemudian.

Untuk mengantisipasi hal ini para programmer membuat script khusus yang akan disisipkan dalam kode HTML template Blogger. Di antara mereka ada yang membuat widget khusus yang dapat disisipkan pada salah satu gadget tanpa judul. Script tersebut nantinya tidak akan terlihat saat dipublikasihan walaupun disimpan pada sidebar.

Di bawah ini adalah cara membuat Read More secara otomatis (Auto Read More) yang saya kutif dari blog salah satu senior saya O-om.com mengenai cara pasang Auto Read More tanpa file .js dimana pemenggalan kata akan dilakukan secara otomatis berdasarkan jumlah kata yang dapat diseting dengan atau tanpa gambar di dalam posting. Hebatnya lagi, fungsi Read More ini dapat menampilkan image pertama dalam postingan dan meletakan image tersebut di awal paragraf meskipun gambar tersebut berada di tengah atau akhir postingan. Tampilan read more nantinya akan seperti ini:" Read More - Judul Artikel".

Dalam postingan ini saya tidak akan membahas caranya secara detil karena untuk keperluan itu sobat blogger dapat mempelajarinya langsung di O-om.com. Kali ini saya bermaksud untuk menjelaskan beberapa modifikasi fungsi auto read more ala Kang Agus (O-om). Sebelum melakukan trik ini, sebaiknya backup dulu template blog untuk jaga-jaga kalau terjadi kesalahan.

A. Merubah tulisan "Read More - Judul Posting" menjadi kalimat sendiri

1. Masuk ke Design, pilih Edit HTML, centang Expand Widget Templates di atas kotak editor.
2. Cari kode <span class='rmlink' style='float:left'><a expr:href='data:post.url'>READ MORE - <data:post.title/></a></span> kalau kesulitan tekan CTRL+F.
3. Ganti kode berwarna merah dengan kalimat Anda sendiri misalnya Baca Selengkapnya, Selanjutnya, More >>, dan sebagainya. Jika akan menambahkan beberapa simbol misalnya tanda lebih besar, gunakan penulisan entitas HTML. 
4. Save Template dan lihat hasilnya.

B. Merubah tulisan "Read More - Judul Posting" dengan gambar<

1. Lakukan langkah 1-2 pada point A.
2. Ganti kode berwarna merah dengan <img src="url gambar" alt="readmore"/>. Yang berwarna merah adalah alamat file gambar read more yang telah disiapkan sebelumnya.
3. Save Template dan lihat hasilnya.

C. Merubah posisi read more dari sebelam kiri ke sebelah kanan

1. Lakukan langkah 1-2 pada point A.
2. Ganti kode berwarna pink dengan style='float:right'.
3. Save Template dan lihat hasilnya.

D. Mengatur jumlah karakter dan ukuran gambar

1. summary_noimg = 250; (250 adalah jumlah karakter yang akan ditampilakn sebelum read more jika pada postingan tidak terdapat image/ gambar)
2. summary_img = 250; (250 yang ini juga adalah jumlah karakter yang akan ditampilkan sebelum read more tetapi pada posting yang ada gambarnya)
3. img_thumb_height = 120; (ukuran tinggi gambar dalam pixel)
4. img_thumb_width = 120; (ukuran lebar gambar dalam piksel)

E. Memperbaiki ratio gambar (perbandingan lebar dan tinggi) 
Jika script auto read more tersebut langsung dipakai tanpa diedit terlebih dahulu, maka default gambar yang tampil akan berbentuk bujur sangkar ukuran 120 x 120 pixel. Bayangkan jika foto atau gambar persegi panjang dipaksa tampil dalam bentuk bujur sangkar, gak enak kan?  Agar terlihat sedikit professional maka perbandingan lebar dan tinggi gambar harus tetap sesuai. Caranya dapat dilakukan dengan membuat salah satu (width atau height) menjadi auto. Berikut langkah-langkahnya:

1. Masuk ke Design, pilih Edit HTML, centang Expand Widget Templates di atas kotak editor.
2. Cari kode Java Script berikut {
   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;
   }
3. Ganti salah satu kode berwarna merah dengan auto. hanya salah satunya.
4. Save template dan lihat hasilnya.

Selamat mencoba.

Artikel Terkait:

Categories: Tutorial Blogger