Mecha versi 2.6.4 sudah dirilis!

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.

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

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?

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.