Tabel Konten Blogger 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:
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:
Setelah itu Anda akan melihat formulir halaman statis seperti ini. Klik 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
@Fikruna Zone Bisa.
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?
Taufik Nurrohman
Mungkin masalah di pengaturan feed posting.
Anonim
Kalo ingin ditambahkan gambar di judulnya bisa gak yah...
Kayak mana caranya?
Taufik Nurrohman
Coba pakai widget ini saja → /2012/10/widget-daftar-isi-tabulasi-untuk-bogger.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?
damblue
Cara Sortir... nya di ilangkan bagaimana karena saya mau membuat menampilkan satu label/category, gimana caranya?
satu label tersebut berdasarkan abjad. gimanatuh?
Taufik Nurrohman
Pelajari ini → /2015/02/json-parser-for-blogger-posts-and-pages.html
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>