Klik Label yang Tampil Judul Posting Saja

trik blogger

Ketika orang mengunjungi blog kamu dan meng-klik sebuah label (kategori) yang ia inginkan, maka akan tampil posting-posting yang mempunyai label tertentu (ex : Trik Blogger, Tips Blogging, SEO) tersebut. Berapa kali kamu mem-posting dengan label tertentu, sejumlah itu pula posting yang akan tampil. Coba bayangkan jika posting dengan label tertentu memiliki jumlah yang banyak, setelah ditotalkan jumlahnya ada 25 posting. Dan belum tentu pula posting pada urutan pertama, kedua, atau ketiga yang menjadi target pencarian pengunjung blog kamu. Betapa ‘bete’-nya ia, karena harus bermain dengan scrool mouse untuk mencari posting yang dia inginkan, namun belum ketemu juga. Di samping itu semakin banyak posting yang ditampilkan, maka akan berpengaruh pula dengan waktu loading suatu blog. Sudah ‘bete’ karena posting belum ketemu, ditambah loadingnya lama, jadi sama dengan 2× ‘bete dong’.

Seharusnya blog kamu memiliki navigasi yang user friendly, sehingga memudahkan pengunjung untuk meng-eksplore isi blog. Alangkah lebih efesiennya jika pengunjung meng-klik sebuah label, maka yang tampil adalah judul posting saja (mirip daftar isi). Kemudian dengan suka-cita pengunjung tersebut akan memilih, judul mana yang nantinya akan menampilkan isi posting sesuai dengan keinginannya. Nah, ini baru enak…

Setelah segala tetek bengek di atas, saya akan langsung membawa kamu ke trik blogger tentang bagaimana menampilkan judul posting saja ketika pengunjung meng-klik sebuah label, halaman hasil pencarian blog, halaman arsip, dan selain halaman beranda:

  • Login dulu ke akun Blogger™ kamu.
  • Pilih tab Tata Letak --> Edit HTML --> centang "Expand Template Widget".

    Tips : Sebelum melakukan edit template, sebaiknya simpan dulu template kamu yang ada dengan meng-klik tulisan Download Template Lengkap. Kemudian simpan dalam harddisk atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan kamu sudah memiliki back-up untuk mengembalikannya seperti semula.

  • Cari kode di bawah ini:
    <!-- posts -->
    <div class='blog-posts hfeed'>
      <b:include data='top' name='status-message'/>
        <data:adStart/>
      <b:loop values='data:posts' var='post'>
      <b:if cond='data:post.dateHeader'>
        <h2 class='date-header'><data:post.dateHeader/></h2>
      </b:if>
      <b:include data='post' name='post'/>

    Tips : Kalau susah mencarinya, coba tekan tombol F3 di keyboard. Maka akan timbul menu toolbar pencarian di bawah browser (Firefox), sehingga kamu tinggal memasukkan kata yang ingin dicari.

  • Ganti semua kode yang berwarna merah dengan kode berikut:
    <b:if cond='data:blog.homepageUrl != data:blog.url'>
      <b:if cond='data:blog.pageType != "item"'>
        <a expr:href='data:post.url'>
          <data:post.title/>
        </a><br/><br/>
      <b:else/>
        <b:include data='post' name='post'/>
      </b:if>
    <b:else/>
      <b:include data='post' name='post'/>
    </b:if>
  • Jangan lupa disimpan.

Posting terkait: Modifikasi Tampilan Judul Posting Tanpa Isi.

Pembaharuan (13 Desember 2012) sesuai dengan komentar @Liz Wana — Posting di atas diterbitkan sebelum pihak pengembang Blogger™ menambahkan fitur halaman statis, sehingga akan mengakibatkan posting pada halaman statis tidak bisa terbuka. Oleh karena itu kita perlu untuk memodifikasi markah di atas dengan kode berikut:

<b:if cond='data:blog.homepageUrl != data:blog.url'>
  <b:if cond='data:blog.pageType == "static_page"'>
    <b:include data='post' name='post'/>
  <b:else/>
    <b:if cond='data:blog.pageType != "item"'>
      <a expr:href='data:post.url'>
          <data:post.title/>
      </a><br/><br/>
    <b:else/>
      <b:include data='post' name='post'/>
    </b:if>
  </b:if>
<b:else/>
  <b:include data='post' name='post'/>
</b:if>

Catatan: Kode yang diberi warna merah dapat dihapus dan perlu disesuaikan dengan karakteristik pengkodean pada masing-masing template.

