Bagi blog yang sudah memiliki banyak tulisan dengan kategori yang bebeda-beda, menambahkan TagCloud dan Blog Archieve saja tidaklah cukup. Karena itu perlu adanya penambahan site map (peta situs), yang dalam hal ini adalah daftar isi (table of content), dimana dengan daftar isi ini setiap pengunjung dapat melihat keseluruhan artikel yang terdapat di dalam blog tersebut melalui judul-judul artikel yang ditayangkan.
Ada beberapa bentuk daftar isi (table of content) yang biasa digunakan para blogger, mulai yang disimpan pada halaman artikel, widget sidebar, sampai yang dibuat sebagai halaman blog. Nah, kali ini saya akan coba membahas tentang table of content yang ditempatkan pada halaman artikel.
Pada tulisan pertama ini akan dibahas mengenai daftar isi (table of content) yang dibuat oleh Abu Farhan, salah seorang Master Blogger kita yang sudah sangat terkenal hingga manca negara. Ada dua jenis yang ia buat: Pertama, daftar isi yang diurutkan berdasarkan kategori atau label, dan kedua, diurutkan berdasarkan tanggal posting.
Sekarang tinggal kamu pilih salah satu dari kedua model daftar isi itu. Atau jika mau kedua-duanya juga boleh, hanya harus dibuat dua halaman berbeda. Setelah itu buatlah link ke daftar isi ini. Link ini bisa kamu tempatkan pada navbar menu atau pada sidebar blog kamu (lebih jelasnya tentang link, silahkan baca artikel ini).
Link-nya misalnya seperti ini (jika memilih entri baru):
Jika tulisan-tulisan kamu sudah banyak sehingga jika dilihat daftarnya akan sangat panjang, maka buatlah scroll untuk daftar isi ini, seperti daftar isi pada blog ini. Caranya kamu tinggal menambahkan perintah overflow.
Ok coy, selamat mencoba....
Ada beberapa bentuk daftar isi (table of content) yang biasa digunakan para blogger, mulai yang disimpan pada halaman artikel, widget sidebar, sampai yang dibuat sebagai halaman blog. Nah, kali ini saya akan coba membahas tentang table of content yang ditempatkan pada halaman artikel.
Pada tulisan pertama ini akan dibahas mengenai daftar isi (table of content) yang dibuat oleh Abu Farhan, salah seorang Master Blogger kita yang sudah sangat terkenal hingga manca negara. Ada dua jenis yang ia buat: Pertama, daftar isi yang diurutkan berdasarkan kategori atau label, dan kedua, diurutkan berdasarkan tanggal posting.
Daftar Isi Berdasarkan Label
Contoh daftar isi ini bisa kamu lihat di blog ini. Dan cara membuatnya:
- Seperti biasa, login ke Blogger.
- Kemudian buat sebuah Entri Baru atau Laman Baru dan pilih Edit HTML.
- Berilah judul, misalnya: Daftar Isi Berdasarkan Label.
- Jika memilih Entri Baru, klik pada Opsi Entri dan setting supaya dipublikasikan mundur (ke tanggal pertama kali kamu posting).
- Kopikan script berikut (gunakan Control C) dan ganti NamaBlog sesuai nama Blog kamu:
<script style="text/javascript" src="https://sites.google.com/site/ruangsc/enes/blogtoc-v1.js"></script> <script src="http://NamaBlog.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script>- atau kamu bisa gunakan source script aslinya dari Abu Farhan, dengan mengganti alamat berwarna biru dengan alamat ini:
http://www.abu-farhan.com/script/daftarisiblogger/blogtoc-min.js - Setelah di-paste, klik Terbitkan Entri dan ucapkan Alhamdulillah...
Daftar Isi Berdasarkan Tanggal
Contoh daftar isi ini bisa kamu lihat di blog ini. Dan cara membuatnya:
- Langkah ke-1 sampai dengan ke-4 sama dengan di atas.
- Kopikan script berikut dan ganti NamaBlog sesuai nama Blog kamu:
<script style="text/javascript" src="https://sites.google.com/site/ruangsc/enes/blogtoc-v2.js"></script> <script src="http://NamaBlog.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script>- atau kamu bisa gunakan source script aslinya dari Abu Farhan, dengan mengganti alamat berwarna biru dengan alamat ini:
http://abu-farhan.com/script/daftarisibloggerarchive/tocbyarchivemin.js - Setelah di-paste, klik Terbitkan Entri dan ucapkan Alhamdulillah...
Sekarang tinggal kamu pilih salah satu dari kedua model daftar isi itu. Atau jika mau kedua-duanya juga boleh, hanya harus dibuat dua halaman berbeda. Setelah itu buatlah link ke daftar isi ini. Link ini bisa kamu tempatkan pada navbar menu atau pada sidebar blog kamu (lebih jelasnya tentang link, silahkan baca artikel ini).
Link-nya misalnya seperti ini (jika memilih entri baru):
<a href="http://NamaBlog.blogspot.com/2009/03/daftar-isi-berdasarkan-label.html">Daftar Isi</a>atau seperti ini (jika memilih laman baru):
<a href="http://NamaBlog.blogspot.com/p/daftar-isi-berdasarkan-label.html">Daftar Isi</a>
Jika tulisan-tulisan kamu sudah banyak sehingga jika dilihat daftarnya akan sangat panjang, maka buatlah scroll untuk daftar isi ini, seperti daftar isi pada blog ini. Caranya kamu tinggal menambahkan perintah overflow.
Ok coy, selamat mencoba....
35 komentarPosting Komentar
Coba dulu ahhh... makasih untuk tutorialnya sob...
salam sahabat
wah bagus saya juga dah pernah praktek good luck ya
Tutorialnya mantap! bila ada waktu kucoba! Trim's!
Wah info menarik nih kang, mau dicoba ah, semoga berhasil.Makasih ya kang infonya.
nice sharing ...
Dicoba akh...
Thanks
Kang, teman-teman saya yang juga newbie minta bantuan. Mereka baru saja ganti template tapi postingan mereka tidak bisa merapikan tampilan foto di artikelnya. Alamatnya di http://gramudia-gramudia.blogspot.com/ Terimakasih bantuannya, kang. Selamat berakhir pekan.
@Rep Semua:
Makasih ya... komennya...
@Rep Ivan:
Untuk mengatasi masalah foto, coba beri perintah float:left untuk fotonya. Jadi spt ini:
<img style="float: left; margin: 0 10px 10px 0; width: 150px; height: 200px;" src="URL Foto" border="0"/> (untuk foto potrait)
<img style="float: left; margin: 0 10px 10px 0; width: 200px; height: 150px;" src="URL Foto" border="0"/> (untuk foto landscape)
Ukuran lebar dan tinggi bisa diatur.
Untuk lebih jelasnya bisa dibaca artikel ini
Selamat mencoba sob....
kalau ada daftar isi pasti kelihatan lebih rapi ya kang tapi saya takut berat blognya eh iya sementara nyoba nih kang sarannya
dan berhasil udah normal tuh kang kasep euy blog urang
makasih banyak kang...
Sudah banyak artikel yang sempat saya bookmark disini.
makasi masukannya Mas!!!
lgsg d save
salam kenal dr blogger newbie!!
Siip mas.. saya coba pelajari nih..
Mas uda tak pasang Banner ny!! suatu kehormatan besar bisa masang link blog nya kang enes!!
tanpa berharap link blog q dipasang balik..
tp klo kang Enes pasang y rejeki sih hehe
ampun diriku gaptek bos
yupzzz...akan saya coba...sangat bermanfaat
hmm.. setusu bos.. daftar isi memang penting, apalagi bwt blog.. kren postinganny nih.. ^^
Saya sudah pake daftar isi, tapi ngga sebagus ini...
@Rep Lina:
Makanya mbak pake yang ini. Saya juga suka dengan daftar isi ini makanya dipake di Sastra Culun
wah ga ngerti mauksd nya apaan kk
Salam kenal Kang Enes
Ada yang mau tanyakan.
Bisa apa gak label atau kategori bila diklik isinya urut secara abjad, kalau bisa bagaimana caranya?
Balas ke email saya ya kang, email saya ad1_t@ymail.com
Terima kasih dan sukses selalu
dari blogger newbie
Blog Music Indo
Pertanyaan yg sama, dengan ADMIN....
@Rep Dieck:
Wah, susah juga ngejelasinnya sob, hehehe...
@Rep Admin dan Ramdhan:
Kalo dari scrip Abu Farhan ini gak bisa sob. Tapi coba sobat pake script Daftar Isi bagian II. Kalo Daftar Isi bagian II itu bisa sob....
ocreh la ke di coba...
sekarang mah no nanya dulu... tab dafis posting na sidebar luhur pake script nu label? atawa nu mana yh???
keren banget nih...
makasih tutorialnya.
Makasih infonya sobat.. n gimana kalau kita pada ngelink
thx boz, kunjungi juga ya fisiobegin.blogspot.com
mangstab gan
thanks kang enes
Alhamdulillah ya ALLAH.
mas koq gak bisa klik kanan?
aku mau buka halaman di tab baru kagak bisa.
mau non aktifkan anti-klik kanan ,,,, males ahh.
@Bricked:
Caranya kan sudah dikasih tahu di artikel Cara open link in new tab
Ari bade weee....
saya sudah copy link sobat... kunjungan balik y ke blog Q di thecakoda-coda.blogspot.com
aduh sorry bin maaf lur karak nongol di comment :D
kamana wae yh, kr k kutub nya... sing sehat we lah
daftar isi in my diary zone keren oge unk, karak di pasang tuh...
hatur tenkiyuuu ah
akhirnya bisa juga.. thanks sob :))
mantap......kunjungi blog saya juga ya, http://ponda-samarkand.blogspot.com
Tambahkan Komentar
Terimakasih atas semua apresiasi yang sobat berikan.