Membuat “Read More” pada Tampilan Blogspot

Mungkin Anda pernah tidak puas dengan tampilan blog Anda karena halaman depan blog Anda di Blogspot menampilkan keseluruhan isi posting yang panjang. Untuk mengatasinya Anda bisa meringkas tampilan dengan memberikan tombol ‘read more’ atau ‘baca selengkapnya’ pada posting. Sehingga pada halaman depan blog Anda hanya akan ditampilkan sebagian isi tulisan saja.

Dengan asumsi bahwa pengguna Blogspot telah menggunakan template Blogger yang baru (bukan template klasik), berikut ini saya mencoba memaparkan cara untuk meringkas tampilan halaman depan blogspot dengan menggunakan Read More.

Langkah 1

Setelah Anda login ke Blogger, Anda akan masuk ke halaman Dasbor. Untuk mengubah tampilan, klik tombol Tata Letak yang ada di sisi kanan bagian keterangan blog Anda, kemudian klik tab Edit HTML. Jangan lupa mencontreng opsi Expand Template Widget.

Langkah 2

Cari kode <div class=’post-body’> atau <div class=’post-body entry-content’> , untuk mempermudah pencarian pilih menu edit pada browser lalu klik Find in Page, ketikkan kode tersebut lalu klik next.

Lalu Copy kode HTML di bawah ini kemudian paste di bawah kode tadi

<b:if cond=’data:blog.pageType == “item”‘>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>

Kemudian lihat kebagian bawah sehingga terlihat kode <p><data:post.body/></p> , copy kode HTML di bawah ini kemudian paste di bawah kode tadi

<a expr:href=’data:post.url’>Read More……</a>

</b:if>

Kemudian klik tombol bertuliskan Save Template.

Langkah 3

Berikutnya klik menu Pengaturan dan pilih tab Format. Pada layar kosong disamping tulisan  Templat Entri, isi text kode :

<div class=”fullpost”>

</div>

Klik Simpan Setelan.

Langkah 4

Untuk memposting artikel, klik menu Posting, pilih tab Entri Baru. Pada jendela pengisian tulisan, ada pilihan Tulis dan Edit HTML. Anda klik Edit HTML maka pada layar akan tampak kode yang telah Anda buat pada bagian format.

Letakkan tulisan yang akan anda muat di halaman depan blog di atas kode <div class=”fullpost”>dan letakkan tulisan yang anda ‘sembunyikan’ di halaman depan blog pada bagian di antara kode tersebut dan </div>.

Langkah 5

Setelah selesai menulis, klik Terbitkan Entri. Lalu lihat hasilnya pada blog Anda.

Jika Anda telah memiliki banyak posting sebelumnya, maka Anda terpaksa mengubah satu per satu postingan anda dengan cara ini. Memang butuh kesabaran untuk melakukannya, tapi yakinlah bahwa blog Anda akan tampak bagus dan ringkas setelah Anda melakukan cara ini.

Selamat mencoba!

Artikel terkait :

• Mengubah Template Blogspot
• 15 Situs Penyedia Template Blogger Gratis
• Mengubah Layout dan Elemen Halaman Blog di Blogger

Popularity: 8% [?]