Kode html untuk modifikasi daftar isi blog

Inilah beberapa kode html untuk memodifikasi daftar isi blog.
Kode html ini menurut saya bagus,karena dapat menghemat tempat di halaman sebuah blog,oleh karena itu saya sudah memasangnya,lihat hasilnya di daftar isi sidebar sebelah kiri blog saya ini!
Jika kamu juga tertarik untuk memasang'nya di blog kamu, kode html modifikasi daftar isi blog itu adalah seperti ini:

Kode HTML (Script & CSS) untuk Membuat Daftar Isi nya adalah:

<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: #3498DB;
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{text-transform:uppercase;}
.new{color:#FF5F00;font-weight:bold;font-style:italic;}
.postname{font-weight:normal;background:#fff;margin-left: 35px;}
.postname li{border-bottom: #ddd 1px dotted;margin-right:5px}
</style>
<div id="toc">
<script src="https://cdn.jsdelivr.net/gh/penaindigo/Pena-Indigo-Code@a134f9def601a6f77332eccc35d3d20e0d3c7e49/sitemappenaindigo.js" type="text/javascript"></script>
<script src="/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script></div>

Contoh demo daftar isi yang menggunakan script di atas adalah ini: Solo Kursus Forex Artikel Forex.

Sedangkan script lainnya yang juga berguna untuk membuat daftar isi adalah sbb:

<div style="overflow:auto;width:160px;height:200px;padding:10px;border:1px solid #eee">
<script src="https://html-scripts.googlecode.com/files/feed-dates.js"></script>
<script src="http://solo-on-line.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script>
</div>

Perhatikan warna tulisan dan warna background tulisan di kode html di atas!
Warna merah 160 adalah untuk ukuran lebar horisontal kolomnya.
Warna ungu 200 adalah untuk ukuran panjang vertikal kolomnya.
Warna background kuning https://html-scripts.googlecode.com/files/feed-dates.js adalah type tampilan daftar isinya,kalau yang itu adalah tampilan daftar isi berdasarkan tanggal posting ditulis.
Sedangkan  warna biru http://solo-on-line.blogspot.com/ adalah alamat url blog yang akan di modifikasi tampilan daftar isinya.

Jika kamu mau tampilan modifikasi daftar isi blog kamu hanya terlihat judul posting'nya saja seperti ini:

Daftar Isi :

Ganti tulisan yang backgroundnya warna kuning itu dengan kode html yang ini:

https://html-scripts.googlecode.com/files/feeds.js

Tetapi jika kamu mau tampilan modifikasi daftar isi blog kamu itu terlihat ada label atau kategori blog'nya seperti ini:

Daftar Isi :

Ganti tulisan yang warna backgroundnya kuning itu dengan kode html yang yang ini:

https://html-scripts.googlecode.com/files/feeds-labels.js

Untuk pemasangan'nya sangat mudah sekali,yaitu kamu tinggal melakukan copy dari kode html modifikasi daftar isi blog di atas kemudian kamu paste'kan ke tambah gadget html/javascript blog kamu.

Mudahkan? selamat mencoba semoga berhasil.