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

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

  1. Wah keren tampilannya ijin copot yah mbak kodenya

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

    BalasHapus
  3. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  4. keren bagus utk buat laman sitemap

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

    Thanks

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

    Thanks

    BalasHapus
  7. wah bagus?buatan mas taufik nurohman

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

    BalasHapus
  9. kerenizin sedot ...........trims

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

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

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

    BalasHapus
  13. Gabung yuk di situs judi kami,

    terpercaya, Domino 99, bandarQ, Hanya di

    CebanQQ, c*m
    Bonus cashback: 0.4%
    Refferal: 20%
    Bagi member baru tingkat kemenangan diatas 78%+

    berdasarkan statistik bosku :)
    tunggu promo menarik dari kami :)

    BalasHapus