Cara Membuat Daftar Isi Blog

Membuat daftar isi blog ini sudah pernah saya posting sebelumnya. Kalo sobat ingin melihatnya dapat dilihat disini dan disini.



Cara membuat daftar isi blog kali ini berbeda dengan sebelumnya, baik tampilan maupun script yang akan digunakan, saya pribadi lebih suka dengan daftar ini (content) karena bisa menampilkan seluruh judul postingan dan dikelompokkan sesuai dengan label masing-masing judul. Jadi kalo postingan kita buat tanpa menggunakan label, besar kemungkinan judul postingan tidak akan muncul didalam daftar ini.

Daftar isi (content) ini saya bagi menjadi dua bagian, yaitu Daftar isi ditampilkan pada satu halaman penuh dan Daftar isi ditampilkan pada halaman depan blog

Cara pertama adalah jika kita ingin menampilkan daftar isi ini dihalaman depan blog kita, agar setiap pengunjung dapat melihat daftar isi blog kita tiap kali mengunjungi blog kita



Contohnya sebagai berikut :











Berikut ini langkah-langkahnya :
1. Masuk ke account blogger anda
2. Pilih tata letak/layout
3. Pilih tambah gadget
4. Pilih HTML/javascript.
5. Beri Judul Dafar isi atau judul sesuai dengan keinginan sobat
5. Kopas kode di bawah ini


  • <div style="overflow:auto;width:430px;height:120px;padding:10px;border:1px solid #eee"><script style="text/javascript" src="http://sites.google.com/site/barajajs/listofcontent/contents.js"></script><script src="http://namablog.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script>
    </div>


namablog.blogspot.com : ganti dengan alamat blog sobat

width:430px : Ganti Lebar sesuai dengan yang sobat inginkan, sesuaikan dengan template

height:120px : Ganti tinggi nya sesuai dengan keinginan sobat


6. Kemudian save dan letakkan sesuai dengan keinginan sobat.


Kemudian cara kedua saya akan bahas Daftar isi yang akan ditampilkan pada satu halaman penuh

Berikut ini langkah-langkahnya :
1. Masuk ke account blogger anda
2. Pilih New post
3. Pilih Edit HTML pada kanan atas halaman tersebut
4. Beri Judul postingan tersebut dengan Daftar Isi, atau judul apapun sesuai keinginan sobat.
5. Copy paste script berikut ini :



  • <script style="text/javascript" src="http://sites.google.com/site/barajajs/listofcontent/contents.js"></script><script src="http://alamatblog.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script>
http://alamatblog.blogspot.com : Ganti dengan alamat blog sobat

6. Klik Publish Post

Jadi deh, hasilnya atau sebagai contih dapat dilihat disini.
Posted by: Barajakom Barajakom, Updated at: 13.26

