Cara Membuat Daftar Isi (Sitemap) Otomatis di Blog Berdasarkan Label atau Kategori

Cara Membuat Daftar Isi (Sitemap) Otomatis di Blog - Sitemap atau Daftar isi memliki fungsi sangat penting pada blog, karena bisa memudahkan pengunjung blog untuk menelusiri konten yang ada di blog sobat. Daftar isi juga bermanfaat untuk Pengoptimalan Mesin Pencari (SEO) karena menyajikan kata kunci yang benar yang sudah digunakan.

Kalian bisa melihat contoh daftar isinya di sini CONTOH DAFTAR ISI.

Cara membuat daftar isi sangat mudah sekali, jika sobat tertarik memasang daftar ini pada blog sobat secara otomatis dan berdasarkan label atau kategori yang ada, di tambah lagi jika ada posting terbaru, maka ada tulisan NEW pada daftar isi tersebut. Berikut adalah tutorial pembuatannya:

1. Pergi ke menu Laman pada dasbor blogger.
   
2. Selanjutnya klik Laman Baru.
   
3. Jika sudah, beri nama  terlebih dahulu, terserah mau di isi Daftar Isi, Sitemap, atau yang lain.
4. Lalu pilih mode HTML.
   
5. Copy dan paste kode di bawah ini.

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="jontor">
<script src="https://cdn.rawgit.com/teknomia/sitemap/2ad476de/sitemap-keren.js"></script>
<script src="/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=teknomia_Load"></script>
</div>
<style type="text/css">.jontor{width:100%;border-collapse:collapse;text-align:left;overflow:hidden;margin:0 auto;}
.jontor a{color:black;}
.jontor p .teknomia_Label{background:#4ECDC4;display:block;padding:12px;}
.jontor ol li{position:relative;display:block;padding:.4em .4em .4em .8em;margin:.5em 0 .5em 2.5em;background:#d9f4f2;color:#666;text-decoration:none;transition:all .3s ease-out;}
user agent stylesheetli{display:list-item;text-align:-webkit-match-parent;}
.jontor ol li:before{content:counter(li);counter-increment:li;position:absolute;left:-2.5em;top:50%;margin-top:-1em;background:#0fa9cd;color:#fff;height:2em;width:2em;line-height:2em;text-align:center;font-weight:bold;}
.jontor ol li:hover:after{left:-.5em;border-left-color:#0fa9cd;}
.jontorol li:hover{box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);transition:all 0.3s cubic-bezier(.25,.8,.25,1);}
.jontor ol li:after{position:absolute;content:'';border:.5em solid transparent;left:-1em;top:50%;margin-top:-.5em;transition:all .3s ease-out;}
ol{counter-reset:li;list-style:none;font:14px 'times new roman';padding:0;margin-bottom:4em;text-shadow:0 1px 0 rgba(255,255,255,.5);margin-left:26px;}
.teknomia_Postname li:nth-of-type(odd){background:#f1f3f3;}
.new{color:red!important;font-weight:700;font-style:italic;}
user agent stylesheetol{display:block;list-style-type:decimal;-webkit-margin-before:1em;-webkit-margin-after:1em;-webkit-margin-start:0;-webkit-margin-end:0;-webkit-padding-start:40px;}
</style></div>

6. Dan publikasikan.

Saya kira cukup itu saja Tutorial Pembuatan Daftar Isi (Sitemap) Otomatis pada Blog Berdasarkan Label atau Kategori. Oke terima kasih sudah berkunjung, semoga posting ini bermanfaat bagi sobat.