Cara Membuat Auto Read More (Baca Selengkapnya) pada Postingan Blog

Jika Anda ingin menampilkan isi postingan blog Anda menjadi beberapa postingan dalam satu halaman awal tapi tidak ingin terlihat terlalu panjang ke bawah, maka solusinya adalah menggunakan read more. Read more berarti baca selengkapnya, yakni melanjutkan membaca keseluruhan isi postingan yang bersangkutan. Sebagian bagi yang menggunakan template eksternal mungkin sudah ada 'read more' otomatisnya. Tapi jika belum, ada Anda dapat membuatnya dengan langkah-langkah di bawah ini.

1.   Login ke akun blogger 

2.   Klik Rancangan –>Edit HTML, centang Expand Template Widget

3.   Cari kode </head> kemudian tempatkan kode berikut di atasnya.
(gunakan Ctrl+F untuk mempermudah pencarian)

<script type='text/javascript'>var thumbnail_mode = "no-float" ; summary_noimg = 275; summary_img = 250; img_thumb_height = 100; img_thumb_width = 120; </script> <script src='http://sites.google.com/site/hitsukeproject/summarypost.js' type='text/javascript'/>

Anda juga bisa mengubah kode tersebut sesuai dengan selera.

summary_noimg = 275; kode mengatur tinggi uraian tanpa gambar
summary_img = 250; kode mengatur tinggi uraian dengan gambar
img_thumb_height = 100; kode ini untuk tinggi gambar thumbnailnya
img_thumb_width = 120; kode ini untuk lebar gambar thumbnailnya

4.   Cari kode  <data:post.body/>, bagi yang sudah menggunakan read more secara manual akan ada dua kode yang seperti itu, cari yang pertama, ganti kode tersebut dengan kode berikut :

<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 </a></span> </b:if> <b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

Kamu juga bisa mengganti kode ‘Read More’ sesuai dengan keinginan kamu, misalnya ‘Baca Selanjutnya’, ‘Baca Selengkapnya’ dan lain-lain. Pada blog ini saya menggunakan ‘Coretan Selengkapnya’.

5.   Simpan template dan lihat hasilnya.

Bagi yang sudah menggunakan read more manual kode yang terlihat seperti di bawah ini, tapi tidak semua kode terlihat seperti di bawah, tergantung template Anda.

<div class='post-header-line-1'/> <div class='post-body entry-conten'> <b:if cond='data:blog.pageType == "item"'> <style>.fullpost{display:inline;}</style> <p><data:post.body/></p> <b:else/> <style>.fullpost{display:none;}</style>  <p><data:post.body/></p> <a expr:href='data:post.url'>Read More </a> </b:if>

Hapus kode yang dicetak tebal dan gunakan langkah 3 sampai 5.

Selamat mencoba...