Hanya arsip

halaman asli ada di http://kolom-tutorial.blogspot.com

Buat daftar isi blog

Apakah sobat suka membaca buku? jawaban sobat tentunya akan beragam, ada yang akan menjawab suka dan ada juga yang akan menjawab tidak suka. Namun saya yakin sobat pernah membaca sebuah buku. Dalam sebuah buku ada satu bagian yang dinamakan daftar isi, dengan adanya daftar isi buku maka akan mempermudah pembaca buku tersebut untuk menemukan bagian-bagian isi buku yang ingin di baca. Pertanyaan yang mungkin muncul adalah apa hubungannya antara buku dengan blog? tak hanya sebuah buku yang bisa memuat daftar isi untuk mempermudah para pembacanya, didalam sebuah blog pun kita bisa melakukannya, contoh yang bisa dilihat adalah saya memuat judul-judul artikel yang pernah saya posting di bagian footer halaman ini ataupun ketika sobat membuka keluruhan artikel yang mau di baca maka di akhir artikel akan muncul sederet judul-judul artikel lainnya yang menggoda sobat untuk membacanya. Selain untuk menggoda pengunjung agar lebih berlama-lama di blog kita, cara ini pun akan sangat mempermudah para pembaca untuk menemukan artikel yang di rasa menarik untuk di baca. Akan tetapi cara tersebut saya lakukan secara manual yakni saya mencatat seluruh alamat artikel yang telah saya posting kemudian membuatkan link ke artikel tersebut.

Teknik pembuatan daftar isi di atas bisa saja kita lakukan, akan tetapi tentunya perlu waktu yang lama untuk mebuatnya dan tentunya akan menyita waktu kita. Nah… yang ingin saya terangkan saat ini adalah bagaimana cara membuat sebuah Daftar isi blog secara otomatis. Yupppsss.. dengan hanya sekali kita membuatnya maka daftar isi tidak usah di buat berulang-ulang namun terus bekerja secara otomatis,
teknik ini di perkenalkan oleh hans yang di muat melalui blognya beautiful beta. Agar tidak bingung tentang daftar isi blog yang akan saya terangkan, silahkan alihkan perhatian sobat ke bagian sebelah kanan atas blog ini, di sana terdapat link brtuliskan Lihat Daftar Isi, jika sobat meng klik link tersebut maka secara otomatis akan di perlihatkan seluruh judul artikel yang pernah saya posting lengkap dengan tanggal serta kategori dari artikel tersebut. Sunguh menarik bukan? jika sobat ingin melihatnya sobat bisa mengkliknya dan jika sobat tidak ingin melihatnya sobat tinggal mengkliknya kembali dan daftar isi pun akan di sembunyikan sehingga tidak akan menggangu pemandangan. Tertarik untuk membuatnya? silahkan ikuti langkah-langkah berikut :

Langkah pertama :

  1. Sign in di blogger
  2. Klik menu Layout
  3. Klik menu Edit HTML
  4. Klik link Download full template, silahkan save untuk backup data
  5. Copy paste kode CSS berikut di atas kode ]]></b:skin>
  6. Klik tombol SIMPAN TEMPLATE

Langkah kedua :

  1. Klik menu Elemen Halaman
  2. Klik tulisan Tambah sebuah Elemen Halaman
  3. Klik tombol TAMBAHKAN KE BLOG di bawah tulisan JavaScript/HTML
  4. Copy paste kode berikut ke dalam elemen yang muncul
  5. Klik tombol Simpan
  6. Pindahkan elemen yang baru di buat tepat di atas elemen Post
  7. Klik tombol Simpan yang berada di sebelah atas
  8. Klik tulisan Tambah sebuah Elemen Halaman kembali
  9. Klik tombol TAMBAHKAN KE BLOG di bawah tulisan JavaScript/HTML
  10. Beri judul elemen tersebut dengan yang kata yang sobat ke hendaki. Contoh : DAFTAR ISI, kemudian copy paste kode berikut ke dalam kotak elemen
  11. Ganti tulisan YOURBLOG dengan nama blog sobat
  12. Klik tombol Simpan
  13. Pindahkan elemen yang baru di buat ke tempat yang sobat sukai (sebaiknya di simpan disebelah atas)
  14. Klik tombol SIMPAN yang berada di sebelah atas
  15. Selesai

