Membuat Daftar Isi Blog

Sabtu, 01 Agustus 2009

Daftar isi di blog sangatlah penting perannya, karena ini dapat mempermudah pembaca kita menemukan artikel-artikel lain di blog kita.
Setelah berkutat berhari-hari dengan javascript, akhirnya selesai juga script untuk membuat daftar isi blog.

Daftar isi ini tidak hanya menampilkan judul dan link-nya, tapi juga menampilkan label, tanggal postingan, serta ringkasan dari artikel-artikel kita.

Selain itu, daftar isi ini dapat di-filter untuk menampilkan beberapa artikel dengan label atau tanggal tertentu saja, dan dapat juga diurutkan sesuai tanggal atau judulnya.
Untuk contohnya, kamu bisa lihat di sini.

Caranya:

  1. Masuk ke account Blogger kamu, pilih "Posting" - "New Post",
  2. Kemudian isi judulnya dengan judul yang kamu inginkan, seperti "Daftar Isi" atau semacamnya,
  3. Kemudian copy-paste kode di bawah ini:

    <div id="cl_option"> Loading... </div>
    <div id="cl_content_list"> </div>
    <script type="text/javascript">var jumlah_kata_dalam_ringkasan = 200;</script>
    <script src="http://copycat91.googlecode.com/svn/trunk/contentlist.js"> </script>
    <script src="http://BLOGKAMU.blogspot.com/feeds/posts/default?alt=json-in-script&callback=onLoadFeed&max-results=500"> </script>

  4. Jangan lupa untuk mengganti BLOGKAMU dengan URL blog kamu,
  5. Kamu juga bisa mengatur jumlah kata dalam ringkasan dengan mengubah nilai variabel jumlah_kata_dalam_ringkasan,
  6. Untuk mencegah daftar isi ini berada di halaman paling depan, klik "Post Option" di bagian bawah sebelah kiri, kemudian ganti tanggalnya jadi beberapa hari yang lalu, sebulan yang lalu, atau setahun yang lalu,
  7. Kalau kamu ingin yang versi bahasa inggris, ganti aja contentlist.js jadi contentlist_en.js.
Semoga bermanfaat!

O iya, kalau kamu mau menulis artikel tentang daftar isi ini di blog kamu, kamu boleh menambahkan kode
<div style="text-align:right; font-size:80%">
Re-published by: <a href="urlblogkamu.com"> Blog kamu </a>
</div>
di bagian bawah kode di atas pada artikel kamu.
Supaya blog kamu juga dapat backlink dari blogger yang pakai daftar isi ini.
:D

Blog this!

Suka artikel dari blog ini? Silakan masukkan alamat email kamu untuk mendapatkan artikel terbaru dari Info Blog. Gratis!!
Atau baca Feed dari blog ini di sini.

Delivered by FeedBurner

114 komentar:

Lolids Here mengatakan...

Siip kawan, ini yg aku cari buat mempercantik blog ku :P . trim info-nya Preen. salam kenal dari blog Lolids ^_*

note : ada ngga' "scrips yang bisa daftar isi urut abjad/huruf" thx b4.

aprie mengatakan...

weks..
mantab nih..

Copycat91 mengatakan...

@Lolids Here: daftar isi ini bisa diurutkan sesuai abjad juga, kok. coba aja ubah jadi "Urut berdasarkan: Judul"

ateh75 mengatakan...

wah info yg bagus sekali ..makasih .mau saya terapkan diblogku .semoga berhasil.

Maspri mengatakan...

Tips hebat... Perlu dicoba

Sigit mengatakan...

makasih mas tutorialnya..manjur bgt nih..dah saya coba

Before 20 Writer mengatakan...

Thanks... aku dah bikin di blogku... keren...

justduit mengatakan...

wahhh.. artikel yang segar, layak di coba... thanks infonya friend...

Arissaputra mengatakan...

Ok sob, kaya nya perlu dicoba... thank's

KursusKomputer mengatakan...

wah bagusnih daftar isinya

Seandy mengatakan...

hah..niy tutorial gw cari2 akhirnya dapet jg..ha...akhirnya blog gw pnya daftar isi..he..makasih niy tutorialnya..mantep toh...

jika berkenan silahkan kunjungi blog yang baru aja saya bikin..:-)
http://seandy-laut-biru.blogspot.com

makacih buanyak.........

Arie mengatakan...

thanx buat bantuannya

Ares Shadux's mengatakan...

