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&alt=json-in-script&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&alt=json-in-script&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.
47 Comments for Table of Content ( ToC ):
versi yang ke empat keren juga, hasil utak atik sendiri tuh....
@rudy .: kagak bos, tetep punya si abu kok ide dan kreativitasnya. cuman nampang doank :D
@Denny, kalau cssnya dirubah bisa nggak ya?
@rudy .: bisa2 aja kan, tergantung kreativitas. mungkin diCSSnya terlalu banyak efek jadi kurang pas dipaletakan di blog yang simple, jadi tinggal disesuaikan saja. Pemakaian CSS bisa dimasukan kedalam skin atau di buat sendiri pada halaman TOCnya.
Wah... patut dicoba...
Wah, udah nggak pake Blogspot gan heheh
@Ardianzzz .: wah selamat2 untuk rumah barunya, semoga makin bisa berkreasi :D
kira2 choen & ardianz kemana tuh mencloknya yak...kekekekekkk
mantaaff...
makasih... infonya...!!
peran sitemap emang penting untuk blog.. katanya sih lebih search engine friendly. Betul gak mas?
O, iya.. orang kudus ya mas? Perkenalkan aku orang Karanganyar - Demak
- Salam -
Disinilah hebatnya Abu Farhan... Script-script yang dibuat membuat seorang newbie pun dapat dengan mudah untuk menggunakannya... Kapan ya kita-kita newbie blogger bisa seperti beliau...??? Tetap semangat... Makasih bos deni udah review versi terbarunya... Versi yang keempat kolaborasi antara accordion dan toc yang sangat bagus dan mantap...
Hmm kerennn!!! perlu di cobaa..
Aku kok gagal pake TOc ini versi 3 yach???
Boleh jg tutornya...
Salam kenal...:)
thanks's tutorialnya bro....
wah aku juga pake nggon mas abu
tapi namamu nampang di yg terbaru mantappp
Akuu dah pernahh coba nih gan.. Tx buat triknya..
mantap gila templatenya...
Gila, hiatuse suwe bangeti :p
Wah lengkap deh gallery TOCnya,,, ijin berguru master ...
bisa ngirit tempat di sidebar n tambah kaya
akan konten klo pake toc.
visit back ya mas,
http://yuyaindou.blogspot.com
http://melodacomputer.blogspot.com
artikelnya bagus
visit back
http://www.majalahbara-smaga.co.cc/
Waduh.., Tutorial dewa dan komentatornya dewa semua!!!
Sebenarnya malu mau komen, tapi niggalin jejak diblog sekeren ini kayaknya...hmmm...hihihi
Ane sih lebih suka dengan table yang versi 4.. cuman ane masih penasaran dengan efeknya buat loading halaman blog ane.. nambah berat ga yah ??? tolong pencerahannya gan..
lihat demo nya keren... apalagi yang versi terbaru, nice deh pokoknya. nungguin versi berikutnya ah..
keerreennn... nice pokoknya
wow.. kereeenn... aq udah nyoba untuk ToC versi 4 di Blog aq, ngomong - ngomong bisa ga' yach tulisan "widget by abu farhan" letaknya paling bawah di list di hilangin...??
thanks to the information,
because it is very helpful especially in making and messing work on bloggers who I have today
Thanks infonya
Kursus internet secara online yang di jamin bisa belajar internet secara cepat
dan dijamin pintar menguasai internet untuk pemula dan pendaftaran member memakai pulsa 25rb .
Buruan Daftar!!! http://dijaminpintar.totalh.com
thanks to this blog
oh semacam index page gitu yah :)
udah lama pake yg pertama itu..
jadi kepengen yg terahir,keknya seru tuh..
mantap infonya sangat bermanfaat
yg ke empat kok ga bisa di buka tutup sich..
padahal di demonya bisa..
kesalahan dimana tuh.. ??
mohon koreksinya para master..
thanks infonya..salam kenal..
Wah... wis selangkah lebih maju ki... aku nggolek contoh ToC nggo projectku malah nemu blogmu... wkwkwkkwkw
Keep Rocking Brotha!
lengkap sekali... :top:
yang komen juga master semua... :)
saya mengajak teman2 blogger untuk ngumpul disini http://komunitasblogger.tk , baru dibuat, jadi musti dipromoin dulu... thanks buat pemilik blog. :)
langsung dicoba ah...terima kasih :)
Semua Script TOC di atas tidak dapat menampilkan daftar isi lebih dari 500 artikel :(
Wah makasih mas.. udah share
Saya telah menerbitkan tabel konten buatan abu farhan yang telah saya indonesiakan. Apakah itu melanggar aturan? Mohon jawabannya.
@anonim:untuk menampilkan lebih dari 500 artikel Anda tinggal menambahkan nilai maxresultnya seperti ini:
http://hompimpaalaihumgambreng.blogspot.com/feeds/posts/summary?max-results=9999&alt=json-in-script&callback=loadtoc
@Tukang Pos .: saya rasa tidak akan keberatan om, selama tetap menampilkan sumber.. :D
happy blogging, thanks dah dibantu jawab. saya rasa ada alasan di angka 500, beliau pernah ngomong tapi saya lupa :D
E 'semplicemente incredibile tema:)
wah ana belu nyoba nih gan...
thanks tipsnya gan, ane mau coba.
sippp.berhasil.kalau biar jd arsip blog caranya gimana gan?con ni punyaku jadinya label.tlg bntuannya.
Poskan Komentar
Spam is not Good for your Body :)