Cara Hanya Menampilkan Judul di Halaman Postingan

Kamis, 22 Desember 2011

Pada tampilan standar template blogspot umumnya menampilkan seluruh artikel di halaman home atau beranda. Kiranya dengan model tampilan seperti itu akan membutuhkan tempat yang lumayan panjang, jika dalam pengaturan "format posting" di isi dengan jumlah lebih dari 1 postingan, memungkinkan akan capek deh ketika menggulung roll mouse sampai beberapa kali. Sehingga kondisi tersebut perlu disiasati dengan cara menghemat tampilan seminimalis mungkin.

Salah satu langkah dalam upaya penghematan tampilan adalah dengan cara membuat read more atau baca selengkapnya. Yakni, fasilitas untuk memperpendek tampilan tiap postingan.

Cara yang ke-2 adalah seperti yang baru saja lakukan pada blog butut ini, yaitu hanya menampilkan judul di halaman utama. Pada langkah ini, selain dapat menghemat tampilan blog, bisa juga untuk meringankan loading, telah dicoba dengan menampilkan 10 postingan dalam tiap halaman tapi menghasilkan loading yang masih aman dan terkendali. Yakni, lebih ringan dari sebelumnya yang padahal hanya menampilkan 4 postingan per halaman. Contoh tampilannya sebagai berikut.

Nah, untuk membuat tampilan postingan di halaman beranda jadi seperti itu, langkah dalam memodifikasinya adalah seperti di bawah ini.

1. Masuk ke akun blogger anda.

2. Klik Rancangan.

3. Pilih menu Edit HTML. Tapi disarankan agar terlebih dulu mendownload template lengkap, tujuannya sebagai back up kalau-kalau ada kegagalan atau sebagai dokumentasi template aslinya.

4. Cari kode ]]></b:skin>

5. Copy kode berikut ini, dan paste di atas kode ]]></b:skin>

<style type='text/css'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
.post-body, .post-footer, .jump-link,
.post-timestamp, .reaction-buttons,
.star-ratings, .post-backlinks,
.post-icons, .date-header{display:none;}
</b:if>
</b:if>
</style>

6. Sebagai langkah penutup, klik tombol Simpan Template. Maka selesai sudah proses modifikasi tampilan halaman posting anda.

*Catatan :

Kode di atas akan memberi tampilan seperti yang ada di blog ini, atau seperti contoh gambar di atas. Sedangkan jika ingin menampilkan keterangan jumlah komentar dan tanggal postingan serta elemen lain, anda bisa menggunakan kode yang ini.

<style type='text/css'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
.post-body{display:none;}
</b:if>
</b:if>
</style>

Diantara kedua model tampilan masing-masing menjadi pilihan anda, untuk hal ini saya tidak turut campur. Selamat mencoba.