Cara Membuat Daftar Isi Keren Dengan Pilihan Sortir

Daftar isi atau sitemap adalah daftar semua artikel yang terangkum di satu halaman, maka sangat penting sekali bagi anda untuk memasang sebuah dafar isi blog untuk memudahkan pengunjung mencari artikel yang mereka cari, tutorial membuat daftar isi yang saya ambil dari DTE ini adalah daftar isi dengan pilihan sortir atau sebuah table menggunakan pilihan sortir berdasarkan label dan abjad, jadi dari sini ada pilihan khusus, sitemap atau daftar isi seperti ini juga ringan untuk digunakan.

Klik Untuk Melihat DEMO

Gambar di atas adalah contoh gambar atau daftar isi dengan pilihan berdasarkan sortir atau jika ingin melihat langsung silahkan klik tombol demo, untuk cara membuat daftar isi pilihan sortir silahkan ikuti tutorialnya.

Cara Membuat Daftar Isi Dengan Pilihan Sortir

1. Buka akun blogger anda.

2. Pilih menu laman > Klik Laman baru

Lihat contoh gambar :

3. Selanjutnya Pilih mode HTML dan paste Code di bawah ini di kolom tersebut.

<style>
#tocTable {
border:2px solid white;
font:normal normal 11px/normal Verdana,Tahoma,Arial,Sans-Serif;
color:#333;
border-collapse:collapse;
text-align:left;
margin:0 0 5px;
}
#tocTable th,
#tocTable td {
border:1px solid white;
background-color:#fafafa;
padding:10px 15px;
}
#tocTable th {
background-color:#5d5d5d;
font-weight:bold;
color:white;
text-shadow:0 1px 0 rgba(0,0,0,.3);
}
#th-1 {
width:60%;
background-color:#5A930D;
}
#th-2,#th-3 {width:20%}
#tocTable td.toc-header-col-1,
#tocTable td.toc-header-col-2 {
padding:0 !important;
background-color:#2372A7;
}
#tocTable td.toc-header-col-3 {background-color:#D7DEF0}
#tocTable a {
display:block;
text-decoration:none;
color:white;
padding:10px 15px;
background:none;
}
#tocTable td.toc-header-col-1:hover,
#tocTable td.toc-header-col-2:hover {
background-color:#174B6F;
-webkit-box-shadow:inset 0 0 3px rgba(0,0,0,.4);
-moz-box-shadow:inset 0 0 3px rgba(0,0,0,.4);
box-shadow:inset 0 0 3px rgba(0,0,0,.4);
}
#tocSort {
display:block;
width:220px;
font:normal bold 12px/normal Verdana,Tahoma,Arial,Sans-Serif;
color:#333;
cursor:pointer;
border:none;
outline:none;
background-color:#eee;
margin:0 0 2px 0;
padding:5px;
}
</style>
<script>
var theTotalPosts = 9999, // Tentukan jumlah maksimal posting
theOptions = "Sortir...", // Label opsi 1
theSortPosts = "Sortir berdasarkan Abjad", // Label opsi 2
theSortLabels = "Sortir berdasarkan Label", // Label opsi 3
theTitles = "Judul Artikel", // Header tabel 1
theLabels = "Label Artikel", // Header tabel 2
theDates = "Bulan Terbit", // Header tabel 3
theBlankLabels = "Tak Berlabel", // Label kosong
theSiteUrl = "http://www.madamvia.web.id"; //
</script>
<script src="http://dte-project.googlecode.com/svn/trunk/toc-table-sort.js"></script>

Lihat Contoh gambar :

Ganti URL http://www.madamvia.web.id/ dengan url blog anda dan klik "Publish"

Sekian tutorial cara membuat daftar isi dengan pilihan sortir, Semoga bermanfaat :)