Tabel Konten Blogger dengan Pilihan Sortir

Tabel Kontent dengan Pilihan Sortir

Berikut ini adalah versi daftar isi dalam bentuk tabel yang memiliki kemampuan untuk menyortir berdasarkan abjad dan label. Saya mendapatkan kode ini dari Threelas kemudian memodifikasinya untuk meringkas kode-kode yang tidak perlu:

Lihat Demo

Buat widget daftar isi ini dengan mengikuti langkah-langkah berikut:

Pertama-tama klik menu Laman pada sidebar. Kemudian, pada menu Laman Baru pilihlah Laman Kosong:

Menambahkan halaman statis baru

Setelah itu Anda akan melihat formulir halaman statis seperti ini. Klik mode HTML:

Pilih mode HTML

Salin kode di bawah ini kemudian letakkan di dalam formulirnya:

<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://nama_blog.blogspot.com"; // URL blog kamu
</script>
<script src="//dte-project.googlecode.com/svn/trunk/toc-table-sort.js"></script>

Ganti URL http://nama_blog.blogspot.com dengan alamat blogmu, lalu simpan dan terbitkan.

31 Komentar

  • Anonim

    Mantap bro, ilmu baru... Langsung sy pelajari, trutama perintah sortir'y.

  • Kaki Lebah

    mantap gan..!, sdh sy coba gan tp gk bisa.., tp klo pake alamat URL http://hompimpaalaihumgambreng.blogspot.com bisa.., ko' gitu yaaa..?? :)

  • Taufik Nurrohman

    @Kaki Lebah: Saya coba pake alamat lain bisa kok. Kalau tetep tidak bisa mungkin ada di pengaturan Feednya.
    Coba masuk ke menu Setelan ⇒ Lainnya ⇒ Umpan Situs

    Pada pilihan Boleh umpan blog? jangan sampai mengambil pilihan Tak satupun. Seminimal-minimalnya Singkat atau Sampai lompat baris.

  • Kaki Lebah

    maaf bro.., msh tetap gk bisa... :( sy dah pilih Singkat lalu sy coba bgitu pula dgn pilihan Sampai Lompat baris tp tetap gk bisa...

  • Taufik Nurrohman

    @Kaki Lebah: Iya. Ada beberapa yang tidak bisa. Tapi banyak juga yang bisa. Saya coba pake URL www.threelas.com juga masih bisa. Masalahnya sama dengan widget daftar isi akordion dengan sortir bulan terbit.
    Mungkin kalau sudah Saya temukan jawabannya akan Saya posting lagi.
    Aneh loh mas, Saya sudah coba bisa. Kebanyakan bisa.

  • Fikruna Zone™

    Kak kalo di masukin ke posting bisa gak?.

  • Taufik Nurrohman

  • Unknown

    mas.. maaf aq copy karya nya mas.. cb cek blog q yg ini mas.. lo ada yg kurang berkenan ngomong aja mas..ntar aq ganti :D
    http://adnan-depressionz.blogspot.com/p/site-map.html

  • Taufik Nurrohman

    @Adnan Agnesa Itu tabel konten dari Blogger Plugins, yang dimodifikasi oleh Urang Kurai. Saya rasa tidak ada hubungannya dengan ini.

    • iiiissssaaaaaa

      bang admin gmn caranya ilangain DTE nya?? soalnya laman postingan ane gak muat...

  • uki

    Akhirnya dapet ini,tq mas taufik...

  • Unknown

    aku coba pake kok gak berhasil kenapa ya. tolong di bantu
    maklum dari www.gobbloge.blogspot.com
    silahkan di tinjau blog saya yang masih belajar

  • Unknown

    kalau membuat daftar isi seperti http://hompimpaalaihumgambreng.blogspot.com/p/daftar-isi-buku.html gimana...

  • azewBz

    ada mslah yg sama sprti di atas.
    tutorial ini tidak bkerja mas dengan url blog saya..!! :(

  • dhanyn10

    mas, klo yg itu dikasih navigasi bisa gak mas? biar yg dimuat tidak terlalu banyak gitu...spt navigasinya daftar isi dengan thumbnail

  • Mukhamad Ikhbar


    ane ko jadinya banyak yg doublenya sih mas ?? mohon bantuannya ..

    • Unknown

      Judul Artikel kamu punya lebih dari 1 label, makanya jadi kyk gitu .. itukan daftar isi sort label, kalo 1 artikel punya 8 label otomatis yang nongol juga jadi 8 biji :D

  • F.Ramadana

    gan saya ada script sendiri, tapi server offline, gi mana caranya buat nulis manual aja ya gan?

  • Palma Hutabarat

    kang kalau postingan ini kan demo nya dah fail :)
    jadi kalo sama hasil Link yang ini
    sama gak kang penggunaan nya. ^_^

    Teks Tautan

    soal nya ini DEMO Dari jsfiddle kang nurohman juga nih saya lihat. :yaya:
    Ada DTE nya di dalam. :-bd

  • Unknown

    gimana cara buat daftar isi kayak gini?? http://www.dte.web.id/p/daftar-isi-buku.html

  • Unknown

    gak bisa eroor apa ya?

  • Anonim

    Kalo ingin ditambahkan gambar di judulnya bisa gak yah...
    Kayak mana caranya?

  • GABUNG MAKMUR

    Mas, kalo labelnya hanya satu label saja gimana caranya

  • Unknown

    Kalau dipilih hanya label tertentu saja yang dimasukkan sitemap, gimana mastah bro ya?

  • damblue

    Cara Sortir... nya di ilangkan bagaimana karena saya mau membuat menampilkan satu label/category, gimana caranya?
    satu label tersebut berdasarkan abjad. gimanatuh?

  • Unknown

    Min bisa tolong tambahin vitur search dong. kalo bisa tambahin juga thumbnail / gambarnya

    • Taufik Nurrohman

      Coba cari tutorial dari luar tentang pembuatan tabel konten seperti di blog ini. Saya rasa ada banyak.

  • Mas Tamvan

    Min ada solusi, kenapa feed blog saya g bisa tampil...
    tapi pake kode lain yang ga ada labelnya bisa...
    Contoh kode seperti ini bisa..
    <script type="text/javascript">
    function mycallback(json) {
    for (var i = 0; i < json.feed.entry.length; i++) {
    for (var j = 0; j < json.feed.entry[i].link.length; j++) {
    if (json.feed.entry[i].link[j].rel == 'alternate') {
    var postUrl = json.feed.entry[i].link[j].href;
    break;
    }
    }
    var postTitle = json.feed.entry[i].title.$t;
    var postSummary = json.feed.entry[i].summary.$t;
    var postImage = json.feed.entry[i].media$thumbnail.url;
    var entryShort = postSummary.substring(0, 90);
    var entryEnd = entryShort.lastIndexOf(" ");
    var postContent = entryShort.substring(0, entryEnd) + '...';
    var item = '<div class="timeline-item"><div class="timeline-content"><h2><a title="'+ postTitle +'" href="' + postUrl + '">' + postTitle + '</h2></a><p>' + postContent + '</p></div><div class="timeline-icon"> <img title="'+ postTitle +'" alt="'+ postTitle +'" src="'+ postImage +'"/></div></div>';
    document.write(item);
    }
    }
    </script>

    <div id='timeline'>
    <script src="https://mastamvan.blogspot.com/feeds/posts/summary?orderby=published&max-results=500&alt=json-in-script&callback=mycallback"></script>
    </div>

Komentar telah ditutup.