Membuat Daftar Isi Keren dan Responsif Berdasarkan Category/Label

Otovirtual.com - Daftar Isi atau sitemap blog sangat penting untuk memudahkan pembaca memilih dan mencari arikel yang ingin dibaca. Saya suka dengan salah satu blogger yang juga penulis buku. Saya juga selalu mengikuti setiap artikel barunya. Namun yang tidka saya sukai dari blognya adalah tidak ada daftar isi/sitemap sehingga saya kesulitan untuk membuka artikel-artikel lawas dari blog tersebut, capek harus menge-klik Older Post terus terusan. Padahal artikel lawas di blog tersebut tidak kalah ayik untuk dibaca.

Cara Mebuat Daftar Isi Blog (www.iamtomys.com)

Nah, di blog saya ini sebelumnya juga sudah saya share bagaimana cara membuat Daftar Isi/Sitemap blog. Bisa kita pilih tampilannya, apakah sesuai dengan tanggal terbit atau sesuai dengan kategori/tag-nya. Yahhh walaupun mungkin sudah ada yang tidak bisa karena kodenya sudah diblok. Monggo dicek di link berikut :

• Cara Membuat Daftar Isi Blog Yang Keren dan Responsif
• Membuat Daftar Isi Yang Keren Untuk Blogger (2)

OK deh, kali ini saya akan share lagi bagaimana membuat Daftar Isi sesuai dengan category/tag/label seperti yang ada di blog Otovirtual ini, khusus untuk blogger alias blogspot ya... yang tentunya juga masih sangat responsif.

Seperti biasa, buat page (halaman) baru dan pilih metode html, jangan yang compose.

Buat Page baru atau edit Page yang sudah ada

Pilih HTML

Kemudian masukkan script 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>

<br />
<div id="toc">
<script src="https://makingdifferent.github.io/blogger-widgets/sitemappage.js" type="text/javascript"></script>
<script src="https://www.otovirtual.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script></div>

*Ganti yang berwarna biru dengan blog masbro sendiri ya...

Nah untuk hasilkan akan seperti ini, atau bisa dilihat saja di Daftar Isi blog ini. Untuk artikel baru akan ada tanda New disampingnya.

Membuat Daftar Isi berdasarkan Category/Label

Gampang kan, jadi itulah cara membuat Daftar Isi Berdasarkan Category/Label di blogger, yang pastinya sangat responsif. Selamat mencoba...

Hubungi dan Ikuti juga Otovirtual.com di media berikut:

• e-mail : hermawan.r@gmail.com
• facebook : otovirtual.com
• twitter : @hermawan_ris
• instagram : @batam_otovirtual
• WA : +6281364097225