Home » , » Cara Membuat Daftar Isi Blog (Sitemap) Berdasarkan Label/Kategori

Cara Membuat Daftar Isi Blog (Sitemap) Berdasarkan Label/Kategori

daftar-isi-sitemap-blogspot
Cara Membuat Daftar Isi Blog (Sitemap) Simple Fast Loading Berdasarkan Label/Kategori.

MEMBUAT daftar isi blog (peta situs, sitemap, table of content) berdasarkan label atau kategori posting sangat baik untuk mesin pencari juga user.

Menu daftar isi blog akan memudahkan pembaca mengakses bagian-bagian atau konten blog secara cepat dan mencari tulisana, artikel, atau posting yang mereka butuhkan.

Demo: Contoh Daftar Isi

Menu navigasi daftar isi ini juga dianjurkan Google guna memudahkan user menjelajahi blog kita. Google memang "selalu berpihak" pada user. Apa yang disukai user, disukai pula oleh Google. Hidup user!!!! :)

Fungsi Daftar Isi Blog

Menurut Social Media Tutorial, daftar isi juga bagus untuk optimisasi mesin pencari (Good for SEO) karena menyajikan kata kunci yang benar yang sudah digunakan (provided correct keywords have been used).

Fungsi lainnya, terjemahin sendiri ya :)
  • Delivers a good overview of the information that awaits the reader
  • Avoids duplicate posts in diverse labels and remove the bewilderment of search engine bots.
  • Supports for creating internal links of blog posts, which boost up page rank
  • It can be used as “Related posts” link, on any blog-post.
  • Last, but not the least, to show a certain requirement of the blog posts to explore under Specific label.

Cara Membuat Daftar Isi Blog

  1. Klik menu "Page" (Halaman) di Dashboard Blog
  2. Klik New Page  (Halaman Baru) 
  3. Isi nama halaman dengan Sitemap, Peta Situs, atau Daftar Isi
  4. Klik tombol mode HTML
  5. Copy dan Paste salah satu kode HTML daftar isi di bawah ini. Jangan lupa ganti dulu contohblognih dengan nama blog Anda.
  6. Klik Publish! 

1. Kode Daftar Isi Blog Simple Berdasarkan Kategori/Label (DEMO)

<style>
p.labels a{color: #242424; text-transform: uppercase;font-size: 15px;}
a.post-titles {color: #0000FF;}
ol li{list-style-type:decimal;line-height:25px;}
</style>
<script type="text/javascript" src="http://yourjavascript.com/7366511402/simplesitemap.js"></script>
<script src="http://contohblognih.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=bloggersitemap"></script>

Kode Lainnya:

<style>
p.labels a {
    color: #fff;
    text-transform: uppercase;
    font-size: 15px;
    font-weight: 600;
    border-bottom: 1px solid #ddd;
    display: block;
    padding: 8px;
    background: #555;
}
a.post-titles {color: #0000FF;}
ol li{list-style-type:decimal;line-height:25px;}
.sitemap-link{display:none}
</style>
<script type="text/javascript" src="http://yourjavascript.com/7366511402/simplesitemap.js"></script>
<script src="/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=bloggersitemap"></script>

Alternatif:
Untuk tampilan daftar isi "lebih cantik" bisa gunakan kode di bawah ini:

<style type="text/css">
#toc{
width:99%;
margin:5px auto;
border:1px solid #2D96DF;
-webkit-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
-moz-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
}
.labl{
color:#FF5F00;
font-weight:bold;
margin:0 -5px;
padding:1px 0 2px 11px;
background:-moz-linear-gradient(right,#C2EAFE 0%,#055A85 40%);
background:-webkit-gradient(linear,left 10,right 80,color-stop(0.20,#055A85),color-stop(1,#C2EAFE));
border:1px solid #2D96DF;
border-radius:4px;-moz-border-radius:4px;
-webkit-border-radius:4px;box-shadow:3px 3px 1px #bbb;
-moz-box-shadow:3px 3px 1px #bbb;-webkit-box-shadow:3px 3px 1px #bbb;display:block;
}
.labl a{
color:#fff;
}
.labl:first-letter{t
ext-transform:uppercase;
}
.new{
color:#FF5F00;
font-weight:bold;
font-style:italic;
}
.postname{
font-weight:normal;
background:-moz-linear-gradient(right,#C2EAFE 0%,#fff 40%);
background:-webkit-gradient(linear,left 80,right 10,color-stop(0.60,#fff),color-stop(1,#C2EAFE));
}
.postname li{
border-bottom: #ddd 1px dotted;
margin-right:5px
}
</style>
<div id="toc">
<script src="https://googledrive.com/host/0ByNodV_m9cVLR0pmWFgwZ1NmdW8/" type="text/javascript"></script>
<script src="http://contohblognih.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script></div>

2. Kode Daftar Isi Berdasarkan Tanggal Publikasi

<script src=" http://mastergomaster.googlecode.com/files/daftar%20isi%20blog.js "></script>
<script src="http://contohblognih.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>

3. Kode Daftar Isi Berdasarkan Tanggal Publikasi Plus Kotak

<div style="background-color: none; border: 1px solid #000000; height: 400px; margin: auto; overflow: auto; padding: 3px; text-align: left; width: 100%;">
<script src=" http://mastergomaster.googlecode.com/files/daftar%20isi%20blog.js "></script>
<script src="http://contohblognih.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script></div>

Selain sitemap daftar isi berdasarkan label (kategori) dan berdasarkan tanggal, masih banyak kode daftar isi di luar sana yang di-share oleh para blogger yang baik hati dan tidak sombong :)

Ada juga format daftar isi blog yang "interaktif" dan (mungkin) lebih menarik, seperti yang di-share oleh My Blogger Lab dan HiFiFan. Moggo... dipilih....! Good Luck! (http://contohblognih.blogspot.com).*

Thanks for reading & sharing Cara Membuat Daftar Isi Blog (Sitemap) Berdasarkan Label/Kategori

Previous
« Prev Post

115 comments:

Comment Page:
  1. terima kasih infonya, saya dah pasang nih sitemap

    ReplyDelete
    Replies
    1. siiip..... goog luck........

      Delete
  2. tapi kok saya coba ga bs ya.. itu kode no 1 sama no 2 di gabung atau gimana sih bos...

    ReplyDelete
    Replies
    1. pilih satu kode aja.....ubah dulu alamat url nya....

      Delete
  3. saya sudah ubah alamat url nya tapi tetap tidak bisa. pls advised. thx

    ReplyDelete
    Replies
    1. Klik "New Page" > klik tombol Mode "HTML" (JANGAN "Compose"), paste kodenya, dan PUBLISH! Good luck......!

      Delete
  4. Saya sudah praktekkan gan. thank's

    ReplyDelete
  5. kok gak muncul ya mbak, masalahnya apa, saya udah pastekan di html, masih gak bisa. mohon pencerahanya

    ReplyDelete
    Replies
    1. paste di Mode HTML.... CB cek malah "The requested URL / was not found on this server. That’s all we know" tuh blognya :)

      Delete
  6. Sukses gan, makasih ya atas tutorialnya :)

    ReplyDelete
  7. AnonymousJuly 02, 2014

    Gan, gmn cara membuat link seperti di blog ini? makasih banyak bantuannya.

    ReplyDelete
  8. Cara Membuat Daftar isi Blog Keren dan Cantik memang menjadi keinginan para blogger ya sob, hal itu sebagai salah satu penarik pengunjung. oya terima kasih atas artikel yang bermanfaat ini, Salam hangat

    ReplyDelete
    Replies
    1. Sepakat...! Salam hangat kembali :)

      Delete
  9. Excellent Post thanks a lot man You can Also Visit my Blog and See the Sitemap http://www.gobloggertricks.com/p/sitemap.html

    ReplyDelete
  10. terima kasih banyak sangat keren yang kode kedua bang langsung saya pasang di blog hehe
    jangan lupa kunbalnya ya arifinbp.blogspot.com

    ReplyDelete
  11. simple, jadi gk berat-beratin blog :D
    makasih (y)

    ReplyDelete
  12. Keren mas tips triknya..dlu juga saya pake kode html sitemap ini tp blognya lupa password jd gbsa dibuka hehe...
    nice info :) thanks

    ReplyDelete
  13. makasih infonya mas, tapi saya punya masalah, dengan halaman pagenya bukan /p/dafta-isi.html tapi /p/blog-page_47.html cara ubahnya bagaimana mas? ditunggu balasannya
    http://areakostnetwork.blogspot.com/p/blog-page_47.html

    ReplyDelete
    Replies
    1. Bikin baru aja, hapus yang itu, begitu klik New Page, langsung isi judul halamannya dgn "Daftar Isi" atau "Sitemap"

      Delete
    2. Yap.. Bener mas. Buat judulnya terlebih dahulu, jangan langsung nulis dikolom tulisan. Ini permasalahan diwaktu saya masih newbie dulu sih. *sekarang masih newbie.

      Delete
  14. saya mau tanya mas, kenapa laman saya kok tidak mau muncul ya ? padahal sudah saya isi seperti cara yang ada di atas,
    mohon bantuannya

    www.cakarlele.com

    ReplyDelete
    Replies
    1. URL-nya ganti dengan url cakarlele....

      Delete
    2. Hahahaa sejak kapan lele punya cakar, yang ada mah kumis :(

      Delete
  15. om, izin copy paste tutorial ini untuk mendokumentasikan tutoril om ini. Mohon maaf, ane copy paste langsung karena males untuk nulis diblog yang satu ini http://selpacode.blogspot.com/2014/08/cara-membuat-daftar-isi-blog-sitemap-berdasarkan-kategori.html "dengan sumber pastinya om" :) makasih...

    ReplyDelete
  16. thank gan infonya,

    kunjungi juga blog ane :D berbagi ilmu

    ReplyDelete
  17. mantab gan. langsung diterapkan

    ReplyDelete
  18. yang alternatif, mantaaaappp gann... cek dah di blog ane...
    makasih gan :D

    ReplyDelete
  19. gan thank infonya tapi yang itu semuanya ada link kamu nya tapi tidak apa apa lah yang menting yoi seperti Qson http://unyilpunya.blogspot.com

    ReplyDelete
  20. Terima Kasih atas tutorialnya CB Blogger,
    Sitemap sudah berhasil saya pasang di blog saya

    ReplyDelete
  21. akhirnya ini yang saya cari-cari ketemu juga :D , makasih sudah mengasih tahu tutorialnya

    ReplyDelete
  22. Mantep gan artikelnya ... Makasih share ilmunya

    ReplyDelete
  23. makasih banget mas, keren abis yang cara 1, saya ijin modifikasi yah mas, karena mau cocokin sama tampilan blog saya.... :)
    maklum newbie, jadi masih fokus tampilan dlu... hehehe

    ReplyDelete
    Replies
    1. Jangan terlalu banyak menghabiskan waktu hanya untuk menyetel tampilan blog mas. Waktu yang berharga terbuang sia-sia.

      Solusinya... Sering-sering baca dan pahami dulu tutorial tentang bagaimana tampilan blog yang baik dan benar. Sekiranya sudah paham, baru deh dicoba dan diterapkan pada tampilan blog. Otomatis dengan pengetahuan yang kita pahami tadi, waktu untuk menyetel tampilan lebih cepat. (Memasang dan Menyetel Ulang Tampilan Template Blog Sangat Menguras Waktu).

      Pesan khusus... Cari template blogger yang memang udah nyatu dihati, sehingga dikemudian hari tidak mengganti-ganti template lagi. Bahaya loh ganti template terus-terusan. Dampaknya ke trafik pengunjung.
      Nah, jika template yang diganti tersebut memang lebih SEO, silahkan diganti saja. Awalnya trafik down (jatuh), itu wajar. Dikemudian hari, pengunjung blog semakin meningkat.

      Nah... Yang paling utama sih konten yang berkualitas. Jadi usahakan waktu yang berharga tersebut untuk membuat konten (artikel).

      Thanks! CB: Jika ada kesalahan kalimat, tolong diperbaiki :D

      Delete
  24. min cara buat url kyk gmn http://contohblognih.blogspot.com/p/disclaimer.html gmn yak? maaf newbie :)

    ReplyDelete
    Replies
    1. sama seperti buat daftar isi, di laman page baru, lalu buat judul disclaimer atau ketentuan layanan, isinya menjelaskan ketentuan blog agan. jgn lupa kunjungannya http://areakostnetwork.blogspot.com

      Delete
  25. Sukses besar!
    Jadi semakin tertata deh blog ane....

    ReplyDelete
  26. Mas Kalo berdasarkan 1 label aja gimana mas ?

    ReplyDelete
    Replies
    1. Ubah... /feeds/posts/default?max.... menjadi ..../feeds/posts/-/Label?max....

      Delete
  27. Wah ilmu yang sangat bermanfaat bagi Newbe Pemula seperti Saya ini gan. ijin Copas Gan.. :)

    ReplyDelete
    Replies
    1. Jangan copas, nanti dibanned sama google... :)

      Delete
  28. sukses terus contohblognih saya banyak belajar dari sini untuk membuat blog saya menarik, mohon review blog saya ya sob, bagaimana komentarnya, karena saya butuh masukan, saya masih pemula :)

    ReplyDelete
  29. gan '' menu page '' nya itu lokasinya dmana ??

    ReplyDelete
    Replies
    1. biasanya di "nav" atau "navigasi", deretan "Home", "About", dll. Cari *Ctrl+F) di "Template" > "Edit HTML"

      Delete
  30. keren benar tampilannya. mksh atas tutornya !

    ReplyDelete
  31. cara nentuin daftarnya misal blogging apa aja gmn ya gan?

    ReplyDelete
  32. Udah saya coba, cara ngeliatnya gimana ya? kok ga keliatan isi sitemap nya?

    ReplyDelete
    Replies
    1. Anda pake wordpress, cara membuat daftar isi (sitemap) ini buat blogspot....

      Delete
  33. Kalo tips buat wordpress ada ga ya?

    ReplyDelete
    Replies
    1. Ada, silakan cek:
      http://en.support.wordpress.com/archives-shortcode/#customization

      Delete
  34. Makasih banget Tutor nya >_< Keren bgt dan pas buat blog aku
    Lope-Lope deh :*

    ReplyDelete
  35. terima kasih sekali, sangat membantu

    ReplyDelete
  36. Bagus. Bisa dicoba.

    Terima kasih gan

    ReplyDelete
  37. admin cb blogger, cara buat kotak komentar yg warna warni itu gimana cara buatnya?
    terus bisa juga utk dijadikan top artikel yg warna-warni spt itu jga?

    ReplyDelete
    Replies
    1. http://contohblognih.blogspot.com/2014/10/menampilkan-posting-paling-banyak-komentar.html

      Delete
  38. itu scriptnya dipasang dimana mas?

    ReplyDelete
    Replies
    1. silakan dibaca lagi tulisannya :)

      Delete
  39. gan,kalo mau buat daftar isi menurut abjad bagaimana utk style yg 1?

    ReplyDelete
    Replies
    1. http://contohblognih.blogspot.com/2015/01/Daftar-Isi-Sitemap-Blog-Tabulasi.html

      Delete
  40. gan, kok gue coba, malah, letaknya bukan di arsip, tp malah di postingan! gmn dong? apa gue ada yg salah ya?

    ReplyDelete
    Replies
    1. Jika agan bikin sebagai postingan seperti artikel blog iyalah keluarnya di postingan, coba agan klik di laman, kemudian klik laman baru, masukan judulnya, dan klik edit HTML disampingnya, ini contoh daftar isi saya
      http://areakostnetwork.blogspot.com/p/daftar-isi.html

      Delete
    2. mas umraici ,tolong minta kodenya. soalnya kode diatas tak coba gak ada yang bisa.cuma muncul judul daftar isi aja, isinya gak ada.terimakasih
      jika berkenan tolong kirim ke punakawanarif@gmail.com

      Delete
  41. gan mau nanya....
    kalau buat sitemap nya untuk 1 label aja bisa ga gan ?

    ReplyDelete
  42. Wow keren, kalau mau cuma satu label bagaimana yah? untk satu label dan bisa terlihat semua postingan dalam satu label itu? maaf masih baru, mohon bantuannya...

    ReplyDelete
  43. yang ane udah tampil gan (label sama postingan), cuman nomornya yang ga tampil, itu gimana ya gan?

    ReplyDelete
    Replies
    1. kode "ol" di dalam templatenya bermasalah alias belum disetting

      Delete
  44. malam gan..
    gan,mau tnya ne : cara buat katalog seperti di atas gimana ya
    contoh nya : Home, tips seo, templates, desain, posting tips,adsense dsb yang seperti diatas gimana ya.
    maklum masih newbie :)

    ReplyDelete
    Replies
    1. http://contohblognih.blogspot.com/2014/12/Membuat-Menampilkan-Halaman-Statis-Blog-Navigasi-Menu.html

      Delete
  45. Untuk Kode HTML site map di antara ke3 tsb kira" yg terbaik untuk/menurut "GOOGLE" yg mana ya mas Bro ??
    Trims

    ReplyDelete
    Replies
    1. yang pertama, yg lebih simple...........

      Delete
    2. Sippp dah Mas Bro.. Thanks infonya

      Delete
  46. itu biar sesuai abjad gmna ya ?

    ReplyDelete
    Replies
    1. Intuk daftar isi alfabetis, coba kode yang ada di sini:
      http://mybloggercontrol.blogspot.com/2012/11/list-posts-in-alphabetical-order.html

      Delete
    2. http://contohblognih.blogspot.com/2015/07/daftar-isi-blog-berdasarkan-abjad.html

      Delete
  47. Terima kasih..blog CB banyak bantu saya dari segi template dan seo ya..
    Lupa..saya dari malaysia tapi banyak belajar dari blog CB..
    Terima kasih ya...

    ReplyDelete
  48. wah hasilnya bagus banget, saya pakai yang no.2 makasih banyak...

    ReplyDelete
  49. hasilnya lebih rapih master thank you Owner CB :)

    ReplyDelete
  50. gan, maaf .. kok ga bisa .. ?

    ReplyDelete
  51. nanya lagi min, kalo cuman nampilin daftar satu label aja bisa ga?

    soalnya label punya ane banyak dan isinya banyak pula.
    ane sendiri pegel scroll bawah mulu.
    bisa aja pake yang tabulasi tapi loadingnya sedikit lebih lama dari pada yang simple ini.

    terima kasih sebelumnya :)

    ReplyDelete
  52. terimah kasih ya atas artikelnya

    ReplyDelete
  53. Keren Bos, thanks tutorialnya

    ReplyDelete
  54. Mantep gan, makasih nih tutornya lengkap banget

    Langsung Paraktek dah

    ReplyDelete
  55. saya comot yang pertama aja gan

    ReplyDelete
  56. Terimakasih mas....ijin nyobi

    ReplyDelete
  57. Makasih infonya gan...ijin praktek

    ReplyDelete
  58. Maksih infonya gan...ane coba dulu neh...

    ReplyDelete
  59. Makasih Mas tutorial cara buat sitemapnya

    ReplyDelete
  60. Lebih bagus ni, makasih min sudah ane pasang di blog ane. Mantep tampilannya.

    ReplyDelete
  61. Terima kasih admin contohblog.com, template sitemap ini kami gunakan di blog kami pajakita.net

    ReplyDelete
  62. kalau kita membuat sitemap, dan kita pasang di homepage apa tidak berpengaruh dengan duplikat link pada postingan gan?

    ReplyDelete
  63. Mantap banget bos ...
    Sangat membantu saya artikel ini, khususnya untuk pembuatan daftar isi di blog

    ReplyDelete
  64. hasilnya bagus alhamdulillah,

    ReplyDelete
  65. gan , kan ada beberapa label yang saya gak mau pasang
    itu gimana ya :D ?

    ReplyDelete
  66. Ada di tips lainnya, silakan ketik sitemap di kotak pencarian

    ReplyDelete
  67. Berhasil gan... hatur nuhun

    ReplyDelete
  68. Makasih gan infonya menarik banget nih. Salam kenal dari newbie

    ReplyDelete
  69. Gan Semua JS yang Sumbernya Dari google code atau host google kok di ane gak tampil ya, ada backup Script JS nya gak ya, Soalnya kalo sumber Js nya dari tempat lain bisa muncul

    ReplyDelete
    Replies
    1. google code sudah OFF, jangan pake kode yang ngelink ke Google Code
      http://www.contohblog.com/2016/08/pengaruh-google-code-dihentikan-pada-blogger.html

      Delete
  70. Sitemap saya yg dulu dari CB sudah tidak berjalan dan kembali kesini cari yg baru dan ada ,terima kasih salam bos

    ReplyDelete
  71. mantap banyak pilihan. dari beberapa ssitemap gak berhasil akhirnya disini ada yg berhasil hehe
    venomku dot com

    ReplyDelete
  72. mas saya sudah coba praktek semua cara membuat sitemap di blog saya yg beralamatkan xxxx.blogspot.co.id baik yang js nya dari google code atau yang lainnya, saya sudah praktekan dengan membuat page baru dan pilih html code dan pastekan kodenya.tapi sitemap saya tetap tidak muncul, page/halamannya kosong blong. kenapa ya mas

    ReplyDelete
    Replies
    1. Google Code sudah ditutup Google

      Delete
    2. Coba gunakan file js ini editan ane sendiri. Demonya ada di blog ane areakost.net

      https://rawgit.com/umraici/sitemap/master/sitemap.js

      Delete
    3. yg nomor 1 masih work sob. ane baru pasang

      Delete
  73. kode no 1 masih work tapi kode no 2 ngga work om. mkasih om. ane pake yg no 1 ajj :)

    ReplyDelete

Komentar spam, menyertakan link aktif dan alamat blog tidak akan muncul. Tidak semua pertanyaan sempat atau bisa dijawab. Thanks for visiting and the comment :)

E-mail Newsletter

Receive Latest Posts from CB Blogger Straight in Your Email Inbox