188 komentar:

  1. thx sharing-annya..
    ane blm perna coba..
    tar ya kpn2 ane coba..
    lg dikejar kerjaan nih..
    LoLs

    BalasHapus
  2. akan saya coba saat waktu luang

    BalasHapus
  3. ok sobat...
    keren infonya...
    memang kita memerlukan daftar isi bwt pengnjung kita

    BalasHapus
  4. maksih info nya....coba ah......

    BalasHapus
  5. wah Aku pernah coba tuh tapi gagal maning2 mgagal maning hehhee

    BalasHapus
  6. wah bagus nih boz, copas dulu, kapan-kapan dicoba, makasih boz :D

    BalasHapus
  7. aku sudah pakai dan berhasil. trims yah

    BalasHapus
  8. mksh info-y ni boleh dicoba....!!! thanks lams knal dr chugygogog.blogspot.com

    BalasHapus
  9. sip mas infonya...follow balik mas ya

    BalasHapus
  10. koq ga muncul ya, dah q coba, padahal postingnya ada kategori nya semua....

    BalasHapus
  11. thanx atas informasinya...
    jngan lpa link ny ya...

    BalasHapus
  12. Mantap gan, ijin sedot scriptnya...

    BalasHapus
  13. thanks bro atas infonya mengenai daftar isi dan tentunya trik2 yang lainnya juga. sangat bermanfaat bagi saya yang baru belajar bikin blog. tolong dong di linkback ya blog saya.

    BalasHapus
  14. Wah seru juga nih tipsnya...

    BalasHapus
  15. hmmm tips yang bermanfaat mas,boleh dicoba diterapkan di blog saya
    terimakasih sharingnya
    Sukses Slalu!

    BalasHapus
  16. Tipsnya bagus, tolong tambahin juga dong gimana biar daftar isi tsb bisa berurutan dari yang paling baru (tapi tetap per label)

    BalasHapus
  17. Mantap sob..trims share info nya..jangan lupa kunjungan balik anda sangat kami harapkan

    BalasHapus
  18. Keren ...Membuat daftar isi blog emang penting biar pengunjung mudah nyari ya...

    BalasHapus
  19. Ok nih sharingnya. Salam kenal.

    BalasHapus
  20. mangstabssss, nanti deh dicoba :D

    BalasHapus
  21. eh.......
    lebih mangstabs lagi GA-nya muncul terus,
    padahal postingan bahasa endonesah.
    ubek-ubek dulu ah postingan disini,
    barangkali aja nemu (dance)

    BalasHapus
  22. Terima kasih banyak ...pokoknya mantap.

    BalasHapus
  23. Artikel yang mantap sobat....nanti ane pratekin dah...

    BalasHapus
  24. Thanks atas artikelnya, berguna sekali bagi saya sebagai newbie

    BalasHapus
  25. Kalo buat feed recent comment bagaimana ?

    BalasHapus
  26. wah..makasih sob..bagus tampilanya..
    lgsg di coba neh..

    BalasHapus
  27. terima kasih atas sharingnya :)

    BalasHapus
  28. Tuwop ilmunya... kayaknya saya butuh nech...

    BalasHapus
  29. mangtafff
    langsung dicuba ah

    BalasHapus
  30. nice info,, ntar aq coba2 ahh,, hehehe...

    BalasHapus
  31. sayangnya sekarang lagi fokus di wordpress blog. ntar di tes di blogger blog ku, makasih atas infonya nih, berguna banget.

    BalasHapus
  32. wAH makasih mas atas petunjuknya...

    BalasHapus
  33. numpang nanya, itu discriptnya ada script contents.js itu dapat darimana? Kok script itu tidak ditutorialkan. Kayaknya akan legih lengkap kalau sekalian ada tutorial bikin script seperti itu. Terimakasih

    BalasHapus
  34. mantep sob..

    lanjutkan

    ditunngu kujungan baliknya. .

    BalasHapus
  35. makasi ya atas informasinya, salam kenal ya :)

    BalasHapus
  36. thanks infonya ya??

    keren tuh sidebarnya...

    BalasHapus
  37. skalian follow kawan..jgn lupa untuk follow balik ya....

    BalasHapus
  38. wah postingan keren nih gan,maksh ya dah share

    BalasHapus
  39. Kang, kenapa disaya ngga bisa yah? apa ada kode html nya salah? , atau di html temlatenya ga bisa .

    Mohon pencerahanya .http://www.infoblogmj.co.cc/

    BalasHapus
  40. Saya udah bikin daftar isi satu halaman penuh tapi koq gak bisa muncul apa2 ya. Apa yang salah? Apa kebanyakan labelnya atau salah URL Feed nya?

    BalasHapus
  41. mantab gan...
    terimakasih infonya
    jalan dg baik di blog gw

    BalasHapus
  42. Mantep gan tutorialnya, belum kepengan buat daftar isi nih ntar aja deh

    BalasHapus
  43. mantaap om gue udah coba oke....

    BalasHapus
  44. daftar isi yang ini memang lebih menarik karena disusun sesuai label. Dan trdapat tulisan new di artikel terbaru.

    BalasHapus
  45. sipp... Saya uda pasang duluan

    BalasHapus
  46. ok boss coba tak terapin :-) thanks...

    BalasHapus
  47. Terima kasih sobat, tutorialnya bermamfaat.

    BalasHapus
  48. makasih bro tips nya.....dapat ilmu lagi nich..:)

    salam knl ya.....jika punya waktu silahkan mampir balik di blog saya..:)

    BalasHapus
  49. Bos kok di blog saya ga tampil ya????

    BalasHapus
  50. thax mas infonya. kerennnn .

    BalasHapus
  51. wooowww...blognya keren mas...

    BalasHapus
  52. thax mas infonya sangat berguna...

    BalasHapus
  53. infonya kerennn....sukses mas.

    BalasHapus
  54. wah...pulang bawa ilmu nih. thax ya...

    BalasHapus
  55. numpang tenar mas...salam kenal..

    BalasHapus
  56. wwwooookkkeeee....segera praktek.

    BalasHapus
  57. caiyooo......sipppp artikelnya.

    BalasHapus
  58. salam kenal mas...semoga sukses blognya...

    BalasHapus
  59. thx gan atas infonya !

    salam blogger indonesia !

    BalasHapus
  60. maap mas, mo nanya, postingan saya kan udah 800 lebih, trus di daftar isi blog saya postingan yg udah lama saya posting ko ga ada ya? malah yg baru2 yg ada, jd ga lengkap. kenapa ya? mohon bantuannya. http://xredtangox.blogspot.com

    BalasHapus
  61. keren dah.....
    kunjungan baliknya.....
    kasi komentar aj plissssssssssssssss

    BalasHapus
  62. Terimakasih atas infonya...

    Salam Blogger Indonesia

    BalasHapus
  63. Lagi belajar ngeblog, minta masukannya dong.

    BalasHapus
  64. thanks sob daftar isiinya.. tape inyong dgn gaya berbeda, pake feed. and bsa dletakkan d side bar

    BalasHapus
  65. Mas saya mau tanya dong . . . saya tertarik sekali sama cara buat daftar isi cara yang pertama. dan sudah saya praktekin, tapi kok gak muncul yah di blog saya ?

    mohon pencerahan mas , masih Newbie neh . . .thank's

    BalasHapus
  66. tkasih infox, akan sy coba n berkunjunglah di blogku andineha.blogspot.com

    BalasHapus
  67. Thanks ya..postingan Cara Membuat Daftar Isi Blog sangat bermanfaat..,salam knl :D

    BalasHapus
  68. ini sama dengan membuat sitemap di wordpress ya?

    makasih infonya kawan :D

    BalasHapus
  69. Menarik sekali, pemula nih,nanti aku coba, tapi apa bedanya sama label blog sih?

    BalasHapus
  70. nice post sob.......

    jika berkenan silahkan mampir balik

    BalasHapus
  71. bos nayak kalo udah jadi daftar isi nya bagaimana cara mengisi di daftar isi pada blog kita.

    BalasHapus
  72. Thanks ya..postingan Cara Membuat Daftar Isi Blog sangat bermanfaat..,salam knl :D

    thanks for sgaring.

    BalasHapus
  73. nice info sob.......

    salam knl ya........

    jika berkenan silahkan mampir balik....

    BalasHapus
  74. alo bos, salam kenal :)
    nice tips ya. ane dah coba buat daftar isi juga :)
    btw tukeran link yuk :D
    ditunggu kabar baiknya ya :)

    BalasHapus
  75. BOS ! makasih infonya ! mohon ijin copas.
    Maklum baru belajar...

    BalasHapus
  76. keren banget gan ... thanks

    berguna banget di blog ane http://olamarket.blogspot.com

    BalasHapus
  77. cara membuat daftar isi.. akhirnya ketemu.. makasih sharing sob....

    BalasHapus
  78. linda wahyu widianti
    linda@jak-stik.ac.id
    http ://www.jak-stik.ac.id

    terima kasih atas sharingnya dan ditunggu kelanjutannya

    BalasHapus
  79. good,,,, bertambah ilmu saya....
    thank's,,,,

    BalasHapus
  80. Nice Info gan...!! Langsung ke TKP dan Berhasil...!!!

    Ijin Sedot...!!!!

    BalasHapus
  81. lho cara buat related post nya gimana
    mohon share nya 8-)

    BalasHapus
  82. thanks bos infonya tentang blogpsot :)

    ditunggu tips selanjutnya ya :)

    BalasHapus
  83. kan daftar isinya udah jadi .
    tus cara ngisi daftar isi'a gimana . . .
    masih gag ngerti ach .
    coba lyat blog echa dh .

    echadisorder.blogspot

    BalasHapus
  84. Oh,your blog is very nice .I really like it ^^!

    *♥•♥#♠♥#♥•♥* '
    *♥♫♥♥♫♥♥♫♥♫* '
    *♥♥☺♥♫♥♫♥☺♥♥*'
    *♥♥♣♫♥♣♥♥♣♥♫♣♥♥*'
    '*♥♥♣♥♫♥♥♫♥♥♫ ♥♣♥♥*'
    Happy and Happy every single day like a Christmas!


    \’\:’\’\:::/’::/’/’ ..........
    ....’\’\::’\:/’:/’/’..___,•’`¯`’•,
    .......’\’\’\|/’/’/’....../..........._/
    .......’\’\|/’/’,.~~/=====_/
    .........[||||].....(_________)
    ..............||.....,•’`.._....._....`’•,
    ...............||.../...... (^)(^)` ........\
    ................||..|............ .............I
    ................||...\.......\____/........./
    ..............||.....’•,_............._,•’
    ..........,||..,~•¯¯\\\\(@)//__
    .....

    ----------------------------------
    Welcome to my websites : In there where have a lot of wallpapers, themes for desktop , for mobile and themes for media . Especialy all free ^^!

    BalasHapus
  85. makasih infonya,sangat membantu saya dalam membuat blog..kunjungi juga blogku yaa..salam blogger

    BalasHapus
  86. thanx infonya..
    ijin copas..pasti ditulis sumbernya koq
    salam kenal..:)

    BalasHapus
  87. trims infonya pak. sangat membantu saya..
    http://cinemabigmovies.blogspot.com/

    BalasHapus
  88. bagus juga gan tutorialnya...boleh dicoba gan... ada gak ya yg lebih sederhana Gan, tks

    BalasHapus
  89. thank you for the information ..
    good luck always.

    BalasHapus
  90. Blog sama artikelnya bagus, komentar juga ke web blog saya juga ya www.when-who-what.com

    BalasHapus
  91. akhirnya ketemu juga setelah sekian lama mencari, thanks infonya bos akhirnya blog http://practicehealthylifestyles.blogspot.com/ bs ada daftar isinya :D

    BalasHapus
  92. salam kenal mas.tuker link yo mas, link mas dah tak pasang di blog saya.^^
    Makasih sebelum nya
    awsomereza.blogspot.com

    BalasHapus
  93. Good,

    http://www.rendykurnia.co.cc

    BalasHapus
  94. Setelah beberapa kali mampir kali ini dan pagi ini saya tinggalkan jejak,karena saya sangat terbantu dengan artikel yang terlampir...terimakasih dan salam sukses ya mas....
    kunjungi juga blog pertama saya http://pelangiholiday.blogspot.com

    BalasHapus
  95. makasih tutonya.. untuk sementara ijin save dulu sob.. untuk praktek lain waktu.. oya aku dah follow..

    BalasHapus
  96. thanks gan tips na...tapi klo yg ini ane udah tw...
    jangan lupa mampir ke blog ane jg y gan..
    thanks!

    BalasHapus
  97. makasih udah mampir..infonya menarik sekali

    BalasHapus
  98. MAKASH BANYAH gAN... DAH Q CBAK N BERHASIL DENGAN SEMPURNA...
    THANKS....

    www.qiqyshare.com
    your source for fre Download Full Varsion Software
    www.qiqyshare.com

    BalasHapus
  99. sdah d'coba kk ttap g'bisa mohon pencerahanya kk

    BalasHapus
  100. Tutorial yang bagus. Tapi ada persoalan lain ne... Saya sudah mengganti alamat blogspot saya menjadi xxx.co.cc
    dan saya sudah menerapkan berbagai tips tentang cara membuat daftar isi, tapi yang muncul hanya sebuah kotak kosong seperti, yang tidak disertai dengan entri-entri nya. Tolong di pecahkan permasalahannnya broh... Tamks.

    BalasHapus
  101. Saya dah coba tapi label post kok ikut2an muncul ya?

    BalasHapus
  102. koq ga berhasil ya mas.. :(
    saya mau buat yang daftar isi di samping blog..

    BalasHapus
  103. nice info bro..
    tp sya ada mslh ni..
    udah saya coba, tp yg mncul cuma kotak kosong n entry nya gk otomatis masuk ke daftar isi..
    mohon pencerahannya bro..
    thnx..

    BalasHapus
  104. yang versi ke 2 kok gak bs ya gan...
    ???

    BalasHapus
  105. intan dah lama nyoba dan berhasil. ini intan mo bilang terimakasih. tapi tampilannya tdk sama persis dg yg disampaikan dalam tutorial diatas karena sudah intan sesuaikan dg dandanan blognya intan. blog intan kini makin cantik karena banyak dibantu oleh ayah intan. terimakasih dan minta maaf kalo dulu nggak bilang kalo nyontek cara bikin daftar isinya (namanya juga nyontek...gimana sich?!).

    BalasHapus
  106. salam blogge bang..
    ane sudah coba tp kagak bisa nih?
    knpa yah

    BalasHapus
  107. Info yang sangat berguna bagi saya. terima kasih. akan saya coba praktekan

    BalasHapus
  108. nice, info, ...

    thx sob.

    BalasHapus
  109. makasih banyak Sharingnya gan, coba scripnya buat bikin daftar isi

    BalasHapus
  110. ok banget nih informasinya sangat bermanfaat sekali gan , salam kenal aja gan

    BalasHapus
  111. kunjungan perdana gan, ditunggu kunjungan baliknya

    BalasHapus
  112. Wahh.. Makasih Info nya kk ^_^

    BalasHapus
  113. hhe.. gak pake blogspot lagi om :D

    BalasHapus
  114. mo tnya nich.. saya udah coba memsang untuk yang model kedua.. tapi ko ga bisa di review ya?.. cuma ada judul.. mksdx, tidak bisa menampilkan daftar isi yang sesuai.. tu karena apa ya?.. cuman untuk blog saya yang satu udah bia dri dlu.. mohon infonya di http://pacebuk.blogspot.com.. tank's ya ??

    BalasHapus
  115. Akhirnya nemu juga postingan tentang ini.. Terimaakasihmas udah d kasih tau.. :)

    BalasHapus
  116. Terimakasih master langsung berhasil di tiga blog aku

    BalasHapus
  117. numpang nanya, itu discriptnya ada script contents.js itu dapat darimana? Kok script itu tidak ditutorialkan. Kayaknya akan legih lengkap kalau sekalian ada tutorial bikin script seperti itu. Terimakasih

    BalasHapus
  118. infonya sangat membantu gan... thanks

    BalasHapus
  119. makasih atas tutorialnya admin

    BalasHapus
  120. Terimakasih...info yg sangat membantu!

    Salam

    BalasHapus
  121. udah kucoba gan ilmunya,praktis&cepat untuk blogger pemula sepertikoe..
    please kutunggu backlink http://itsmycleverstudent.blogspot.com

    BalasHapus
  122. thanks mas, blogwalking www.m2mexacta.blogspot.com

    BalasHapus
  123. wih langsung ke tkp gan. makasi infonya keren abiz. tak coba yo....matur nuooooon...

    BalasHapus
  124. THANKS BANGETTTT Gan.... !! ini ini yang gue cari.... hehe... lam-nal... ^_^

    BalasHapus
  125. Nice info...
    www.rif123.blogspot.com

    BalasHapus
  126. Saya sudah coba dan berhasil,..terima kasih banyak mas,...

    BalasHapus
  127. Saya coba kok gak berhasil ya?

    BalasHapus
  128. tks...mas tas ilmux.

    ilmux dh sy pakai...

    mas... bahas dong masalah buat menu di header plus cara menambah submenux.

    misalx: qu bikin menu Islam, trus submenux pgn nampilin Fiqh... cara buatx gmn?

    contoh blog mas... mnux content... nah cara bikinx gmn?

    BalasHapus
  129. Wah,, Jadi pengen nyoba, makasih bayak atas petunjuknya gan, neh mau ane terapkan di website Toko Bunga ane..
    Keisha Florist

    BalasHapus
  130. wah keren nih. aku ambil scriptnya ya.

    BalasHapus
  131. Boleh dicoba sob...thanks banget !!

    BalasHapus
  132. makasi atas tutorialnya,,,,,

    BalasHapus
  133. Thanks gan,,udah ane coba.. :-)

    BalasHapus
  134. mantap benar nih tips....
    ane coba dlu ah....
    thanks Gan...

    BalasHapus
  135. Salam kenal dari Bima. Terima kasih banyak atas artikel yang begitu bagus ini.

    BalasHapus
  136. Mas, terima kasih banyak atas artikelnya. saya dah praktekan kode-kodenya. tapi muncul angka 1 (satu) pada semua judul postingan saya. tapi trik kedua yang muncul pesan "Laman tidak di temukan". saya dah nyari ref dibeberapa blog tapi masalah ini belum teratasi masalah daftar isi. Apa memang ada yang salah dengan template blognya saya?.
    Dan apa ada pengaruh di search engine kalau tidak masukan label pada blog.

    BalasHapus
  137. thanx gan tipsnya.. langsung dipraktekin neh

    BalasHapus
  138. trims...gan, udeh ane coba pasang di blog ane...makasih ye...atas infonya

    BalasHapus
  139. Blog dan artikelnya bagus, komentar juga ya di blog saya www.when-who-what.blogspot.com

    BalasHapus
  140. cara ke 2 nya agak bingung terus kenapa daftar isinya isinya kecil cara perbesar tulisannya gimn

    BalasHapus
  141. cara ke-2 brati daftar isi bisa dmsukkan dalam laman mandiri y? makasih infonnyalaman mandiri y? makasih infonnya

    BalasHapus
  142. gan Q dah cBa kok tDak bisa nie Gimana?

    BalasHapus
  143. Thx y...
    sejak kemarin nyari" tpi susah d mengerti tpi akhirnya ngerti jga

    BalasHapus
  144. mantapmantapmantapmantap.... :D

    BalasHapus
  145. tipsnya jarang aku temukan yang ini gan, aku coba sekarang deh, thanks banget ya gan... buat lebih banyak lagi posting yang bermanfaat.. skali lagi thanks bgt

    BalasHapus
  146. oke, berhasil. mantap! thanks gan

    BalasHapus
  147. Mantap tutorialnya sob, kunungan balik sob.

    BalasHapus
  148. thank bang infonya,sudah saya praktekan dan berhasil,tapi punya saya kok kurang gimana gitu,kerena tulisan labelnya ngikut dan posisinya di atas judul, he he he he

    BalasHapus
  149. sudah aku pakai, mantap

    BalasHapus
  150. daftar isi blog yang saya cari mas, terima kasih atas panduannya

    BalasHapus
  151. pantas sya harus cba nih gan,,terim ksh info2nya,,sya tunggu kunjungannya

    BalasHapus
  152. makasih gan selama ini yang saya cari ahahaha

    BalasHapus
  153. Trims infonya ya.
    Sudah lama kami mencari informasi serupa ini untuk situs kami.

    BalasHapus