Ide@Pelajar

Cara Setting Ulang Auto "Read More"

Cara Setting Ulang Auto "Read More"

Read more dipasang untuk memotong tulisan panjang dalam satu posting sehingga hanya beberapa kalimat yang akan ditampilkan, sisanya akan terlihat setelah read more diklik.

Read more biasanya dipasang di halaman depan yang terdapat banyak posting dalam bentuk gambar atau teks seperti Read More, Selengkapnya, Baca Selengkapnya, More, Full History, Rest, [...], dan lain-lain.

Pemasangan read more pada Blogspot dapat dilakukan 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 saat menulis posting. Setelah itu akan tampil garis horizontal. Kalimat sebelum garis horizontal atau sebelum <!--more--> akan ditampilkan di halaman depan, sisanya akan terlihat setelah read more diklik. 

Kekurangan metode ini, penulis harus melakukan dengan cara manual dengan memilih kalimat terkahir yang akan dipotong, selain itu penulis terkadang  lupa sehingga seluruh tulisan akan tampil tanpa dipotong saat dipublikasikan meskipun tentu saja dapat diedit kemudian.Untuk mengantisipasi hal ini para programmer membuat script khusus yang dapat disisipkan dalam kode HTML template Blogger. 

Di bawah ini adalah cara membuat Read More Otomatis (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 paragrap meskipun gambar tersebut berada di tengah atau akhir postingan. Tampilan read more nantinya akan seperti ini: " Read More - Judul Artikel".
Beberapa templates biasanya sudah ada yang memberikan widget berupa Read More


Berikut ini, Cara Setting Ulang Auto "Read More"

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

• Masuk ke Design, pilih Edit HTML, centang Expand Widget Templates di atas kotak editor.
• 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.
• Ganti kode berwarna merah dengan kalimat sobat sendiri misalnya Baca Selengkapnya, Selanjutnya, More >>, dan sebagainya. Jika akan menambahkan beberapa simbol misalnya tanda lebih besar, gunakan penulisan entitas HTML. 
• Save Template dan lihat hasilnya.

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

• Masuk ke Design, pilih Edit HTML, centang Expand Widget Templates di atas kotak editor.
• 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.
• Ganti kode berwarna merah dengan <img src="url gambar" alt="readmore"/>. Yang berwarna merah tebal adalah alamat file gambar read more yang telah disiapkan sebelumnya.
• Save Template dan lihat hasilnya.

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

• Masuk ke Design, pilih Edit HTML, centang Expand Widget Templates di atas kotak editor.
• 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.
• Ganti kode berwarna biru dengan style='float:right'.
• Save Template dan lihat hasilnya.

D. Mengatur jumlah karakter dan ukuran gambar

• Masuk ke Design, pilih Edit HTML, centang Expand Widget Templates di atas kotak editor.
• Cari kode seperti dibawah ini. Gunakan CTRL+F
• summary_noimg = 250; (250 adalah jumlah karakter yang akan ditampilkan sebelum read more jika pada postingan tidak terdapat image/ gambar)
• summary_img = 250; (250 yang ini juga adalah jumlah karakter yang akan ditampilkan sebelum read more tetapi pada posting yang ada gambarnya)
• img_thumb_height = 120; (ukuran tinggi gambar dalam pixel)
• img_thumb_width = 120; (ukuran lebar gambar dalam piksel)

E. Memperbaiki ratio gambar (perbandingan lebar dan tinggi)

Terkadang pada templates yang sudah menyediakan Auto Readmore, terdapat ketidakpuasan pada ukuran gambar pada postingan. 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:

• Masuk ke Design, pilih Edit HTML, centang Expand Widget Templates di atas kotak editor.
• 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;}

• Ganti salah satu kode berwarna merah dengan auto.
• Save template dan lihat hasilnya.

Read more » Rate this posting: Label : Tips Ngblog