Daftar Isi Otomatis

Cara bikim daftar isi, ada macem2 caranya. Ada yang susah, ada yang gampang. Ada yang bikin blog berat, ada yang g. Semua ada kelamahan dan kelebihannya.

Setahu Ayas, banyak cara membuat daftar isi yang g bikin blog g lemot alias berat. Tapi, rata2 cara buatnya dengan cara menuliskan link2 postingan kita beserta judulnya. Simpel c. Tapi g update otomatis. Lha klo kita dah punya 100 postingan? mau ditulis utas2? Walah, yo selak modyar jes...

Nah..Ayas mo kasi solusi neh..bikin daftar isi yang ulales terupdate seiring lahirnya postingan kita..


Caranya gampang kok. Syaratnya, kita pake label.

Lo kok label?
Ya, cz trik Ayas sekarang tu masih ky 2 postingan sebelumnya, utak atik label.

Yah, dah biasa dunk..
ups, tunggu dulu bro..pokoknya yang ni unik lah..

Dimana unik nya?
Gini bro. Anggep sodara punya buanyak label. 100 misalnya. Klo pake label biasa (defaultnya blog), dah pasti tu 100 label akan berurutan kebawah. Bisa2 puanjaaang tuh klo postingan dan labelnya banyak. Maem tempat donk...

lihat j di punya Ayas, pada bagian 'Table of Content'. Dah kaya daftar isi betulan kan? ada fungsi scrollnya, sehingga tidak semua Label ditampakkan begitu j......

Gimana buatnya? Yuk kita coba bareng.

Pertama, untuk memaksimalkan label untuk dijadikan daftar isi, Ayas punya saran:

label yang kita berikan pada postingan, selain kategori dari postingan itu sendiri, sertakan juga judul postingan sebagai label. Jadi, nantinya semua judul postingan akan muncul di daftar isi yang akan kita buat ini..

Sebelum memulai, pastikan sodara sudah menggunakan 'label' diblog sodara.

Jangan lupa download dulu template sodara y...

Centang pada 'Expand Template Widget'

Cari kode2 mbulet seperti ini :

<b:widget id='Label2' locked='false' title='Tabel of Content' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'>
<data:label.name/>
</span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
<data:label.name/>
</a>
</b:if>
<span dir='ltr'>(<data:label.count/>)</span>
</li>
</b:loop>
</ul>

Kode2 diatas adalah kode untuk widget 'Label' sodara.

Selanjutnya, copy code berikut :

<div style='overflow:auto;width:300px;height:200px;padding:10px;border:1px solid #eee'>

(Kode ini berfungsi untuk memberikan fungsi scroll pada label. Nilai pada 'width' dan 'height' bisa sodara ganti)

Paste kode tersebut di ATAS code <ul>

Selanjutnya, copy code berikut :

</div>

Lalu paste tepat di BAWAH kode </ul>

Untuk lebih terlihat seperti daftar isi, berikan no urut didepan judul postingan/label. Gimana caranya, kita pernah bahas dulu pada postingan ini. Monggo dibaca.

Selanjutnya, save template anda, lalu preview... dah jadi kan daftar isinya...hehehe9

Nah, itu tadi salah saru cara mudah bikin daftar isi, yang merupakan hasil karya dari orang yang kurang kerjaan...hehehehhe9

Teman2 barangkali punya tips dan trick lain bikin daftar isi..bisa berbagi info di comment..

Klo yang ini cuma cara gampangnya aja..tapi g mengecewakan kan hasilnya..

Pokoknya, GAMPANG KOK!!!

12 comments:

  1. WAH ternyata disini malah dapat tutorial yg sangat simple & mudah...
    seepp sukses terus sob

    ReplyDelete
  2. mas untuk daftar isi seperti punya mas yang di pojok kanan atas (di bawah iklan Ciao!.com) itu seperti apa cara buatnya?
    mohon penjelasannya , trims..

    kalau bisa kirim ke email saya :zeptian@ymail.com

    ReplyDelete
  3. @septian's Seperti yang ada pada tutorial diatas, begitulah cara membuatnya..:)

    ReplyDelete
  4. hehehe...kelemahan klo dah pake LABEL cumulus tuh bisa gak yahh ?? punya aku labelnya CUMULUS...hehe..

    ReplyDelete
  5. @kanzenk setuju..harus balikin label nya ke awal dulu..hihihi

    ReplyDelete
  6. boleh artikelnya.. cukup membantu

    bos, kalo itukan buat nampilin judul label-labelnya aja,

    tapi kalo saya pengen bikin scroll yang isinya artikel2 apa aja dari sebuah label yang udah dibikin gimana ya?

    thanks b4

    ReplyDelete
  7. Artikelnya bagus.. tapi ngebacanya males soalnya teemplatenya ga enak dipandang.. bikin mata capek :-)

    ReplyDelete
  8. @administrator wah gitu y...hhehehe9 waktunya ganti tmplate neh..makasih banget masukannya y...

    ReplyDelete
  9. mas blogger bilang : Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: The element type "div" must be terminated by the matching end-tag "
    gimana yach?

    ReplyDelete
  10. @minori peringatan tersebut muncul dikarenakan ada kode div yang belum ditutup dengan /div.

    Coba dicek lagi, mungkin yang ini terlewatkan :

    " Selanjutnya, copy code berikut :

    </div>

    Lalu paste tepat di BAWAH kode </ul> "

    ReplyDelete
  11. oo, bgtu yach !
    makasih pencerahannya.

    ReplyDelete

Klo ada pertanyaan, masukan ato tips yang lebih mudah, koment aja y..Insya Allah Ayas bales.. Thanks all..moga2 bermanfaat

 
Copyright © 2013. About - Sitemap - Contact - Privacy
Template Seo Elite oleh Bamz