5/18/10

Membuat Daftar Isi Sesuai Label


Ada beberapa macam cara untuk membuat daftar isi atau Table Of Content (TOC) yaitu ada yang disimpan di sidebar atau dipostingan, ada yang berdasarkan label atau  tanggal posting dll.. Dan sekarang saya akan posting tentang Cara Membuat Daftar Isi Sesuai Label atau Category.
Membuat daftar isi di blog tentu sangat dibutuhkan untuk memudahkan pengunjung mencari artikel/materi yang dibutuhkan, tentu ini sebagai salah satu bentuk pelayanan prima bagi pengunjung, apalagi jika artikelnya sudah banyak.

Nah kali ini saya akan posting sekalian menjawab sobat yang bertanya tentang bagaimana Cara  Membuat Daftar Isi Berdasarkan Label atau Kategori yang disimpan pada halaman posting seperti contoh Daftar Isi pada blog ini.
Cara membuat Daftar Isi ini saya dapatkan dari blognya http://jayce-o.blogspot.com dan sudah saya edit sendiri,  langkah-langkahnya seperti ini :
  1. Login dulu  ke    http://www.blogger.com/ 
  2. Kemudian buat sebuah Entri Baru dan pilih Edit HTML. atau kalau biasa pake Windows Live Writer (WLW) gunakan modus Source atau Sumber.
  3. Berilah judul, misalnya: Daftar Isi Berdasarkan Label.
  4. Copy Paste script dibawah ini dan ganti nama saungweb.blogspot.com dengan nama Blog anda :
    <script style="text/javascript" src="http://saungweb.googlecode.com/files/TOCcategory.js"> </script>
    <script src="http://saungweb.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script>
  5. Setelah di-paste, klik Terbitkan Entri atau publish dan lihat hasilnya
  6. Kalau artikelnya sudah banyak bisa ditambah fungsi scrol yang di pasang sebelum code no. 4 , sehingga lengkapnya akan seperti ini : (Kode warna pink silahkan sesuaikan, kalaupun mau dihapus juga silahkan) :
    <div style="overflow:auto; border: 1px solid #CCC; margin: auto; padding: 3px; width: 95%; height: 400px; background-color: none; text-align: left;">
    <p align="center">
    <font size="4">Daftar Isi Blog Berdasarkan Label / Category</font></p>

    <script style="text/javascript" src="http://saungweb.googlecode.com/files/TOCcategory.js"></script>
    <script src="http://saungweb.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script>
    <p>
    Untuk melihat <a href="
    http://saungweb.blogspot.com/2010/04/daftar-isi-berdasarkan-tanggal-posting.html" target="_blank">Daftar Isi Berdasarkan Tanggal Posting</a> silahkan di klik aja sob.</p>
    </div>
  7. Langkah selanjutnya tinggal buat link yg menuju ke postingan ini  dan  bisa disimpan di navbar menu atau di sidebar dll, contoh :
<a href='http://saungweb.blogspot.com/2010/04/daftar-isi.html' target='_blank'>Daftar Isi Berdasarkan Label </a>
dan :
<a href='http://saungweb.blogspot.com/2010/04/daftar-isi-berdasarkan-tanggal-posting.html' target='_blank'>Daftar Isi Berdasarkan Tanggal Posting</a>
Oh ya dulu pernah juga posting Cara Membuat daftar isi yang disimpan disidebar namun gak dipakai lagi. karena sekarang pakai Daftar Isi Sesuai Label dan Tanggal Posting.
Selamat mencoba semoga berhasil ohya.. jangan kaget kalau saat loading pertama daftar isinya agak lama ya.. dan untuk daftar isi berdasarkan tanggal posting tunggu postingan selanjutnya yaaaa…..
Saung Web


  1. Thanks telah mampir, yo kita saling vote dan comment..
  2. Bila berkenan tolong bagikan dengan tombol share di atas.
  3. Gratis langganan artikel blog ini, silahkan klik Disini, atau masukan email disidebar yg telah disediakan

Sobat sedang membaca artikel Membuat Daftar Isi Sesuai Label, bila berkenan silahkan share artikel ini dengan tombol share di atas. Bila mau COPAS untuk di blog sobat, dimohon meletakkan link aktif sebagai Sumbernya dengan copy kode di bawah ini.

Related Post:

