Tips Menampilkan Postingan Hanya Judulnya Saja

Posted by Galang 26 Maret 2011

Daftar Sekarang Bonus $10 langsung dari PROFITCLICKING

Ini adalah trik buat memotong atau mempersingkat artikel di halaman depan, sebagian orang ada juga yg mempersingkat nya dengan mengunakan trik readmore, tapi kali ini kita hanya menampilkan hanya judulnya saja, dan yang terlihat di halaman depan hanya judul postingannya saja. Contohnya bisa Anda lihat Disini

Agar pada halaman depan hanya menampilkan judul posting saja, berikut langkah-langkahnya :

Silahkan login ke blogger dengan ID anda.
Klik Rancangan
Klik menu Edit HTML.
Disarankan untuk membuat backup terlebih dahulu, klik pada tulisan Download Template Lengkap.
Carilah kode ]]></b:skin>

Copy kode berikut, lalu paste di bawah 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{display:none;}
     </b:if>
     </b:if>
     </style>

Klik tombol SIMPAN TEMPLATE.
Selesai. Silahkan lihat hasilnya.

Mudah bukan? namun, dengan memasang kode diatas masih menyisakan beberapa elemen seperti tanggal posting, komentar dan yang lainnya. Jika anda ingin menghilangkan semuanya dan yang tersisa hanya judul post nya saja, mungkin anda bisa menggunakan kode berikut :

<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>

Jika ternyata masih ada elemen tersisa selain judul post, mungkin kode template anda tidak mengikuti standar template blogger. Bagaimana solusinya? anda harus mengenali struktur template anda.
Bagi anda pengguna browser internet firefox, kang Rohman punya tips mudah mengenali struktur template anda yaitu dengan menginstall add-ons Web Developer yang bisa anda download di add-ons for firefox.
Sekarang kang Rohman anggap anda telah menginstall add-ons web developer pada firefox yang anda gunakan. Silahkan buka alamat blog anda ( tentunya yang akan di edit sesuai artikel diatas ). Klik menu Information, kemudian pilih Display Div Order.

Maka secara otomatis akan ditampilkan struktur div dari template anda. Contoh gambar :

Dari gambar tersebut terlihat bahwa tanggal posting serta komentar disimpan dalam elemen div :
.databarleft
.datebarright

Sehingga kode yang digunakan menjadi seperti ini :

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

Semoga bisa dipahami.
Update : kode telah di sempurnakan agar tidak konflik dengan static page / static post

Sekian Terima Kasih