41 komentar untuk “Klik Label yang Tampil Judul Posting Saja”

  1. mas tumpang tanya cara ngilangin garis bawah pada link label gimana y???

    BalasHapus
  2. Klo dihilangkan, maka semua link tidak ada garis bawahnya.
    Pertama, cari kode a:link {color:#00FF80;}
    Kedua, tambahkan kode text-decoration:none;, sehingga kodenya jd seperti ini :
    a:link {
    color:#00FF80;
    text-decoration:none;
    }

    BalasHapus
  3. arigatoo mas hehehehehe~~~~ :x

    BalasHapus
  4. waduh ga bs ne mas....
    format bkn HTML tp XML gmn caranya tu mas....

    BalasHapus
  5. to Luv My Family: sama aja mas formatnya sebab kode yang diambil antara <body> ... </body>

    BalasHapus
  6. mas OB,maap ni gw tnya mulu :p
    klo untuk tmpilnya tnpa icon kalendernya gimana mas?
    tp hilangnya pada saat yang bgian didalam ktegorinya aja,tnpa mnghilangkan ikon calender yang ada di atas postingan itu sndiri..
    thnks bnyak ni mas...

    BalasHapus
  7. to F3hry: cari kode CSS date-header atau h2.date-header tambahkan atribut visibility: hidden; ex:
    h2.date-header {
    margin:.3em 0 0;
    height: 0px;
    visibility: hidden;
    }

    BalasHapus
  8. klo ditmbahkan kode sperti yg mas OB saranin,untuk tnggal yg diatas postingannya jg ikut hilang mas..
    jd mksudnya gimana caranya agar tgl di dlm ktegori aj yang hilang bkn yang diatas postingan mas..
    ada cara yg lain ga mas?

    BalasHapus
  9. to F3hry: Klo yang seperti itu, untuk sementara OB belum bisa atau tidak bisa. Sebab klik label yang muncul judul posting saja merupakan ringkasan dari klik label muncul postingannya. Terkecuali jika nambah, kode lagi post-timestamp dan date-header tetap visibility: hidden;

    BalasHapus
  10. ga ada ya mas..
    ok deh klo gtu gpp..
    thnks mas.. ;)

    BalasHapus
  11. Salam sukses, Terima kasih tips-nya sudah dicoba di blog saya dan berhasil. Kalau yang ditampilkan setelah setelah buat postingan gimana ?

    BalasHapus
  12. Mas OB, bagaimana cara membuat judul posting pakai kotak border tiga dimensi warna abu-abu seperti punya OB yang keren, Terima kasih.

    BalasHapus
  13. Mas klo misalnya di tambahkan gambar atau garis bawah gimana mas ??? seperti punya mas

    BalasHapus
  14. Mas OB,klo tampil judulnya aj tp diiringi dengan garis kotak diluarnya gimana? kya sidebar gitu,di pisah dengan memberi kotak berupa garis...

    BalasHapus
  15. Mantabh blognya.....sekali coba langsung bisa....
    bookmark dulu....

    BalasHapus
  16. makasih sob..
    akhirnya bisa juga aku membuatnya sob..

    BalasHapus
  17. keren tips -tipsnya , makasih ya , suksess...

    BalasHapus
  18. nice inpo bro, ditunggu kunjungannya

    BalasHapus
  19. thanks bgt triknya mas
    langsung bisa nih
    hehe

    BalasHapus
  20. Demak, 02 Januari 2009, Jam : 10.55 WIB

    Tutorial dari anda sudah saya ikuti, tapi tolong di koreksi, apakah langkah saya sudah betul atau belum ?
    Salam hangat,
    BRAM IRIANTO
    http://www.kencangratis.blogspot.com

    BalasHapus
  21. Sepertinya posting ini pernah saya baca,tapi saya lupa alamatnya. Gmn mas..Betul tak? Klo boleh tanya ,gimana supaya judul posting yg muncul di SEO. Punya saya yg selalu muncul cuma judul blog. Tolöng mas di bantu.(judul blog saya mansyurin)

    BalasHapus
  22. Rekomendasi yang bagus ternyata...trims bang dengan begini pencarian label di blog q jadi lebih singkat dan memudahkan pengunjung....

    BalasHapus
  23. Mas, punya saya berhasil, tapi tanggal postnya kok ikut ya?? gimana cara menghilangkan tanggalnya, biar yang kelihatan hanya judulnya doang. tengkyu mas sebelumnya. Gbu

    BalasHapus
  24. aduh... makasi ya mas tutorialnya sangat membantu, hidup bloger

    BalasHapus
  25. One stop place to find best yamaha portable generators with best price and offer more than 35% Off

    BalasHapus
  26. One stop place to find best high back booster car seat with best price and offer

    BalasHapus
  27. One stop place to find best badger basket changing table with best price and offer

    BalasHapus
  28. One stop place to find best Vocal Effects Processor with best price and offer

    BalasHapus
  29. Defensive Driving is essentially driving in a manner that utilizes proper driving strategies to enables motorists to whereabouts identified hazards in a expected manner.
    These strategies go all right beyond instruction on basic above laws and procedures.

    With defensive driving classes, students learn to recover their driving skills nearby reducing their driving risks by means of anticipating situations and making justifiable educated decisions.
    Such decisions are implemented based on street and environmental conditions bounty when completing a sure driving maneuver.
    The benefits of delightful a defensive driving group reorganize with each state, but often file a reduction of points on your driver’s license following a ticket and the commitment that indemnity rates inclination not increase.
    In some states, taking a [url=http://www.floridatrafficinstitute.com] florida traffic school [/url] class can mean a reduction of up to 10% in your insurance rates exchange for a spell of three to five years.
    Upstanding as the benefits of defensive driving classes modify with each state, so do the requirements. While most primary defensive driving classes are four hours extended, some can be as lengthy as six or eight hours.

    In some states, students hold the choice to take defensive driving courses online or nearby watching a video record or DVD, while other states only authorize students to take possession of defensive driving in a classroom setting.
    The contents of a defensive driving execution are regulated by each dignified and are designed to staff you based on the laws of your state. In spite of that, most defensive driving classes contain alike resemble information.

    Losses from above crashes tease both popular and bosom impacts.
    Roughly 41,000 lose one's life annually as a consequence of shipping collisions, with an additional 3,236,000 injuries.
    Up 38% of all ordained auto crashes are alcohol reciprocal with another 30% attributed to speeding.

    The causes of these crashes, excitable influence and rate in dollars burnt- on car crashes are typically covered in defensive driving courses.
    The goal of satisfactory defensive driving is to diminish the jeopardize of these accidents by becomingly educating students to train advice and charitable judgment while driving.

    On the roadways, drivers partake of to stock with several factors that can strike their driving.
    Yet some of them are beyond the control of the driver, mental factors can be controlled by means of the driver if he knows what to look on and how to fondle it.

    Defensive driving courses keep an eye on to cynosure clear on how drivers can influenced negative psychological factors such as unneeded tension, languor, high-strung distress and other consanguineous issues.
    The florida above kind courses purpose help you depose points from your license. Additional tidings will be posted at a later date.

    BalasHapus
  30. Defensive Driving is essentially driving in a technique that utilizes proper driving strategies to enables motorists to hail identified hazards in a predictable manner.
    These strategies skim through well beyond instruction on central see trade laws and procedures.

    With defensive driving classes, students learn to fix up their driving skills sooner than reducing their driving risks next to anticipating situations and making justifiable hip decisions.
    Such decisions are implemented based on road and environmental conditions bounty when completing a shielded driving maneuver.
    The benefits of delightful a defensive driving group reorganize with each magnificence, but usually include a reduction of points on your driver’s allow following a ticket and the coolness that guaranty rates will not increase.
    In some states, taking a [url=http://www.floridatrafficinstitute.com] florida traffic school [/url] class can mean a reduction of up to 10% in your surety rates for a full stop of three to five years.
    Well-grounded as the benefits of defensive driving classes vary with each circumstances, so do the requirements. While most central defensive driving classes are four hours extended, some can be as dream of as six or eight hours.

    In some states, students own the election to engage defensive driving courses online or by watching a video record or DVD, while other states barely consent to students to take possession of defensive driving in a classroom setting.
    The contents of a defensive driving routine are regulated on each state and are designed to parade you based on the laws of your state. However, most defensive driving classes admit alike resemble information.

    Losses from conveyance crashes bring into the world both popular and exclusive impacts.
    Approximately 41,000 lose one's life annually as a consequence of see trade collisions, with an additional 3,236,000 injuries.
    Wide 38% of all harmful car crashes are moonshine reciprocal with another 30% attributed to speeding.

    The causes of these crashes, agitated weight and expense in dollars spent on motor crashes are typically covered in defensive driving courses.
    The goal of satisfactory defensive driving is to diminish the risk of these accidents by properly educating students to burden caution and upright judgment while driving.

    On the roadways, drivers take to stock with distinct factors that can affect their driving.
    Though some of them are beyond the control of the driver, psychological factors can be controlled beside the driver if he knows what to look on and how to handle it.

    Defensive driving courses exhibit to cynosure clear on how drivers can overcome pessimistic intellectual factors such as unneeded emphasis, weary, tense distress and other related issues.
    The florida above instil courses choose forbear you erase points from your license. Additional information want be posted at a later date.

    BalasHapus
  31. Thanks info nya mas. saya cari di situs luar, ternyata disini ada :)

    BalasHapus
  32. Thank info nya..dah di coba berhasil namun ada kendala dikit...setelah menerapkan tutorial di atas pengubahan pada label berhasil namun di halaman statis tidak dapat di buka yang tampil hanya judul halaman statis aja,mohon pencerahan nya...http://www.gallerydunia.com/

    BalasHapus