Kode yang terakhir di pasang merupakan kode asli yang di buat oleh hans dan tentunya semua hasil dari kode tersebut berbahasa inggris, baik itu judul , alert dan segala macamnya adalah berbahasa inggris, jika sobat menginginkan jadi berbahasa indonesia, saya sudah memodifikasi javascrips nya sehingga akan menjadi berbahsa indonesia seperti milik saya. Cara yang harus di lakukan sangatlah mudah, sobat tinggal mengganti kode terakhir yang di pasang dengan kode di bawah ini :

Jangan lupa untuk mengganti tulisan YOURBLOG dengan nama blog sobat.

Selamat mencoba !

Eh… yang mau dapet menu navigasi buat di header yang cantik, kunjungi aja http://css-lybrary.blogspot.com

Iklan

3 September 2007 - Posted by | blog tutorial, daftar isi blog

44 Komentar »

  1. Terima kasih Mas Rohman,… Aku dah coba dan… great working!

    Komentar oleh Abu Afif | 3 September 2007 | Balas

  2. terimakasih pak guru.gue dah coba.ok juga tuh

    Komentar oleh sariaman | 5 September 2007 | Balas

  3. Udah aku coba, dan berhasil…berhasil…berhasil…
    Thank Suhu :-*

    Komentar oleh Nebulla | 7 September 2007 | Balas

  4. Baru baca langsung Coba.
    Hmmmmmmmmmmmmmmmmmmmmm……
    Thanks Bos,

    Komentar oleh naim muhammad | 6 Oktober 2007 | Balas

  5. bagaimana cara membuat urutan artikel seperti menu KATEGORI yang ada pada blog mas rohman

    bukhori el faiz

    Komentar oleh Buchory El Faiz | 11 Oktober 2007 | Balas

  6. mas rohman, saya dah coba tu buat daftar isi seperti yang mas rohman
    anjurkan, tapi tidak berjalan dengan semestinya, apa karena blog saya menggunakan blogger versi baru sementara blog mas rohman versi klasik, atau gimana????
    mohon penjelasannya kepada
    saya yang baru bergabung dengan blogger.com….
    thanks..

    Komentar oleh What Is Cityholic...??? | 7 November 2007 | Balas

  7. thanks..,, beress.. brooee

    Komentar oleh Zoel_GeBe | 15 November 2007 | Balas

  8. Tolong dong buat tips nya buat template klasik

    Komentar oleh home | 22 November 2007 | Balas

  9. Asyik banget mas rohman, berfungsi dengan apik

    Komentar oleh Ariyanto TJ | 27 November 2007 | Balas

  10. Emang bapak yang satu ini keren and jelas bangets kalo ngasih tahap2, thanks yah….
    http://nonebetawe.blogspot.com

    Komentar oleh Miss Paula | 5 Desember 2007 | Balas

  11. trim’s kang rohman saya udah coba..tapi koq tampilannya kurang bagus ya…belum seperti tabel.gimana caranya kang biar spt tabel dengan kotak2 nya..trima kasih

    Komentar oleh Indra Gunawan | 8 Desember 2007 | Balas

  12. nice article kang…, btw Desain Vertical Menu yg baru mana?

    Komentar oleh yuli | 14 Desember 2007 | Balas

  13. aulia..
    ma kasih…css menu transfaran t langsung jos…termasuk link2nya ga kuganti ..nanti kutambahkan saja dgn link2 yg favorit lain..
    Mohon izin ya pake…css-nya…dan menunya yg unik2…
    aku add sekalian tueran link yah.

    Komentar oleh Aulia | 16 Desember 2007 | Balas

  14. Terima kasih mas, daftar isi-nya sudah berhasil, kalo tampilannya seperti labels, kodenya gimana mas?

    Komentar oleh Karya Buruh | 24 Januari 2008 | Balas

  15. @Karya buruh : seperti label yang kaya gimana nih?

    Komentar oleh rohman | 24 Januari 2008 | Balas

  16. makasih bangat bang… e.. salah terima kasih banyak guru aku da suksessss

    Komentar oleh Sudarmawan batara | 29 Januari 2008 | Balas

  17. Mas Rohman mau tanya lagi nih. Saya sudah buat daftar isi dan berhasil. Tapi yang agak mengganggu adalah tampilan daftar isinya kok gak pas ditengah-tengah. Yang sebelah kiri ada spasinya sedikit sedangkan yang kanan terlalu mepet. Bisa gak dibuat pas ditengah-tengah. Coba mas lihat di blog saya. http://blacxx125.blogspot.com biar lebih jelas.

    Komentar oleh blacxx125 | 31 Januari 2008 | Balas

  18. Mas Rohman mau tanya lagi nih. Saya sudah buat daftar isi dan berhasil. Tapi yang agak mengganggu adalah tampilan daftar isinya kok gak pas ditengah-tengah. Yang sebelah kiri ada spasinya sedikit sedangkan yang kanan terlalu mepet. Bisa gak dibuat pas ditengah-tengah. Coba mas lihat di blog saya. http://blacxx125.blogspot.com biar lebih jelas.

    Komentar oleh blacxx125 | 31 Januari 2008 | Balas

  19. mas biar yang diurutkan itu dari tanggal postingan gimana? (baru ke lama)

    Komentar oleh Nugi | 3 Februari 2008 | Balas

  20. maaf nggak jadi ternyata caranya harus diklik tanggal post ya… he..he… maaf

    Komentar oleh Nugi | 3 Februari 2008 | Balas

  21. mas rohman aku mau nanyak, kan file daftarisi.js tak edit biar nanti tulisan sembunyikan daftar isi dan tampilkan daftar isi juga biar ada gambarnya, biar sama yang tulisan lihat daftar isi, tapi setelah aku edit dan tak upload ke googlepages dan aku coba hasilnya nggak keluar dan aku pindah ke geocities eh hasilnya juga nggak mau keluar itu gimana ya… biar daftar isinya mau keluar??? Tolong ya mas… aku tunggu jawabannya ya…

    Komentar oleh Nugi | 7 Februari 2008 | Balas

  22. mas rohman…gimana cara ngisinya daftar isinya mas…?? aku bingung nech

    Komentar oleh Kabancyber | 16 Februari 2008 | Balas

  23. @kabancyber : ga usah disi, itu otomatis. Setiap posting yang sudah ada akan langsung masuk di daftar isi.

    Komentar oleh Rohman | 16 Februari 2008 | Balas

  24. Mas, saya sudah coba dan mantap. akhirnya wong ndesso duwe blog apik tenan rek.

    matur nuwun sanget inggih

    Komentar oleh lisno | 3 Maret 2008 | Balas

  25. halo kang saya kurang ngerti nih hehehe maklum masih newbie πŸ™‚ kang link saya koq ga ada yah? tolong dipasang ya kang πŸ™‚

    Komentar oleh Suardiana | 11 Maret 2008 | Balas

  26. Kang gimana yah biar daftar isinya seperti punya kang rohman? lalu untuk menghilangkan tanggal itu gimana kang?

    Komentar oleh Admin | 19 Maret 2008 | Balas

  27. iya mas, ngak sama dengann punyamu mas… he he

    Komentar oleh Stevanus | 19 Maret 2008 | Balas

  28. Bagus sekali kang, dah aku coba.

    ada yang mo saya tanyakan, bagaimana supaya tetap tampil (daftar isi) pada halaman statis tanpa harus klik link yang kita buat.

    Komentar oleh Djarod | 12 Mei 2008 | Balas

  29. Kang,kalo buat Daftar isi persis punya kang gmn? yg langsung dbawah halaman posting n ada no urutan gt

    Komentar oleh Anonymous | 23 Mei 2008 | Balas

  30. makasi atas ilmunya

    Komentar oleh PW IRM Jawa Timur | 5 Juni 2008 | Balas

  31. Makasih Kang, udah tak coba & berhasil.

    Komentar oleh agus fikri | 13 Juni 2008 | Balas

  32. Beribu-ribu terima kasih saya haturkan…
    Anda begitu baik…
    Saya bingung harus melakukan apa dengan semua ini…
    Membaca artikel mas, menerapkannya, hasilnya saya takjub dengan blog saya sendiri…
    padahal ini baru hari ke dua saya bikin blog…
    gak nyangka ada blognya mas yang sangat membantu saya…
    sekali lagi terima kasih…

    Komentar oleh Syamsul Alam | 12 Juli 2008 | Balas

  33. ;))Tengkiu kang Rohman…
    Berhasil…!!
    Kang Rohman is the best deh πŸ˜€

    Komentar oleh Anne ^_^ | 15 Juli 2008 | Balas

  34. kang rohman, kok yang muncul diblog cuma kalimat “dafter isi” cara ngisinya gimana?

    Komentar oleh dhoa | 18 Juli 2008 | Balas

  35. kang numpang tanya,

    gimana caranya kalau nampilin daftar isinya ngelink dari tab menu kaya punya kang rohman?

    please bales ya kang, makasih sebelumnya…
    semoga blogna tambah laris manis..

    Komentar oleh kharis | 31 Juli 2008 | Balas

  36. lah mas q buka daftar menu itu malah tulisannya bhs inggris smua,,,wuh mumet q,,,uhh
    translate ndang mas wkwkwk

    Komentar oleh elank | 12 Agustus 2008 | Balas

  37. kang,gimana yah biar keliahatn bagus… seperti kategori? Nuhun kang

    Komentar oleh Nia | 20 Agustus 2008 | Balas

  38. kang makasih lagi ilmunya…tapi ada saran gak tuk ngilangin warna putih dibawah daftar isi tsb atau warnanya sama dengan warna template.trims.

    Komentar oleh fadli | 21 Agustus 2008 | Balas

  39. thanks aku sdh coba di http://www.zonetujuh.co.cc

    Komentar oleh ZONE TUJUH | 23 Agustus 2008 | Balas

  40. kang makasih ilmunya sangat bermanfaat sekali

    Komentar oleh my sharing | 2 September 2008 | Balas

  41. makasih ya bos….ga sia2 begadang nungguin sahur sambil baiki blog…
    blog saya sudah ada dftr isinya juga…
    o ya bos, bisa di ganti ga icon daftar isinya?
    thanks………..

    Komentar oleh tips jitu | 7 September 2008 | Balas

  42. makasih ya bos….ga sia2 begadang nungguin sahur sambil baiki blog…
    blog saya sudah ada dftr isinya juga…
    o ya bos, bisa di ganti ga icon daftar isinya?
    thanks………..

    Komentar oleh tips jitu | 7 September 2008 | Balas

  43. Duh Makasih Banyak Kang… Sumber Inspirasi Nih… Nih Buktinya saya punya yang barui Sini [Widget Daftar Isi]

    Komentar oleh Ade Sanusi | 8 September 2008 | Balas

  44. alooooooooooo
    mau nanya, kalau pake wordpress gimana ya caranya………buat daftar isi…………..
    atau cara buat link full satu halaman??? yang mana ketika di klik, gak kesulitan, alias gak ada bayangannya???

    Komentar oleh sunny2008 | 30 Oktober 2008 | Balas


Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: