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).*

128 Komentar untuk "Cara Membuat Daftar Isi Blog (Sitemap) Berdasarkan Label/Kategori"

terima kasih infonya, saya dah pasang nih sitemap

siiip..... goog luck........

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

pilih satu kode aja.....ubah dulu alamat url nya....

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

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

Saya sudah praktekkan gan. thank's

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

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

Sukses gan, makasih ya atas tutorialnya :)

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

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

Sepakat...! Salam hangat kembali :)

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

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

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

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

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

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

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

URL-nya ganti dengan url cakarlele....

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...

thank gan infonya,

kunjungi juga blog ane :D berbagi ilmu

mantab gan. langsung diterapkan

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

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

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

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

Mantep gan artikelnya ... Makasih share ilmunya

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

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

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

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

Mas Kalo berdasarkan 1 label aja gimana mas ?

Ubah... /feeds/posts/default?max.... menjadi ..../feeds/posts/-/Label?max....

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

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 :)

gan '' menu page '' nya itu lokasinya dmana ??

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

Jangan copas, nanti dibanned sama google... :)

keren benar tampilannya. mksh atas tutornya !

cara nentuin daftarnya misal blogging apa aja gmn ya gan?

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

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

Kalo tips buat wordpress ada ga ya?

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

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

terima kasih sekali, sangat membantu

Bagus. Bisa dicoba.

Terima kasih gan

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?

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

itu scriptnya dipasang dimana mas?

silakan dibaca lagi tulisannya :)

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

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

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

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

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

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...

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

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

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

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

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 :)

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

kode "ol" di dalam templatenya bermasalah alias belum disetting

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

yang pertama, yg lebih simple...........

Sippp dah Mas Bro.. Thanks infonya

itu biar sesuai abjad gmna ya ?

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...

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

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

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

hasilnya lebih rapih master thank you Owner CB :)

gan, maaf .. kok ga bisa .. ?

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 :)

terimah kasih ya atas artikelnya

Keren Bos, thanks tutorialnya

Mantep gan, makasih nih tutornya lengkap banget

Langsung Paraktek dah

saya comot yang pertama aja gan

Terimakasih mas....ijin nyobi

Makasih infonya gan...ijin praktek

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

Makasih Mas tutorial cara buat sitemapnya

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

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

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

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

hasilnya bagus alhamdulillah,

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

Ada di tips lainnya, silakan ketik sitemap di kotak pencarian

Berhasil gan... hatur nuhun

Mantap gan,, shankyou...

Makasih gan infonya menarik banget nih. Salam kenal dari newbie

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

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

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

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

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

Google Code sudah ditutup Google

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

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

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

yg nomor 1 masih work sob. ane baru pasang

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

terimakasih mas buat tutorial yang ini, saya udah bisa buat daftar isinya.
mohon maaf mw tanya, di bawah setelah daftar isi masih ada link "Cara Membuat daftar Isi", Itu Wajib ada ato boleh menghapusnya.
klo boleh ngapus gmna caranya...
Terimakasih

Tambahkan kode berikut ini di bagian bawah:

<style>
.sitemap-link{display:none}
</style>

Oh ternyata boleh dihapus ya mas, thanks infonya.

makasih gan tutorialnya, blog saya sudah mempunyai daftar isi

gan mau nanya tutorial di atas udah saya praktekin tapi kok gk muncul secara otomatis ya gan ?

maksih gan,langsung saya pakai..dan jreeeeng sudah muncul..

gan, cara supaya artikel bisa berdiri sendiri di template yang sudah ada menubar(bawaan dari sono) gimana ya ?,

Mantab agan boss CB..work di blog saya makasih tips nya keren..

mohon bantuannya.. saya udh pilih alternatif yang no 1, tapi hasilnya error, setelah kode "http" saya gnti menjadi "https" ada perubahan, tapi "blank" tidak ada daftar isi yang muncul. knpa ya?

saya sudah praktikkan koo gak muncul d blognya, padahal udah ganti URL dan versi HTML

mas untuk daftar isi berdasarkan tanggal postingan, tolong scriptnya di upload di yourjavascript [dot] com, soalnya kalo selain di script yg di upload di yourjavascript hasilnya jadinya 'blank' mas gak muncul apa2. makasih sebelumnya

trims gan izin parkatekkan di blog ana, sangat bermanfaat sekali

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

Contact Form

Name

Email *

Message *