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:

131 comments:

  1. wah iya neh buwel juga pake.. he

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

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

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

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

    ReplyDelete
  6. Aku copy dulu kodenya sob...

    ReplyDelete
  7. A sobat2 : thanks atas kunjungannya ya

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

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

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

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

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

    ReplyDelete
  13. sip tutorialnya Mas, lanjutkan....

    ReplyDelete
  14. Mantab selalu dan selalu mantab

    ReplyDelete
  15. 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
  16. saya pake WP
    tidak berarti ga memerlukan ini
    makasih ilmunya Pak
    :)

    lama ga kesini...apa khabar?

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

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

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

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

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

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

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

    ReplyDelete
  24. 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
  25. ijin nyoba y pak...
    trims dah berbagi...

    ReplyDelete
  26. Bisa di aplikasikan di wordpress bos ?

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

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

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

    ReplyDelete
  30. makasi tlah datang ke blogku bos..

    ReplyDelete
  31. sugad postingannya bos! bravo....

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

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

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

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

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

    ReplyDelete
  37. ok mas saung terima kasih atas infonya

    ReplyDelete
  38. salam kenal makasih bacaan nya

    ReplyDelete
  39. wah, informasi menarik nih, dicoba ha

    ReplyDelete
  40. @ sobat2 : thanks atas kunjungannya

    ReplyDelete
  41. 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
  42. sip banget artikelnya. Mohon izin artikel ini dikopi-paste, dalam rangka uji coba, untuk sementara, karena belum punya bahan posting.

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

    LIHAT DISINI

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

    ku belum nyoba neh... ehehe

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

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

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

    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. Jangan lupa nonton bareng World Cup di
    http://pialadunia.islcorner.co.cc/

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

    ReplyDelete
  52. 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
  53. mantabss gan... berhail nihh.. hehehe..

    ReplyDelete
  54. Salam terima kasih Tipsnya mas

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

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

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


    nuhun kang... langsung pasang

    ReplyDelete
  58. 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
  59. saya mau tanya kalau buat Label horizontal di daerah footer gimana ya caranya.. mohon bantuannya... soal-nya saya Newbie.. :"> terimakasih sebelumnya..:)

    ReplyDelete
  60. tampilkan......emang kudu pake..hihihikhikhikhik

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

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

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

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

    ReplyDelete
  65. 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
  66. @ 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
  67. Alhamdulillah
    BERHASIL

    Dengan DAFTAR ISI blog HUKUM KEHUTANAN
    tampiil sedikit lebih terlihat profesional

    TERIMAKASIH

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

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

    ReplyDelete
  70. 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
  71. Makasih sob tipsx! kalau buat kotak komentar facebook and twitter gmna ya? mungkin bisa dibuat artikel baru buat fcebook and tweetx! thx

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

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

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

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

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

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

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

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

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

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

    ReplyDelete
  82. thanks.....bangget,,,infoNa...^_^

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

    ReplyDelete
  84. 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
  85. artikel bagus, ijin copas ya.
    terima kasih

    ReplyDelete
  86. 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
  87. ciiip gan...makasih gan infonya..

    ReplyDelete
  88. Terima kasih, langsung dipraktekkan...

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

    ReplyDelete
  90. 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
  91. 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