Cara buat daftar tabel seluruh posting (Show Table of Contents)

"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 :). Pengen tau cara buatnya ikuti tutorial dibawah ini.

Tampilan link sebelum di klik







Tampilan daftar seluruh posting

Langkah Pembuatannya sebagai Berikut:




Langkah Pertama:

Jangan lupa Backup template Blog sobat

Langkah 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://namablogo.blogspot.com/feeds/posts/default?alt=json-in-script&max-results=999&callback=loadtoc"></script>

Jangan lupa ganti dengan alamat blog sobat pada kode warna merah diatas

Jangan lupa disimpan :)

Kemudian Tambahkan sebuah element halaman
yang baru -> HTML/Javascript



Copy/Paste code dibawah ini



<div id="toc"></div>



Jangan lupa disimpan :)

Langkah 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;

}

Langkah Terakhir:

Yup! udah selesai jangan lupa disimpan dan lihat hasilnya :)

Selamat mencoba and Happy Blogging :)

Kode sumber

http://beautifulbeta.blogspot.com/2007/04/blogtoc-widget-released.html