mo dicoba mas. mgkn nanti. browserku lagi eroror trus neh pake komp ini. akun blogernya ga mau nyimpan n edit. hiks hiks .......

exa mengatakan...

keren bro...
terima kasih infonya

rascalbrick mengatakan...

Makasih sobat tips dan trikinya tapi sayang aku belum sempet online akhir2 ini kapan2 aku coba tips dari sobat thx!!

Hari mengatakan...

kereeeeeeeeeeeeeeeeeennn.....!!!!!

HAEDIR mengatakan...

thanks infonya

sakura21 mengatakan...

sob, gimana caranya dafter isi itu tampil di atas sejajar dengan home?

Copycat91 mengatakan...

@sakura21: itu fiturnya udah disediain template-nya, jadi aku tinggal taro linknya di situ..

Harri mengatakan...

klau ingi bahasa inggris gimana

Copycat91 mengatakan...

ganti aja contentlist.js jadi contentlist_en.js.
aku baru upload tadi..

Ares Shadux's mengatakan...

kalo yang muncul judul postingnya aja gmn mas? ga usah da labelnya di bawah judul posting di daftar isinya

cewek-ebatzz mengatakan...

waduh maz aku ndak mudeng,,,
kok punyaku malah error ya????

cewek-ebatzz mengatakan...

hmm,,, akhirnya bisa juga maz,,,
tengkyu buanget yaaa :)

eighTsuN mengatakan...

teNgs mas..artikelnya..

bTw Tukeran link yugh..


bLog mas dah tag pasang d blogQ..^^

Alone mengatakan...

Langsung tak cobai'in ah mumpung blog q msh baru

choen mengatakan...

keren yah daftar isinya, salut bro.

HWI Bisnisku mengatakan...

Aku dah coba, keren sekali seperti site map..lah! thank,s

Bekasi Peduli Aids mengatakan...

kalau buat daftar isi seperti folder-folder di komputer seperti blog punya anangku.blogspot.com gimana cara nya bro ?

cari uang mengatakan...

Thanks idenya bro, mau langsung di tes niih

hendra mengatakan...

wah thanks berat nih, mau tak coba di blog mesin blogspotku :)

Sayang Mama mengatakan...

slm knl & slm bertmn... keren artikelnya..

jobseekerstop mengatakan...

klo postingannya lebih dari 500, yang akan tampil yang terbaru kan? labelnya bisa diurut atau berdasar postingan terbaru?

jobseekerstop mengatakan...

Boleh request? bisa nggak ya kita pilih label mana saja yang di tampilkan?

thanks, keep blogging bro

Arief Masqulin mengatakan...

wah, sama bagusnya dengan TOC py abu-farhan. good job kawan ;-)

fendi mengatakan...

okey scriptnya bermanfaat buat sya kunjungi blog ane jga ya

nowGoogle.com adalah Multiple Search Engine Popular mengatakan...

daftar isi = sitemap khan ?

Festival Museum Nusantara mengatakan...

mampir sob

Health Spot mengatakan...

mantab gan

Piala Dunia 2010 mengatakan...

keren bro

ayead mengatakan...

KERRREEENNN...,

belajar dimana bro???



boleh tukeran link ga
http://ayead.blogspot.com


makasih..
salam kenal

cahPamulang mengatakan...

Blog yang sangat menarik

abufath.blogspot.com mengatakan...

Terima kasih Gan tips yang baik n bisa langsung praktekin

Tempat Informasi dan Download Gratis mengatakan...

oke kebetulan lagi nyari-nyari nih, saya cobain dulu deh tutorial dari mas kayaknya beda nih dengan yang lain. mampir juga mas di blogs saya jangan lupa koment yah.? oke lam kenal

negeriads.com solusi berpromosi mengatakan...

keren triknya om

negeriads.com solusi berpromosi mengatakan...

terima kasih infonya teman

negeriads.com solusi berpromosi mengatakan...

saya coba nanti

AGe mengatakan...

tapi tetep pjok kanan bawah ada link ente ...hehe
ngiklan

negeriads.com solusi berpromosi mengatakan...

thanks for share

Jim and Zam mengatakan...

Thanx banget.... dah dicoba!

Forantum I Blogging is My Life I Tutorial Blog I Tips dan Trik Blog I SEO I Free Template mengatakan...

Siipz, makasih sobat. Biasanya aku pake daftar isi otomatis yg enggak pake JS.

