Ada beberapa macam cara untuk membuat daftar isi atau Table Of Content (TOC) yaitu ada yang disimpan di sidebar atau dipostingan, ada yang berdasarkan label atau tanggal posting dll.. Dan sekarang saya akan posting tentang Cara Membuat Daftar Isi Sesuai Label atau Category.
Membuat daftar isi di blog tentu sangat dibutuhkan untuk memudahkan pengunjung mencari artikel/materi yang dibutuhkan, tentu ini sebagai salah satu bentuk pelayanan prima bagi pengunjung, apalagi jika artikelnya sudah banyak.
Nah kali ini saya akan posting sekalian menjawab sobat yang bertanya tentang bagaimana Cara Membuat Daftar Isi Berdasarkan Label atau Kategori yang disimpan pada halaman posting seperti contoh Daftar Isi pada blog ini.
Cara membuat Daftar Isi ini saya dapatkan dari blognya http://jayce-o.blogspot.com dan sudah saya edit sendiri, langkah-langkahnya seperti ini :
- Login dulu ke http://www.blogger.com/
- Kemudian buat sebuah Entri Baru dan pilih Edit HTML. atau kalau biasa pake Windows Live Writer (WLW) gunakan modus Source atau Sumber.
- Berilah judul, misalnya: Daftar Isi Berdasarkan Label.
- Copy Paste script dibawah ini dan ganti nama saungweb.blogspot.com dengan nama Blog anda :
<script style="text/javascript" src="http://saungweb.googlecode.com/files/TOCcategory.js"> </script>
<script src="http://saungweb.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script>
- Setelah di-paste, klik Terbitkan Entri atau publish dan lihat hasilnya
- Kalau artikelnya sudah banyak bisa ditambah fungsi scrol yang di pasang sebelum code no. 4 , sehingga lengkapnya akan seperti ini : (Kode warna pink silahkan sesuaikan, kalaupun mau dihapus juga silahkan) :
<div style="overflow:auto; border: 1px solid #CCC; margin: auto; padding: 3px; width: 95%; height: 400px; background-color: none; text-align: left;">
<p align="center">
<font size="4">Daftar Isi Blog Berdasarkan Label / Category</font></p>
<script style="text/javascript" src="http://saungweb.googlecode.com/files/TOCcategory.js"></script>
<script src="http://saungweb.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script>
<p>
Untuk melihat <a href="http://saungweb.blogspot.com/2010/04/daftar-isi-berdasarkan-tanggal-posting.html" target="_blank">Daftar Isi Berdasarkan Tanggal Posting</a> silahkan di klik aja sob.</p>
</div> - Langkah selanjutnya tinggal buat link yg menuju ke postingan ini dan bisa disimpan di navbar menu atau di sidebar dll, contoh :
<a href='http://saungweb.blogspot.com/2010/04/daftar-isi.html' target='_blank'>Daftar Isi Berdasarkan Label </a>
dan :
<a href='http://saungweb.blogspot.com/2010/04/daftar-isi-berdasarkan-tanggal-posting.html' target='_blank'>Daftar Isi Berdasarkan Tanggal Posting</a>
Oh ya dulu pernah juga posting Cara Membuat daftar isi yang disimpan disidebar namun gak dipakai lagi. karena sekarang pakai Daftar Isi Sesuai Label dan Tanggal Posting.
Selamat mencoba semoga berhasil ohya.. jangan kaget kalau saat loading pertama daftar isinya agak lama ya.. dan untuk daftar isi berdasarkan tanggal posting tunggu postingan selanjutnya yaaaa…..
wah iya neh buwel juga pake.. he
ReplyDeletesip as tutorialnya, sudah pernah di coba neh. thanks..
ReplyDeletesep, mantap nih tutorialnya,thx udah share..
ReplyDeletethx mas infonya, udah kubikin daftar isinya tapi ku taroh di side bar...
ReplyDeletedibagian bawahnya ada tulisan dan link by saung web heheh...
Mantab tipsnya. Emang kalau soal kode2an gini saya kurang paham
ReplyDeleteAku copy dulu kodenya sob...
ReplyDeleteCoba juga nih di blog ku ah..
ReplyDeleteA sobat2 : thanks atas kunjungannya ya
ReplyDeleteSaya pingin nyoba juga untuk di blog saya nih
ReplyDeletewah makasih yaw sob
ReplyDeletesaya juga menggunakan daftar isi sperti ini
:D
makasih tutorialnya.
ReplyDeletetutorial yg sangat bermanfaat.
ReplyDeletemakasih sudah berbagi.
makasih yaw
ReplyDeleteaku juga mengunakan daftar isi
:D
mantep sob, thx sharenya...
ReplyDeletewah, bagus tulisannya mas, thx udah share..
ReplyDeletemakasih banget sobat infonya...
ReplyDeletesip tutorialnya Mas, lanjutkan....
ReplyDeleteMantab selalu dan selalu mantab
ReplyDeletebagus juga nih kawan, udah lama saya kepengen buat yang ginian hanya masih belum sempat saja, soalnya masih fokus untuk desain theme blog saya agar lebih menarik.
ReplyDeletesaya pake WP
ReplyDeletetidak berarti ga memerlukan ini
makasih ilmunya Pak
:)
lama ga kesini...apa khabar?
thanks ya infonya...saya blogger pemula mesti banyak belajar
ReplyDeletexixixi.... daptar isi punya saya biasa aja tanpa berdasarkan label
ReplyDeletelama bener ya nggak kesini pas kesinni dapat tutorial mantap pak
ReplyDeleteMantab Nih Postingan dan Tutorialnya. Keep Spirit and Smile
ReplyDeletecode nya panjang gitu ya, itu khusus buat blogger ya? kalo buat yang lain gmn ya caranya
ReplyDeleteNambah ilmu baru nih, sob. Hatur nuhun :)
ReplyDeletefreshh info.
ReplyDeletethanks.
silahkan kunjungi :
http://tipsbarudipercaya.blogspot.com/
kunjungan kang, OK deh triknya
ReplyDeletewach.. rekomended blog banget ini.. , mau cari artikel apa aja lengkap SERP, SEO , bahkan ngeblog jadi gampang kalo ngikutin artikel-artikel akang yang satu ini oi... thanku
ReplyDeleteijin nyoba y pak...
ReplyDeletetrims dah berbagi...
sip. izin nyimak plus praktekin,hehe
ReplyDeletekdrama
laptop computers reviews
healthy tips
cellular mobile phones
japanese music chord
free comic download
mantap tutorialnya kang,
ReplyDeletesalam.
Bisa di aplikasikan di wordpress bos ?
ReplyDeletesiiip mangstab tipsnya.. dtggu nih postingan selanjutnya :)
ReplyDeleteMas, udah tak review balik . . .thanks Y Mas . . . . . kapan2 maen ke blogku lagi . . .
ReplyDeletemantep neeh infonya bang saung, terima kasih bang saung tlah mau berkunjung ke blog buluk saya Vista 84 terima kasih bang :-D
ReplyDeletemakasi tlah datang ke blogku bos..
ReplyDeletemantap postingannya mas.
ReplyDeletesugad postingannya bos! bravo....
ReplyDeletemantap nian tutorialnya pak , siapa tahu ada yang tertarik lihat keseluruhan isi blog kita
ReplyDeletebagus daftar isinya pak
ReplyDeletekeren sob..nanti ku coba deh..
ReplyDeletesalam
Seperti biasa, keren kang tipsnya..wilujeng wengi..
ReplyDeletejalan-jalan lagi kang sudah lama tidak mampir. bagus artikelnya.
ReplyDeletegood info kawan, say hello utk sahabat blogger cause lama gak OL, salam blogger
ReplyDeleteok mas saung terima kasih atas infonya
ReplyDeletemanteb om!
ReplyDeletesalam kenal makasih bacaan nya
ReplyDeletewah, informasi menarik nih, dicoba ha
ReplyDelete@ sobat2 : thanks atas kunjungannya
ReplyDeleteThanks infonya Mas..langsung aku coba ya..oh ya kalo diletakkan di sidebar bisa ndak ya...
ReplyDeletelink mas udah aku pasang di blogku..link balik ya..
sip banget artikelnya. Mohon izin artikel ini dikopi-paste, dalam rangka uji coba, untuk sementara, karena belum punya bahan posting.
ReplyDeleteGood HAck Sob... coz punyanya Abu Farhan Javascriptnya di Packer... Hohoho...
ReplyDeleteLIHAT DISINI
Wah,, ku cari2 ternyata ada di blog temanku sendiri,, hebat,,!!
ReplyDeleteku belum nyoba neh... ehehe
Narutopedia Express is exclusive encyclopedia about everything in naruto anime like character biographies, jutsu, hidden village, handseal, jinchuriki, akatsuki, and other skills
ReplyDeleteNarutopedia Express is exclusive encyclopedia about everything in naruto anime like character biographies, jutsu, hidden village, handseal, jinchuriki, akatsuki, and other skills
ReplyDeleteNarutopedia Express is exclusive encyclopedia about everything in naruto anime like character biographies, jutsu, hidden village, handseal, jinchuriki, akatsuki, and other skills
ReplyDeleteNarutopedia Express is exclusive encyclopedia about everything in naruto anime like character biographies, jutsu, hidden village, handseal, jinchuriki, akatsuki, and other skills
ReplyDeleteNarutopedia Express is exclusive encyclopedia about everything in naruto anime like character biographies, jutsu, hidden village, handseal, jinchuriki, akatsuki, and other skills
ReplyDeleteJangan lupa nonton bareng World Cup di
ReplyDeletehttp://pialadunia.islcorner.co.cc/
ijin mau save as gan, buat dicoba2 ...
ReplyDeletesudah terpasang kang, makasih tutorialnya..
ReplyDeleteKang soal Doffolow Blog Comuunity, he he saya sudah pasang Link Tea nya lho, hiks kog belum terpsang juga link saya ya....
mantabss gan... berhail nihh.. hehehe..
ReplyDeleteSalam terima kasih Tipsnya mas
ReplyDeleteLagi2 dapat tutor baru.
ReplyDeleteTengkyu gan.
Suwun
mrip kayak punya kang rohman nih..
ReplyDeletemantab gan, langsung saya coba...
ReplyDeletebtw samlam kenal ayhh..
heheh.. kunjugn balik sob! :)
sya nyari daftar isi sesuai label, ga taunya nyempil di dieu.... heheh
ReplyDeletenuhun kang... langsung pasang
Thanks ya mas atas tipsnya, Saya sudah mencoba dan berhasil, mampir ya ke blog ku yang masih aneh: http://www.this-4-all.blogspot.com
ReplyDeletesekalian ijin tukar link ya n' bantu aku juga dung cara meramaikan blog cz aku baru n' msh gaptek.
Thanks
saya mau tanya kalau buat Label horizontal di daerah footer gimana ya caranya.. mohon bantuannya... soal-nya saya Newbie.. :"> terimakasih sebelumnya..:)
ReplyDeletetampilkan......emang kudu pake..hihihikhikhikhik
ReplyDeleteDah lama kucari cari TT makasih banyak yaaah.
ReplyDeletesaya sdh pernah buat daftar isi, tapi knp loading blog saya jadi berat sekali ya, Mas? mohon petunjuknya. thanks a lot!
ReplyDeletedicoba mas.. trims ya
ReplyDeletethanks yah ...
ReplyDeletethx infonya brow... udah berhasil..
ReplyDeletesangat membantu sekali^^b
@ Ridwan : emang sob.. loadingnya jadi agak lama kalau mau di tampilkan
ReplyDelete@ Freshmind Pram : Selamat ya..
sae pisan tipsna,...
ReplyDeletemo tanya ni bos, itu kan menyangkut semua label yg ada di blog kita!
bisa nggak, jika label yang dipilih oleh kita saja :D misalnya dari 100 label yg ada di blog saya, hanya dipilih 20 saja... :D thx
ditunggu jawabannya di: tohircicomre.blogspot.com
tengkiyu kang
ReplyDelete@ tohir cicomre : kayaknya gak bisa tuh sob.. mesti tampil semuanya.. makanya loadnya agak berat.. tapi coba aja tps yg ini :
ReplyDeletehttp://kolom-tutorial.blogspot.com/2010/11/batasi-label-yang-tampil-di-blogger.html
Alhamdulillah
ReplyDeleteBERHASIL
Dengan DAFTAR ISI blog HUKUM KEHUTANAN
tampiil sedikit lebih terlihat profesional
TERIMAKASIH
Makasih Ni Tips Trik nya
ReplyDeleteBoleh Di Liat Hasil Jadinya Di Blogku
Best Free Autosurf Traffic Exchanges : Automatic Real Visitor to Your Blog, Increase Your PageRank Now !!!
Makasih Ni Tips Trik nya
ReplyDeleteBoleh Di Liat Hasil Jadinya Di Blogku
Best Free Autosurf Traffic Exchanges : Automatic Real Visitor to Your Blog, Increase Your PageRank Now !!!
@m.hariyanto:
ReplyDeleteSam2 bos.. saya mluncur ke tkp ya
@Nurul Imam:
ReplyDeleteOk sob saya lihat hasilnya ya.... meluncur...
bingung mw pilih cara yg mna??
ReplyDeletelayanan prima?? udah kyk kntor pos aja kang wkwkwkw
ReplyDeletelayanan nya ckup membntu kang, mksih..
ReplyDeleteyap, qt langsung praktek aja ahh..
ReplyDeletesaya blm prnh gunain, WLW.. katanya bisa yah update posting lwat sono..
ReplyDeletekomen :
ReplyDeletead conthnya ga gan, masih rada bingung
Signature :
Describe Form Hymen and Tutorial Modding Sony ericsson|Free Download Female Wallpeper Artist|Some Trips and Trick about Blog|Download Full Video Anime|Tutorial Computer|All About Hikaru no Go|The adventure of Uzumaki|Tutorial Plus
komen :
ReplyDeletegan, gamana buat tag cloude
Signature :
Describe Form Hymen and Tutorial Modding Sony ericsson|Free Download Female Wallpeper Artist|Some Trips and Trick about Blog|Download Full Video Anime|Tutorial Computer|All About Hikaru no Go|The adventure of Uzumaki|Tutorial Plus
komen :
ReplyDeletegw dah kliling2 nyari yag melayang, tapi tiap d coba, malah ga work d blog gw
Signature :
Describe Form Hymen and Tutorial Modding Sony ericsson|Free Download Female Wallpeper Artist|Some Trips and Trick about Blog|Download Full Video Anime|Tutorial Computer|All About Hikaru no Go|The adventure of Uzumaki|Tutorial Plus
ini bisa digunakan untuk wordpress ya, walaupun sudah lama ngeblog tapi kalau ketemu yang beginian masih bingung juga
ReplyDeletekomen :
ReplyDeleteagak sdikit membingungkan... tapi nias inpo lah
Signature :
Describe Form Hymen and Tutorial Modding Sony ericsson|Free Download Female Wallpeper Artist|Some Trips and Trick about Blog|Download Full Video Anime|Tutorial Computer|All About Hikaru no Go|The adventure of Uzumaki|Tutorial Plus
saya baru blajar bikin web ... yg alamat nya
ReplyDeletehttp://art-xp.blogspot.com
mohon bantuannya
kalo suka dengan artikel-artikel saya
saya harap bisa menjadi follower...
Keren nih tipsnya,,,
ReplyDeleteMakasih sob tipsx! kalau buat kotak komentar facebook and twitter gmna ya? mungkin bisa dibuat artikel baru buat fcebook and tweetx! thx
ReplyDeleteFree Anime Blogger Template|Blogger Skin|Blogger Themes|Layout For Blogspot
ReplyDeleteFree Download Blogger Template|Free Download Template Blogger|Template For Blogspot
ReplyDeleteFree Blogger Skin|Blogger Template|Template Blogger|Anime Blogger Template
ReplyDeleteFree Blogspot Themes|Template XML|Layout For Blogspot|Blogger Layout
ReplyDeleteFree Blogspot Layout|Layout Blogspot Free|Template XML Blogspot|Blogger XML Theme
ReplyDeleteLayout Blogspot Free|Template XML Blogspot|Free Blogspot Layout|Blogger XML Theme
ReplyDeleteFree Blog Template|Template Blogger|Layout Blogspot|Blogspot Layout
ReplyDeleteLayout Blogspot Free|Template XML Blogspot|Free Blogspot Layout|Blogger XML Theme
ReplyDeleteTemplate XML Blogspot|Free Blogspot Layout|Blogger XML Theme|Layout Blogspot Free
ReplyDeleteDownload Template Blogger|Blogspot Themes|Template XML|Layout For Blogspot
ReplyDeleteizin coba ya..?
ReplyDeletethank's dah sy coba..hasilya bagus
ReplyDeletewww.james-berbagifile.blogspot.com
makasih banger buat informasinya
ReplyDeletesaya mau coba dulu ya
hehehhe
Naruto 546|Naruto Manga 547|Naruto Shippuden Manga 548|Naruto 549 Manga|Naruto 550 Spoiler
ReplyDeleteNaruto 546|Naruto Manga 547|Naruto Shippuden Manga 548|Naruto 549 Manga|Naruto 550 Spoiler
ReplyDeleteNaruto 546|Naruto Manga 547|Naruto Shippuden Manga 548|Naruto 549 Manga|Naruto 550 Spoiler
ReplyDeletemakasih bnyak yahh atas infonya..
ReplyDeletea good post... :)
ReplyDeletethanks.....bangget,,,infoNa...^_^
ReplyDeleteMantap,,!!! Jempol Lah,,!!!
ReplyDeleteterima kasih buanyak panduanya :)
ReplyDeletebisa memudahkan pengunjung untuk mencari yang dicari :)
manteb nih, makasih
ReplyDeletehemmh,,saya baru buat blog nih gan,,masi cari2 referensi,,heheh,,kalo buat sub menu halaman seperti agan gimana? jadi ada halaman tapi ada anak-anak nya,,hehe,,saya belom tahu nama istilahnya,,maaf,
ReplyDeleteizin pakai kang....makasih
ReplyDeleteartikel bagus, ijin copas ya.
ReplyDeleteterima kasih
Hello thanks for share. I think this article is good like Krim A-dha Murah and then my website like Sewa Mobil Jakarta is the best too.. Now i want to share the website Pashmina Murah and then Jam Tangan when you can be share to another friends. And finally Tabita Skin Care is the best site.
ReplyDeleteciiip gan...makasih gan infonya..
ReplyDeleteTerima kasih, langsung dipraktekkan...
ReplyDeleteThanks for the tips gan :D
ReplyDeleteTerapi Ion Elektrik Rendam Kaki Detox
Peluang Usaha Rumahan
Terapi Ion
Manfaat Terapi Ion Elektrik
Terapi Ion Elektrik
Terapi Kesehatan Murah
mantap gan,langsung seperti yang saya inginkan..teriamaksih atas sharing ilmunya
ReplyDeleteterimakasih atas infonya master...
ReplyDeletesangat membantu sekali buat saya...
langsung ane praktekin dah...
happy blogwalking kawan..
by: Aan Shared
Aan Blog
Aan shared mobile blog
Aan-droid
Aan Musik Shared
visit me:
http://aan-shared.blogspot.com
mantappp...!!!
ReplyDeletewah tips2nya disini sangat membantu :D
ReplyDelete