Cara Buat Show Table of Contents di Blogger

Mempunyai daftar tabel seluruh posting atau lebih keren dengan nama "Show Table of Contents" pasti mempunyai nilai plus tersendiri, selain mempermudah pengunjung dalam menjelajahi isi blog, cara ini juga dapat memberikan kecepatan pencarian dibandingkan dengan menggunakan box search atau mencari suatu artikel berdasakan label. Kode yang akan kita gunakan menggunakan javascript yang sedikit telah saya modifikasi, semula hasil tampilan bahasa kode ini mengunakan bahasa inggris dan terlihat kurang familiar, jadi saya modifikasi saja menggunakan bahasa indonesia dan telah saya tambahkan beberapa icon biar terlihat lebih fresh:P.
Penasaran??? lets gooo to tutorial!!!!

Pertama:
Jangan lupa Backup template Blog sobat
Kedua:
Kemudian Tambahkan sebuah Element halaman -> HTML/Javascript

Copy/Paste code dibawah ini

<div id="toclink"> <a href="javascript:showToc();"> <img border="0" src="http://www.geocities.com/oom_directory/images/add2.png"/><font color="#808000"><b> Lihat Semua Daftar Posting</b></font></a>
</div>
<script style="text/javascript" src="http://www.geocities.com/oom_directory/blogtoc.js"></script>
<script src=" http://namablogmu.blogspot.com/feeds/posts/default?alt=json-in-script&max-results=999&callback=loadtoc"></script>
Jangan lupa ganti dengan alamat blog sobat pada kode diatas
Jangan lupa disimpan :)
Kemudian Tambahkan sebuah element halaman yang baru -> HTML/Javascript
Copy/Paste code dibawah ini
<div id="toc"></div>
save..ok??

ketiga:
Langkah selanjutnya buka Template -> Edit Html
Copy/paste code dibawah ini pada deretan CSS code atau kalo masih bingung cari code <b:skin><![CDATA[/* lalu paste aja dibawah kode tersebut

/* Show Table of Contents
-----------------------------------------
*/
#toc {
border: 0px solid #78B749;
background: #ffffff;
padding: 5px;
width:500px;
margin-top:10px;
}
.toc-header-col1, .toc-header-col2, .toc-header-col3 {
background: #cccccc;
color: #444;
padding-left: 5px;
font-weight:bold;
width:250px;
}
.toc-header-col2 {
width:75px;
}
.toc-header-col3 {
width:125px;
}
.toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited {
font-size:95%;
text-decoration:none;
text-align: Left;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #cccccc;
}
.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {
font-size:95%;
text-decoration:underline;
text-align: left;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #cccccc;
}

.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {
padding-left: 5px;
text-align: left;
font-size:95%;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #cccccc;
}
Save dan selamat datang di Info dunia maya.heheheheheheh