putrahosting.com dapur hosting hemat mengatakan...

mampir perdana kang

wawan indrawan madda mengatakan...

terimah kasih atas infonya! akhirnya jadi juga daftar isi blogku

putrahosting.com dapur hosting hemat mengatakan...

blognya keren banget

hosting murah indonesia indositehost.com mengatakan...

triknya oke banget

nazwa mengatakan...

Wah manteb coi,ini yg di cari para blogger.moga sukses.tks

Jek mengatakan...

Terimakasih Bos ...widget anda sangat bermanfaat jadi tambah keren blog saya sekali lagi terima kasih

Blogger Indo mengatakan...

terimakasih atas sharenya...

rindy mengatakan...

Mantap nih, ini yang saya cari.
thanks bro..

Bagus mengatakan...

kok loadingnya lama gan??? -_-"

Download Ebook Gratis | cara-blog | kumpulan bisnis online mengatakan...

mantab dan bagus banget nich blognya, kunjungan balik ya bro di download ebook gratis =p

karla mengatakan...

wah keren nih bos.... numpang nyoba boz... :-)

al-anwariyah mengatakan...

Salam hangat...
terima kasih infonya,,,,?

hadissoft mengatakan...

Makasih banget tipz'a ya.
salam kenal sobat

auraman mengatakan...

Makasih mas, dapat tutorial baru, ane langsung kopas deh, belum sempat di edit,.. ane taruh di blog ya tutorialnya :
http://auraman88.blogspot.com/p/tutorial.html
salam kenal ya mas...
Auraman

Administrator mengatakan...

thanks a lot atas ilmunya,...
jazakallah,..

STMIK AMIKOM menuju Research University mengatakan...

udah ane praktekin bro ! thanks ...

Dan's Blog mengatakan...

wah. .
thanks nih. .
akhirnya ga perlu pasang satu-satu lagi. .

story song mengatakan...

terima kasih bro,dari sini saya dapat pengetahuan dan sekaligus pasang diblog saya. Oh..ya,407 itu nomor urut saya sebagai follower di blog ini an. Indonesian song

adit mengatakan...

Terima kasih gan

Ini blog ane
http://aditya-alif.blogspot.com/
Maklum masih newbie, jadi blognya masih jelek

Download Film and Subtitle mengatakan...

Kok g' ada hasilnya ya bang...
gimana dong aku udah ngikutin semua instruksinya....
yg muncul malah cuma kata "loading...."

Muhammad Afif al-Manjuniyy mengatakan...

Semoga Allah Memberi rahmat kepada kita...

shanty.rof mengatakan...

Saya pake code yang diberikan dan saya letakkan di new posting sesuai anjurannya, tapi kok gak bisa ya. Saya jadi bingung dan penasaran ..... ya maklumlah baru belajar alias gaptek ..... trus untuk meletakkan code di antara edit HTML itu kok sulit mencarinya. Kan banyak sekali code2 di situ. Dan aku sering keliru ...... Ada nggak untuk mencari secara otomatis code di edit HTML? ..... thank's you are my good teacher and Godbless u.

Nikmaya John mengatakan...

sangat bermanfaat brow

MARINDAJAYA mengatakan...

WAh..sharing yang bagus sobat,kebetulan saya susah membuat sitemap,jadi mendingan saya mau coba pake cara sobat ini.terimakasih

zer mengatakan...

terimakasih sobat .... tapi kok ada link nya ya?? :D

Irvan Syaidussalam mengatakan...

izin republish ya boss

daisugi mengatakan...

makasi buat infonya, dah berhasil di pasang nih.
salam kenal ya :-)

Steve mengatakan...

wah mantab nih tipsnya membuat daftar isi... thanks yaa

Free Download Game Full Version mengatakan...

Bagus banget sob,,, sya udah coba n hasilnya keren ... :)
visit http://4share4.blogspot.com

sismawan mengatakan...

Ship... I like it.... thanks ya sob...

Asmara Susanto mengatakan...

buat d posting yah, wah asekkk langsung k TKP dah

whiplash mengatakan...

good job!!..you made an awesome post

ega expert computer mengatakan...

trik mantap bos .....
o..ya aku pengen
bikin menu di blog aku tapi aku gak tau cara ngisi menu - menu nya ..
mohon pencerahannya ya kaq

Job Vacancy mengatakan...

Terimakasih infonya gan , saya coba di blog saya.

halimah mengatakan...

mantap infonya gan.
boleh dicoba neh ^_^

