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:

133 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. keren sob..nanti ku coba deh..
    salam

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

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

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

    ReplyDelete
  38. ok mas saung terima kasih atas infonya

    ReplyDelete
  39. salam kenal makasih bacaan nya

    ReplyDelete
  40. wah, informasi menarik nih, dicoba ha

    ReplyDelete
  41. @ sobat2 : thanks atas kunjungannya

    ReplyDelete
  42. berkunjung pagi kang
    met pagi,,,

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

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

    LIHAT DISINI

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

    ku belum nyoba neh... ehehe

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

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

    ReplyDelete
  54. 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
  55. mantabss gan... berhail nihh.. hehehe..

    ReplyDelete
  56. Salam terima kasih Tipsnya mas

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

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

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


    nuhun kang... langsung pasang

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

    ReplyDelete
  62. tampilkan......emang kudu pake..hihihikhikhikhik

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

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

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

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

    ReplyDelete
  67. 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
  68. @ 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
  69. Alhamdulillah
    BERHASIL

    Dengan DAFTAR ISI blog HUKUM KEHUTANAN
    tampiil sedikit lebih terlihat profesional

    TERIMAKASIH

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    ReplyDelete
  88. 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
  89. ciiip gan...makasih gan infonya..

    ReplyDelete
  90. Terima kasih, langsung dipraktekkan...

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

    ReplyDelete
  92. 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
  93. 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