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 :)

14 Responses to "Cara Membuat Daftar Isi Keren Dengan Pilihan Sortir"

  1. Wah keren tampilannya ijin copot yah mbak kodenya

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

    ReplyDelete
  3. This comment has been removed by the author.

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

    Thanks

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

    Thanks

    ReplyDelete
  6. wah bagus?buatan mas taufik nurohman

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

    ReplyDelete
  8. kerenizin sedot ...........trims

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

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

    ReplyDelete
  11. kalau menurut label yang inginkan tapi sesuai abjad gmna gan? tolong balas komentar ane klw artikel tentang pertanyaan ane udah ada. thx admin

    ReplyDelete