Cara Membuat Daftar Isi Keren Dengan Pilihan Sortir

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.

Cara Membuat Daftar Isi Keren Dengan Pilihan Sortir


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 :

Cara Membuat Daftar Isi Keren Dengan Pilihan Sortir

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 :

Cara Membuat Daftar Isi Keren Dengan Pilihan Sortir


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 :)
Bagikan Ke
13 Komentar untuk "Cara Membuat Daftar Isi Keren Dengan Pilihan Sortir"

Wah keren tampilannya ijin copot yah mbak kodenya

ini dengan sistem sortiran acak ya mba.. izin coba ya, buat blog yang tadi

This comment has been removed by the author. - Hapus

min, bisa berdasarkan category ga?
jadi yg muncul cuma category yg telah ditentukan.

Thanks

min, bisa berdasarkan category ga?
jadi yg muncul cuma category yg telah ditentukan.

Thanks

wah bagus?buatan mas taufik nurohman

mbagus banget tp di coba ke blog anne g bisa kenapa ya

kerenizin sedot ...........trims

wah ini yang saya cari, kebetulan blog saya juga belum ada site map nya, ijin ngambil ya.

wah ko gak work.... mohon di benahi...