142 comments:

  1. wah iya neh buwel juga pake.. he

    ReplyDelete
  2. sip as tutorialnya, sudah pernah di coba neh. thanks..

    ReplyDelete
  3. wah makasih ni kang tutornya
    dicoba dulu, moga aja bisa,,,

    ReplyDelete
  4. sep, mantap nih tutorialnya,thx udah share..

    ReplyDelete
  5. thx mas infonya, udah kubikin daftar isinya tapi ku taroh di side bar...
    dibagian bawahnya ada tulisan dan link by saung web heheh...

    ReplyDelete
  6. Mantab tipsnya. Emang kalau soal kode2an gini saya kurang paham

    ReplyDelete
  7. Aku copy dulu kodenya sob...

    ReplyDelete
  8. A sobat2 : thanks atas kunjungannya ya

    ReplyDelete
  9. Saya pingin nyoba juga untuk di blog saya nih

    ReplyDelete
  10. wah makasih yaw sob
    saya juga menggunakan daftar isi sperti ini
    :D

    ReplyDelete
  11. tutorial yg sangat bermanfaat.
    makasih sudah berbagi.

    ReplyDelete
  12. makasih yaw
    aku juga mengunakan daftar isi
    :D

    ReplyDelete
  13. wah, bagus tulisannya mas, thx udah share..

    ReplyDelete
  14. sip tutorialnya Mas, lanjutkan....

    ReplyDelete
  15. Mantab selalu dan selalu mantab

    ReplyDelete
  16. bagus juga nih kawan, udah lama saya kepengen buat yang ginian hanya masih belum sempat saja, soalnya masih fokus untuk desain theme blog saya agar lebih menarik.

    ReplyDelete
  17. saya pake WP
    tidak berarti ga memerlukan ini
    makasih ilmunya Pak
    :)

    lama ga kesini...apa khabar?

    ReplyDelete
  18. thanks ya infonya...saya blogger pemula mesti banyak belajar

    ReplyDelete
  19. xixixi.... daptar isi punya saya biasa aja tanpa berdasarkan label

    ReplyDelete
  20. lama bener ya nggak kesini pas kesinni dapat tutorial mantap pak

    ReplyDelete
  21. Mantab Nih Postingan dan Tutorialnya. Keep Spirit and Smile

    ReplyDelete
  22. code nya panjang gitu ya, itu khusus buat blogger ya? kalo buat yang lain gmn ya caranya

    ReplyDelete
  23. Nambah ilmu baru nih, sob. Hatur nuhun :)

    ReplyDelete
  24. freshh info.
    thanks.
    silahkan kunjungi :
    http://tipsbarudipercaya.blogspot.com/

    ReplyDelete
  25. wach.. rekomended blog banget ini.. , mau cari artikel apa aja lengkap SERP, SEO , bahkan ngeblog jadi gampang kalo ngikutin artikel-artikel akang yang satu ini oi... thanku

    ReplyDelete
  26. ijin nyoba y pak...
    trims dah berbagi...

    ReplyDelete
  27. Bisa di aplikasikan di wordpress bos ?

    ReplyDelete
  28. siiip mangstab tipsnya.. dtggu nih postingan selanjutnya :)

    ReplyDelete
  29. Mas, udah tak review balik . . .thanks Y Mas . . . . . kapan2 maen ke blogku lagi . . .

    ReplyDelete
  30. mantep neeh infonya bang saung, terima kasih bang saung tlah mau berkunjung ke blog buluk saya Vista 84 terima kasih bang :-D

    ReplyDelete
  31. makasi tlah datang ke blogku bos..

    ReplyDelete
  32. sugad postingannya bos! bravo....

    ReplyDelete
  33. mantap nian tutorialnya pak , siapa tahu ada yang tertarik lihat keseluruhan isi blog kita

    ReplyDelete
  34. salam kenal dari umydiary.blogspot.com

    ReplyDelete
  35. keren sob..nanti ku coba deh..
    salam

    ReplyDelete
  36. Seperti biasa, keren kang tipsnya..wilujeng wengi..

    ReplyDelete
  37. jalan-jalan lagi kang sudah lama tidak mampir. bagus artikelnya.

    ReplyDelete
  38. good info kawan, say hello utk sahabat blogger cause lama gak OL, salam blogger

    ReplyDelete
  39. ok mas saung terima kasih atas infonya

    ReplyDelete
  40. salam kenal makasih bacaan nya

    ReplyDelete
  41. wah, informasi menarik nih, dicoba ha

    ReplyDelete
  42. @ sobat2 : thanks atas kunjungannya

    ReplyDelete
  43. berkunjung pagi kang
    met pagi,,,

    ReplyDelete
  44. Thanks infonya Mas..langsung aku coba ya..oh ya kalo diletakkan di sidebar bisa ndak ya...
    link mas udah aku pasang di blogku..link balik ya..

    ReplyDelete
  45. sip banget artikelnya. Mohon izin artikel ini dikopi-paste, dalam rangka uji coba, untuk sementara, karena belum punya bahan posting.

    ReplyDelete
  46. Good HAck Sob... coz punyanya Abu Farhan Javascriptnya di Packer... Hohoho...

    LIHAT DISINI

    ReplyDelete
  47. Wah,, ku cari2 ternyata ada di blog temanku sendiri,, hebat,,!!

    ku belum nyoba neh... ehehe

    ReplyDelete
  48. Narutopedia Express is exclusive encyclopedia about everything in naruto anime like character biographies, jutsu, hidden village, handseal, jinchuriki, akatsuki, and other skills

    ReplyDelete
  49. Narutopedia Express is exclusive encyclopedia about everything in naruto anime like character biographies, jutsu, hidden village, handseal, jinchuriki, akatsuki, and other skills

    ReplyDelete
  50. Narutopedia Express is exclusive encyclopedia about everything in naruto anime like character biographies, jutsu, hidden village, handseal, jinchuriki, akatsuki, and other skills

    ReplyDelete
  51. Narutopedia Express is exclusive encyclopedia about everything in naruto anime like character biographies, jutsu, hidden village, handseal, jinchuriki, akatsuki, and other skills

    ReplyDelete
  52. Narutopedia Express is exclusive encyclopedia about everything in naruto anime like character biographies, jutsu, hidden village, handseal, jinchuriki, akatsuki, and other skills

    ReplyDelete
  53. Jangan lupa nonton bareng World Cup di
    http://pialadunia.islcorner.co.cc/

    ReplyDelete
  54. ijin mau save as gan, buat dicoba2 ...

    ReplyDelete
  55. Numpang nitip lapak y gan/sis..
    Smua info yg u cri, mlai dr jokes, true story, info gadget, app java n komp, modifikasi sony ericsson J105 naite, sprti : full akses k naite, mnghdpkan radio tnpa headset, mgabass to clearbass, dll.
    U jg bs mnyumbang artikel apa ja yg brmanfaat n krim email k positifadi.adm@gmail.com

    Kamar Bujang|Femalepedia|Animecities|Rundomain|TrikDapatDolar|Hikaru no Fans

    ReplyDelete
  56. Numpang nitip lapak y gan/sis..
    Smua info yg u cri, mlai dr jokes, true story, info gadget, app java n komp, modifikasi sony ericsson J105 naite, sprti : full akses k naite, mnghdpkan radio tnpa headset, mgabass to clearbass, dll.
    U jg bs mnyumbang artikel apa ja yg brmanfaat n krim email k positifadi.adm@gmail.com

    Kamar Bujang|Femalepedia|Animecities|Rundomain|TrikDapatDolar|Hikaru no Fans

    ReplyDelete
  57. Numpang nitip lapak y gan/sis..
    Smua info yg u cri, mlai dr jokes, true story, info gadget, app java n komp, modifikasi sony ericsson J105 naite, sprti : full akses k naite, mnghdpkan radio tnpa headset, mgabass to clearbass, dll.
    U jg bs mnyumbang artikel apa ja yg brmanfaat n krim email k positifadi.adm@gmail.com

    Kamar Bujang|Femalepedia|Animecities|Rundomain|TrikDapatDolar|Hikaru no Fans

    ReplyDelete
  58. Numpang nitip lapak y gan/sis..
    Smua info yg u cri, mlai dr jokes, true story, info gadget, app java n komp, modifikasi sony ericsson J105 naite, sprti : full akses k naite, mnghdpkan radio tnpa headset, mgabass to clearbass, dll.
    U jg bs mnyumbang artikel apa ja yg brmanfaat n krim email k positifadi.adm@gmail.com

    Kamar Bujang|Femalepedia|Animecities|Rundomain|TrikDapatDolar|Hikaru no Fans

    ReplyDelete
  59. Numpang nitip lapak y gan/sis..
    Smua info yg u cri, mlai dr jokes, true story, info gadget, app java n komp, modifikasi sony ericsson J105 naite, sprti : full akses k naite, mnghdpkan radio tnpa headset, mgabass to clearbass, dll.
    U jg bs mnyumbang artikel apa ja yg brmanfaat n krim email k positifadi.adm@gmail.com

    Kamar Bujang|Femalepedia|Animecities|Rundomain|TrikDapatDolar|Hikaru no Fans

    ReplyDelete
  60. Numpang nitip lapak y gan/sis..
    Smua info yg u cri, mlai dr jokes, true story, info gadget, app java n komp, modifikasi sony ericsson J105 naite, sprti : full akses k naite, mnghdpkan radio tnpa headset, mgabass to clearbass, dll.
    U jg bs mnyumbang artikel apa ja yg brmanfaat n krim email k positifadi.adm@gmail.com

    Kamar Bujang|Femalepedia|Animecities|Rundomain|TrikDapatDolar|Hikaru no Fans

    ReplyDelete
  61. sudah terpasang kang, makasih tutorialnya..

    Kang soal Doffolow Blog Comuunity, he he saya sudah pasang Link Tea nya lho, hiks kog belum terpsang juga link saya ya....

    ReplyDelete
  62. mantabss gan... berhail nihh.. hehehe..

    ReplyDelete
  63. Salam terima kasih Tipsnya mas

    ReplyDelete
  64. Lagi2 dapat tutor baru.
    Tengkyu gan.
    Suwun

    ReplyDelete
  65. mantab gan, langsung saya coba...
    btw samlam kenal ayhh..
    heheh.. kunjugn balik sob! :)

    ReplyDelete
  66. sya nyari daftar isi sesuai label, ga taunya nyempil di dieu.... heheh


    nuhun kang... langsung pasang

    ReplyDelete
  67. Thanks ya mas atas tipsnya, Saya sudah mencoba dan berhasil, mampir ya ke blog ku yang masih aneh: http://www.this-4-all.blogspot.com
    sekalian ijin tukar link ya n' bantu aku juga dung cara meramaikan blog cz aku baru n' msh gaptek.

    Thanks

    ReplyDelete
  68. saya mau tanya kalau buat Label horizontal di daerah footer gimana ya caranya.. mohon bantuannya... soal-nya saya Newbie.. :"> terimakasih sebelumnya..:)

    ReplyDelete
  69. tampilkan......emang kudu pake..hihihikhikhikhik

    ReplyDelete
  70. Dah lama kucari cari TT makasih banyak yaaah.

    ReplyDelete
  71. saya sdh pernah buat daftar isi, tapi knp loading blog saya jadi berat sekali ya, Mas? mohon petunjuknya. thanks a lot!

    ReplyDelete
  72. thx infonya brow... udah berhasil..
    sangat membantu sekali^^b

    ReplyDelete
  73. @ Ridwan : emang sob.. loadingnya jadi agak lama kalau mau di tampilkan
    @ Freshmind Pram : Selamat ya..

    ReplyDelete
  74. sae pisan tipsna,...
    mo tanya ni bos, itu kan menyangkut semua label yg ada di blog kita!
    bisa nggak, jika label yang dipilih oleh kita saja :D misalnya dari 100 label yg ada di blog saya, hanya dipilih 20 saja... :D thx
    ditunggu jawabannya di: tohircicomre.blogspot.com

    ReplyDelete
  75. @ tohir cicomre : kayaknya gak bisa tuh sob.. mesti tampil semuanya.. makanya loadnya agak berat.. tapi coba aja tps yg ini :
    http://kolom-tutorial.blogspot.com/2010/11/batasi-label-yang-tampil-di-blogger.html

    ReplyDelete
  76. Alhamdulillah
    BERHASIL

    Dengan DAFTAR ISI blog HUKUM KEHUTANAN
    tampiil sedikit lebih terlihat profesional

    TERIMAKASIH

    ReplyDelete
  77. @Nurul Imam:
    Ok sob saya lihat hasilnya ya.... meluncur...

    ReplyDelete
  78. ini bisa digunakan untuk wordpress ya, walaupun sudah lama ngeblog tapi kalau ketemu yang beginian masih bingung juga

    ReplyDelete
  79. saya baru blajar bikin web ... yg alamat nya

    http://art-xp.blogspot.com

    mohon bantuannya
    kalo suka dengan artikel-artikel saya
    saya harap bisa menjadi follower...

    ReplyDelete
  80. Makasih sob tipsx! kalau buat kotak komentar facebook and twitter gmna ya? mungkin bisa dibuat artikel baru buat fcebook and tweetx! thx

    ReplyDelete
  81. Free Anime Blogger Template|Blogger Skin|Blogger Themes|Layout For Blogspot

    ReplyDelete
  82. Free Download Blogger Template|Free Download Template Blogger|Template For Blogspot

    ReplyDelete
  83. Free Blogger Skin|Blogger Template|Template Blogger|Anime Blogger Template

    ReplyDelete
  84. Free Blogspot Layout|Layout Blogspot Free|Template XML Blogspot|Blogger XML Theme

    ReplyDelete
  85. Layout Blogspot Free|Template XML Blogspot|Free Blogspot Layout|Blogger XML Theme

    ReplyDelete
  86. Layout Blogspot Free|Template XML Blogspot|Free Blogspot Layout|Blogger XML Theme

    ReplyDelete
  87. Template XML Blogspot|Free Blogspot Layout|Blogger XML Theme|Layout Blogspot Free

    ReplyDelete
  88. Download Template Blogger|Blogspot Themes|Template XML|Layout For Blogspot

    ReplyDelete
  89. thank's dah sy coba..hasilya bagus
    www.james-berbagifile.blogspot.com

    ReplyDelete
  90. makasih banger buat informasinya
    saya mau coba dulu ya
    hehehhe

    ReplyDelete
  91. Naruto 546|Naruto Manga 547|Naruto Shippuden Manga 548|Naruto 549 Manga|Naruto 550 Spoiler

    ReplyDelete
  92. Naruto 546|Naruto Manga 547|Naruto Shippuden Manga 548|Naruto 549 Manga|Naruto 550 Spoiler

    ReplyDelete
  93. Naruto 546|Naruto Manga 547|Naruto Shippuden Manga 548|Naruto 549 Manga|Naruto 550 Spoiler

    ReplyDelete
  94. terima kasih buanyak panduanya :)
    bisa memudahkan pengunjung untuk mencari yang dicari :)

    ReplyDelete
  95. hemmh,,saya baru buat blog nih gan,,masi cari2 referensi,,heheh,,kalo buat sub menu halaman seperti agan gimana? jadi ada halaman tapi ada anak-anak nya,,hehe,,saya belom tahu nama istilahnya,,maaf,

    ReplyDelete
  96. artikel bagus, ijin copas ya.
    terima kasih

    ReplyDelete
  97. Hello thanks for share. I think this article is good like Krim A-dha Murah and then my website like Sewa Mobil Jakarta is the best too.. Now i want to share the website Pashmina Murah and then Jam Tangan when you can be share to another friends. And finally Tabita Skin Care is the best site.

    ReplyDelete
  98. ciiip gan...makasih gan infonya..

    ReplyDelete
  99. Terima kasih, langsung dipraktekkan...

    ReplyDelete
  100. mantap gan,langsung seperti yang saya inginkan..teriamaksih atas sharing ilmunya

    ReplyDelete
  101. terimakasih atas infonya master...

    sangat membantu sekali buat saya...
    langsung ane praktekin dah...



    happy blogwalking kawan..
    by: Aan Shared
    Aan Blog
    Aan shared mobile blog
    Aan-droid
    Aan Musik Shared

    visit me:
    http://aan-shared.blogspot.com

    ReplyDelete
  102. wah tips2nya disini sangat membantu :D

    ReplyDelete

Bagi sobat-sobat silahkan comment disini, Insya Allah saya comment balik di blog anda. Trims atas kerjasamanya

Langganan Artikel

Artikel Gtais : :

Enter your email address:

Delivered by FeedBurner

Total Kunjungan

 

Copyright 2008 All Rights Reserved Revolution Two Church theme !, Converted into Blogger Template by Bloganol dot com ! Modified by Saung Web ! , On Blogger