Membuat Daftar Isi (Site Map) Pada Blog

Sebenarnya sudah banyak yang bahas tentang cara bagaimana membuat daftar isi atau ada juga yang sebut site map. Jenis site map ini sangat banyak sekali, tapi saya nembu yang menurut saya cukup rapih, contohnya sudah saya pasang di blog saya ini www.cara-cara.net/p/sitemap.html

Untuk berikut contohnya:

Nah untuk membuat sitemap tersebut caranya sebagai berikut:

A. Buat 1 artikel untuk sitemap ini, atau anda juga dapat menggunakan menu page/halaman

B. Copy paste kode berikut (geser sampai kanan ya):

<style type="text/css">
#toc{
width:99%;
margin:5px auto;
border:1px solid #04c3aa;
-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%,#04c3aa 40%);
background:-webkit-gradient(linear,left 10,right 80,color-stop(0.20,#04c3aa),color-stop(1,#fffafb));
border:1px solid #04c3aa;
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://makingdifferent.github.io/blogger-widgets/sitemappage.js" type="text/javascript"></script>
<script src="https://www.cara-cara.net/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script></div>

C. Silahkan ganti kode warna yang sudah saya warnai

1. Untuk kode warna hijau itu adalah warna utama dari background judul kategori dan garis
2. Untuk kode warna biru itu warna gradasi, kalau yang saya capture saya gunakan warna pitih
3. Ganti yang ditandain merah dengan alamat blog agan

SELESAI

Berbagi :