Menampilkan judul posting di halaman beranda

Selasa, 29 Juni 2010
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...

24 komentar (Menampilkan judul posting di halaman beranda)

Posting Komentar
  1. Rizky2009 » Juni 29, 2010 9:42 PM | permalink

    wah ini yg aq cari sob, tp seperti apa yg demonya, g ada demonya yh sob, salam kenal yh

  2. Rizky2009 » Juni 29, 2010 9:42 PM | permalink

    penasaran aq sob, kapan2 akan aq coba yh

  3. Tihang karas » Juni 29, 2010 9:59 PM | permalink

    Mirip di template ini sob, dan untuk demo kolom post berbeda tampilan antara homepage dan indeks post, bisa juga di lihat ditemplate saya sebelumnya lihat disini.

  4. TUKANG CoLoNG » Juni 30, 2010 4:59 PM | permalink

    kurang demo nya nih,,biar tambah acik..:)

  5. secangkir teh dan sekerat roti » Juni 30, 2010 7:10 PM | permalink

    ooo yang jadi kaya akang nih... ?

  6. Tihang karas » Juli 01, 2010 6:07 AM | permalink

    Yah mirip2lah, cuma gak sehebat masternya....

  7. TUKANG CoLoNG » Juli 01, 2010 5:37 PM | permalink

    hai moga gag bosen aku komen disini ya,,:)

  8. Pawewet » Juli 01, 2010 8:52 PM | permalink

    wah.. matur tenkyu ilmunya...sangat bermanfaat..slam kenal di kunjungan perdanaku...

  9. tomo » Juli 02, 2010 9:05 AM | permalink

    Thanks gan tutornya ya

  10. Ferdinand » Juli 02, 2010 9:39 AM | permalink

    kayanya keren juga nie.....ikutan ah...makasih udah d'share Sob..!!! Happy blogging

  11. Gamers » Juli 02, 2010 9:06 PM | permalink

    sukses selalu bro :D

    muantap ilmunya ....:D

  12. infophone-kdr » Juli 03, 2010 5:19 PM | permalink

    Wach mantap sob tutornya kpn2 akan langsung dipraktekkan coz nich jg lg gencar2nya buat template full css,dipelajari dulu dan sukses selalu sob...:D

  13. Tihang karas » Juli 03, 2010 5:34 PM | permalink

    Sip..., nanti bagi-bagi ilmunya ya...

  14. TUKANG CoLoNG » Juli 03, 2010 9:27 PM | permalink

    hadir lagi..:)
    jangan bosen yah..:D

  15. Ferdinand » Juli 06, 2010 3:02 PM | permalink

    Wah mantabz Sob......aku kaget pertama masuk ke blog ini......lama ga kesini udah beda banget hhe......tambah keren Sob....

  16. Bestori Gultom » Juli 08, 2010 6:55 PM | permalink

    thanks infonya sob....

  17. Daftar dan langsung dapat $10 » Juli 08, 2010 9:01 PM | permalink

    Progam baru saja lounching neh. Dftar lgsg dapat $10. Dan dalam masa promosi, akan dapat $2 dr referal.. Daftar dan promosiin link referal sodara. Pembayaran lewat Paypal. Program referal ini akan berakhir sampai tanggal 1 Agustus.

  18. Erianto Anas » Juli 12, 2010 11:10 PM | permalink

    demonya sdh langsung pada blog ini ya...
    Unik sekali temapilannya mas...
    *makasi mas telah berkunjung ke BLOGGER VIRUS

  19. Tihang karas » Juli 13, 2010 12:09 AM | permalink

    Eriyanto anas
    Ya Om, cuma sedikit menggeser comment link-nya.

  20. E BOOKS » Juli 19, 2010 8:25 AM | permalink

    ssalam kenal dari kami penerbit buku islami dan motivasu pro_u media lampung.kunjungi blog segarrrrrrrrrrrr kami di http://proumediadilampung.blogspot.com/

  21. E BOOKS » Juli 19, 2010 8:27 AM | permalink

    salam kenal kunjungi blog segarrr http://proumediadilampung.blogspot.com/

  22. oempak » Juli 23, 2010 6:21 PM | permalink

    mirip yg di halaman depan blog ini ya, pengen sih cm judul aja ditampilin di home biar bkin loadingnya cepetan, cm lg mikir" pas-in buat yg lainnya nih

  23. gustie » Agustus 08, 2010 10:21 PM | permalink

    wah... ini dia yg gue cari, kok gmbarnya gak ditampilin bos?
    tpi thank infonya ya,
    slam kenl...

  24. Marthin » Oktober 09, 2010 8:00 PM | permalink

    trims

Back to form

Mohon berkomentar sesuai topik posting di atas !