ZER blog mengatakan...

Udah saya pasang sob... mantab.. ^_^

RIZKY SAVALAS mengatakan...

ini info yang ane lagi cari, mantaaapp!!!!!
mampir keblog ane sob, kayanya ane perlu banyak saran dari n'te nih, maklum ane newbie....
http://www.rizkysavalas.blogspot.com

Dwijayasblog mengatakan...

Ok, juga infonya. Cuma kalo mesti ganti tanggalnya jadi beberapa hari yang lalu, sebulan yang lalu, atau setahun yang lalu, berarti cuma sekali pake, ya? Kalo mo index, mesti setting ulang lagi? BTW, good job.

heri mengatakan...

bos,keren abis dah,daftar isinya tetapi ada tulisan widget by info blog ,pada bawah kanan,wah bos juga ambil keuntungan nih kalau banyak yang posting nama blognya jadi tambah keren top markotop daah.tapi tidak apa saya juga numpang dikit ah nih blog saya
http://combro-atom.blogspot.com
coba saya kunjungi blogku,dijamin tidak akan jadi meledak komputernya.

Wikarso mengatakan...

Terima kasih infonya. Sangat bermafaat.

Lagu Karo Tanah Karo mengatakan...

Salam kenal gan...makasih informasinya

MasAde mengatakan...

keren bro,,thanks infonya

jangan lupa visit http://masdeitha.blogspot.com

Ahmad Desrayen mengatakan...

makasih bang, berguna banget bauat navigasi :)

maen sini bang ye :)

http://onepiece-ever.blogspot.com/p/konten-blog

Andito Anas mengatakan...

Mantap.... :)
mampir kawan www.anazisme.blogspot.com

Ardianta Sisgo mengatakan...

ThanQ

Eli Priyatna mengatakan...

ini akan makan waktu lama apa lagi kalau jumlah postnya banyak sudaj diatas 1000, coba deh kunjungi basistik.blogspot.com bagaimana membuat tanpilan daftar isi blogger yang popup atau pemenggalan daftar isi atau daftar isi semua label dan post menggunakan navigasi halaman tidak lemot dan scripsnya tidak ruwet

Blogger proo indonesia mengatakan...

mantab, sudah di terapkan

Blogger proo indonesia mengatakan...

mantab, sudah di terapkan

Blogger proo indonesia mengatakan...

mantab, sudah di terapkan

Solehudin mengatakan...

Huhui... blog ane jadi punya daftar isi nya. Makasih banget Gan... dulu nyari-nyari nggak ketemu, sekarang lagi nggak nyari eh malah nyasar di blog ini.

bower mengatakan...

Amazing sobat!. sangat membantu

reggae saidiyyah mengatakan...

thanks gan atas infonya.,,

assaidiyyah2.blogspot.com

AyuNaGMaMa mengatakan...

makasi tAs info'x Ea mAs
ini sngat bermanfa'at buat saya

Yusuf mengatakan...

MANTAP DAN KEREN BROO TIPSNYA

suntoro andria prasetya mengatakan...

keren...
http://basecinema.net

Kang Anwari mengatakan...

hem kang ko loading doang yach yang muncul?? gi mana nich, saya butuh bantuan boleh..
http://catatankakanwari.blogspot.com/

Supercoolzz mengatakan...

waw keren nih mas..:)

Supercoolzz | Blog Berbagi Informasi mengatakan...

nice

Car accident attorney Austin mengatakan...

Hi, i think that i saw you visited my web site thus i came to “return the favor”.I’m trying to find things to improve my website!I suppose its ok to use a few of your ideas!!

Mulia Games mengatakan...

maksudnya gimana ya
kok kodenya cuma dikit

cara dapat uang dari youtube mengatakan...

makasih gan infonya bermanfaat..
salam mas brow

darmawan mengatakan...

Kalp hanya satu label saja gmana?

Pengobatan Hepatitis B mengatakan...

di tunggu follow nya gan

Poskan Komentar

Silakan berkomentar di bawah ini. You comment, I follow.
Tapi komentar yang bernada spam akan saya hapus. Terima kasih :D

Cheat di Blog

Rainbow Text

Buku Tamu versi 2


ShoutMix chat widget
Widget by Info Blog

Headline News

Buku Tamu


ShoutMix chat widget

Mau punya buku tamu seperti ini?
Klik di sini (Info Blog)

Tautan Link Otomatis

Gamba di Pojok