5.Cara membuat Daftar isi

Table of Content ( ToC ). Mungkin bagi beberapa blogger istilah ini sudah dipahami dan dimengerti, namun bagi yang belum familiar dengan TOC bisa dibaca-baca lagi. TOC atau bisa disebut daftar content kalo di wordpress bisa di artikan sitemap blog. Karena di blogger tidak terdapat fasilitas untuk menyuguhkan semua konten yang tertata rapi, maka diperlukan modifikasi yang bisa digunakan untuk menampilkan semua artikel menurut label atau categorinya. Kita bisa memanfaatkan Static Page pada blogger untuk membuat halaman static untuk menampilkan content dari blog.



Tidak jauh-jauh kita mencari orang yang membuat scripts Auto TOC dengan menggunakan Javascripts, salah satu teman blogger kita Abu Farhan sudah membuat beberapa versi sitemap khusus untuk blogger dengan berbagai kelebihannya.

Versi 1
Versi ini adalah versi standard dan pertama yang dikeluarkan oleh Abu untuk menampilkan daftar isi dari blog yang ditata berdasarkan Label, dengan menggunakan javascripts dan pemanggilan feeds menggunakan json maka jadilah sebuah sitemap untuk blog blogger. Penggunaannya cukup mudah, hanya dengan memasukan 1 buah scripts dan 1 buah script lagi untuk memanggil feeds. Kita bisa menggunakannya dalam postingan atau pada static pages, lebih disarankan menggunakan halaman static karena tidak akan mempengaruhi feeds reader.

Code untuk Versi 1
<script style="text/javascript" src="http://www.abu-farhan.com/script/daftarisiblogger/blogtoc-min.js"></script>
<script src="http://www.abufarhan.co.cc/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>
Ganti www.abufarhan.co.cc dengan alamat blog anda.

DEMO Table of Content Versi 1

Versi 2
Pada versi 2 ada perbedaan mencolok pada TOCnya yang tidak lagi diurutkan berdasarkan label, namun digunakan untuk archive blog. Sehingga artikel yang tampil diurutkan berdasarkan tanggal posting. Cara hampir sama dengan versi 1 cukup menambahkan code pada postingan atau dengan menggunakan static pages.

Code untuk Versi 2
<script style="text/javascript" src="http://abu-farhan.com/script/daftarisibloggerarchive/tocbyarchivemin.js"></script>
<script src="http://audio.assunnah.web.id/feeds/posts/default?max-results=500&alt=json-in-script&callback=loadtoc"></script>
Ganti audio.assunnah.web.id dengan alamat blog anda

DEMO Table of Content Versi 2

Versi 3
Untuk versi 3 tidak ada perubahan mendasar, masih menggunakan feeds dan scripts yang sudah disempurnakan. Kali ini menggunakan style dari google feeds, dengan tampilan yang lebih segar.

Code untuk Versi 3
<link rel="stylesheet" href="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.css" type="text/css" media="screen" />
<script style="text/javascript" src="http://scriptabufarhan.googlecode.com/svn/trunk/daftarisiv2.js"></script>
<script src="http://deconstructioncode.blogspot.com/feeds/posts/summary?max-results=9999&alt=json-in-script&callback=loadtoc"></script>
Ganti deconstructioncode.blogspot.com dengan alamat blog anda

DEMO Table of Content Versi 3

Versi 4 ( Accordion )
Penyempurnaan dari Table of Content sebelumnya, kali ini ditambahkan scripts accordion untuk mempermudah mencari suatu artikel didasarkan pada label atau category. Penambahan Accordion scripts sendiri dirasa perlu pada blog dengan artikel yang banyak, sehingga halaman tidak berubah menjadi terlalu panjang.

Code untuk Versi 4 ( Accordion )
<link href="http://abu-farhan.com/script/acctoc/acc-toc.css" media="screen" rel="stylesheet" type="text/css"></link>
<script src="http://abu-farhan.com/script/acctoc/daftarisiv2-pack.js"></script>
<script src="http://www.oblo.web.id/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>
<script type="text/javascript">
var accToc=true;
</script>
<script src="http://abu-farhan.com/script/acctoc/accordion-pack.js" type="text/javascript"></script>
Ganti www.oblo.web.id dengan alamat blog anda

DEMO Table of Content Versi 4 ( Accordion )

Demikian 4 buah versi dari TOC atau biasa kita kenal dengan sitemap untuk blogger yang telah dikembangkan oleh Abu-farhan. Keempat-empatnya tentu dapat digunakan dengan baik, namun kita harus bisa menyesuaikan kebutuhan sitemap untuk blog kita.

note: Thanks for Abu farhan