Tips menampilkan judul saja

Memang banyak cara untuk menampilkan judul posting di halaman Beranda/homepage yang mungkin sudah banyak sobat temui di blog-blog senior, Namun tak ada salahnya saya pun mencoba membahasnya di blog CSS-ku yang sederhana ini, dengan harapan yang sama yaitu 'semoga Bermanfaat'. Coba perhatikan kedua kode berikut:

Pertama

<style type='text/css'>
     <b:if cond='data:blog.pageType != &quot;item&quot;'>
===== kode css yang ingin di tampilkan di homepage =====
 { display:inline; }
   </b:if>
</style>

Trik ini dapat digunakan untuk membuat ukuran kolom post yang berbeda antara homepage dan indeks post, untuk indek postingnya dibuat lebih lebar serta float-nya di buat berlawanan, seperti halnya yang terjadi pada template Kang Rohman.

Ke dua

<style type='text/css'>
     <b:if cond='data:blog.pageType != &quot;item&quot;'
 ===== kode css yang ingin di sembunyikan di homepage ===== { display:none; }
   </b:if>
</style>

Dan yang kedua dapat digunakan untuk mencegahnya tampil pada homepage, seperti: blog pager, link, tanggal, isi post, dan lain-lain, kemudian dipasang dibawah ]]><b:skin>

Menampilkan judul post di halaman Beranda

Nah, untuk posting kali ini saya ingin mengulas tentang cara menampilkan judul posting yang akan saya tampilkan di halaman muka. Dalam trik ini maka kita membutuhkan kode yang sama, hanya saja penambahan kode CSSnya yang berbeda.

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

Kode diatas hanya untuk menyembunyikan isi artikelnya saja, sedangkan nama author, jump break atau Read More, post-timestamp, label, reactions buttons, star rating dan lain-lain akan tetap tampil, Bila ingin mencegahnya, sobat dapat mengaturnya di halaman Rancangan atau Tata letak, lalu klik edit pada kolom Posting blog lalu hilangkan tanda centang pada setiap kolom yang tidak ingin di tampilkan, Atau dapat menambahkan kode seperti dibawah ini, setelah .post-body:

.post-footer, .jump-link, .post-timestamp, .reaction-buttons, .star-ratings, .post-backlinks, .post-icons

Sehingga akan menjadi seperti ini:

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

Lalu copy dan pastekan di bawah kode ]]><b:skin>, selamat mencoba & berkreasi... Publish By The Vacancy Job Team