Suatu blog yang sudah berumur dan sudah ratusan atau bahkan ribuan postingan, maka sudah semestinya adanya SiteMap atau daftar Isi Blog. Mengapa? sebab memudahkan para visitor untuk mencari dan membaca postingan blog. Hal ini selain memang memudahkan visitor juga sangat disukai oleh google.
Namun, tidak semua blogger paham cara memasang dan menyusun sitemap tersebut, oleh sebab itu, berikut saya sampaikan cara memasang Daftar Isi Blog berdasarkan Label.Contoh Daftar Isi Berdasarkan Label
Cara Membuat Daftar Isi Blog Simple Berdasarkan Kategori/Label
- Klik menu "Page" (Halaman) di Dashboard Blog
- Klik New Page (Halaman Baru)
- Isi nama halaman dengan Sitemap, Peta Situs, atau Daftar Isi
- Klik tombol mode HTML
- Copy dan Paste kode daftar isi di bawah ini.
- Klik Publish!
Kode Daftar Isi Blog
Ini kode daftar isi yang saya ambil dari Contohblog.com. Jangan lupa, paste di mode HTML
<style type="text/css">
#toc{width:97%;margin:5px auto;border:1px solid #00a3c1;-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:#ff0000;font-weight:bold;margin:0 -5px;padding:1px 0 2px 11px;background:-moz-linear-gradient(right,#C2EAFE 0%,#00a3c1 40%);background:-webkit-gradient(linear,left 10,right 80,color-stop(0.20,#00a3c1),color-stop(1,#C2EAFE));border:1px solid #00a3c1;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{text-transform:uppercase;}
.new{color:#ff0000;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://cdn.rawgit.com/aramdan/share/master/sitemap.js" type="text/javascript"></script>
<script src="http://www.bloggars.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc">
</script></div>
NOTE!
Ganti alamat blognya (warna biru) dengan alamat blog Anda.
Ganti Warna merah dengan url Javascrip anda
Kode Alternatif:
<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="https://contohblognih.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=bloggersitemap"></script>
Itu dia Cara Membuat Daftar Isi Blog (Sitemap) Berdasarkan Label/Kategori.
Terima Kasih, semoga bermanfaat dan memperindah blog kita
