Cara Membuat Daftar Isi di Blog dengan Java Script

Blog yang bagus tidak hanya memiliki penampilan yang mengesankan, tetapi juga memiliki navigasi yang baik sehingga pengunjung dapat menjelajahi blog dengan mudah. Salah satu komponen di dalam blog yang dapat membantu pengunjung untuk menjelajahi blog adalah Daftar Isi atau Table Of Content, daftar isi merupakan halaman yang berisi daftar artikel-artikel dib log kita dengan lengkap. Dulu saya pernah memberikan tutorial membuat daftar isi di blog, tapi dengan penampilan yang sangat sederhana. Sekarang saya akan memberikan tutorial cara membuat diblog dengan java script buatan http://modification-blog.blogspot.com/, yang memiliki penampilan yang elegan dan keren. Untuk contoh atau demonya anda bisa melihat gambar di bawah ini atau dengan membuka daftar isi blog forantum ini. Tunggu apalagi sobat.... Ayo kita membuatnya, cara membuatnya adalah sebagai berikut:

Daftar Isi Java Script

 LANGKAH 1
  • 1. Login ke blogger.
  • 2. Masuk ke Rancangan dan pilih Edit HTML
  • 3. Letakkan kode di bawah ini, di atas kode ]]></b:skin>

#dafis-acc{ font-family:"Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif; font-size:12px; color:#333; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdT3VrsV825mtKCqV_kesxkG28Gd4TQDuG99qiY5OsrAVDFuhqwI9argFNJhqiN_bIG3t_bVjAfVMljEoHLFxf5OwU1QAyestBiPr7SGp_vkHWEij17nzAnzt6At3HVOQ9kA61-J3gyQ8/d/bg5.gif) repeat-y scroll left center #E7F7FB; padding:2px 0; border:1px solid #339DC6; } .dafis-label{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWs3-GuHsep8gqxV2E6yhbzKxMv7Z36QsRL4hOBgbfp_pQuwJQsxH46BTtgE80FVYJuaJhXFc-ZULnnqhAtKT3R2IY9Gd_qVlZw0Qbnh06TQposUeiFxxGnzx1VZ_QViudlECbrD4HK_s/d/bg4.gif) repeat-x scroll 0 0 #E1F4FB; font-weight:bold; line-height:1.4em; overflow:hidden; white-space:nowrap; vertical-align: baseline; margin: 1px 3px; outline: none; cursor: pointer; text-decoration: none; padding: 2px 10px; color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.3); border:1px solid #2F94BA; } .dafis-label:hover{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjz6QZPMbCZMgzpAmt1Fcagux6YfylSsv0NXLTDrPYrAMy5S2z24IeQlGGK85Zv0uRTlFH46dB_Lk9fSYg3tQjkwWUwyw4kNQyxZ3-v53glx8mpUFnGRF5CCHD_-NAP6zENsPUih2fgxiQ/d/bg2.gif) repeat-x scroll 0 0 #E1F4FB; color:#003366; } .dafis-daf ol{ margin:0 0 0 30px !important; padding:0 !important; } .dafis-daf ol li{ background-color:#C9E9F4; line-height:1.5em; margin:1px 3px !important; white-space:nowrap; text-align:left; border:1px solid #339DC6; } .dafis-daf ol li a{ text-decoration: none !important; color:#333 !important; display:block; padding-left:10px; } .dafis-daf ol li a:hover{ background: #7BC4DF; border-left: 5px #333 solid; padding-left: 5px; text-shadow: 0 1px 1px rgba(0,0,0,.3); } 

  • 4. Selenjutnya cari kode </head>, lalu letakkan kode dibawah ini diatas kode </head>.

 <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'/>

  • 5. Simpan template.

LANGKAH 2
  • 1. Klik menu Posting, kemudian masuk ke Entri baru. Masukkan kode di bawah ini pada postingan, caranya seperti membuat postingan seperti biasa tetapi dalam mode Edit HTML.

<div style="border: 1px solid rgb(204, 204, 204); height: 225px; margin: auto; overflow: auto; padding: 3px; text-align: left; width: 100%;">
<script src="http://ziozender2nd.googlecode.com/files/datar%20isi.js"></script><script src="http://forantum.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script></div>
Penting !!!: Ubah http://forantum.blogspot.com dengan nama blog sobat sendiri...
  • 2. Klik Terbitkan.....

Selesai...... Sekarang blog anda mempunyai daftar isi atau table of content, semoga pengunjung blog betah berkunjung ke blog sobat.

22 komentar:

  1. Sudah Di peraktekan tpi gagal trs,..

    BalasHapus
  2. kalo yang cara 1, maksud poin kedua itu apa? memasukkan kode html head lalu letakkan kode dibawah ini diatas kode tadi? saya kurang ngerti...

    BalasHapus
  3. Ass. .
    saya mau bertanya . .
    di blog saya kok ga bisa ya ??
    apa ada yang salah ??
    mohon bantuanya . . .
    http://adthzone.blogspot.com

    BalasHapus
  4. @All: Silakan dicoba lagi, tutorial diatas telah saya cek ulang.

    BalasHapus
  5. wow, tampilannya keren gan, cuman loadingnya jadi lebih lelet

    BalasHapus
  6. Haris: Yap, betul. Tapi kalo enggak di homepage, tidak akan memberatkan blog.

    BalasHapus
  7. WAH,,tutorialnya keren..sudah saya praktekkan dan hasilnya memuaskan dan juga nggak lelet, nie hasil dari blog saya http://darkofjoker.blogspot.com/2010/07/blog-post.html... terima kasih mas... Tetap berbagi ilmunya ya ...

    BalasHapus
  8. ane gk bisa nih,. giimana?
    gk muncul di blog ane.,.

    BalasHapus
  9. @ chandra's: Makasih banyak mas....

    @ ryuuza: Coba Ubah NAMABLOGANDA dengan nama blog sobat sendiri.

    BalasHapus
  10. gag bsa udh tak coba 5x gk berhasil bosss....

    BalasHapus
  11. wah.. pake jquery ya kakk. menggabungkan bbrpa efek jquery yg laennya jg..

    wat temen" yg mau liat efek jquery lainnya .

    berkunjung k blogQ ea.. ku ru buat blog nie..
    jd mohon kritik dan sarannya..

    http://motaro-blog.blogspot.com

    BalasHapus
  12. saya nyoba kok gagal terus ya......
    sebelumnya si saya udah pernah nyoba, tapi modelnya lain....
    saya tertarik dengan model datar isi seperti di blog ini....
    mohon bantuannya...

    kanvasberdebu.blogspot.com

    BalasHapus
  13. kok gagal y?gagalnya pas nulis di new post

    BalasHapus
  14. Mungkin ini masalahnya, tu kan ada tulisan.

    Penting !: Ubah NAMABLOGANDA dengan nama blog sobat sendiri...

    Nah, sudah di ubah belum?

    BalasHapus
  15. maaf, saya sudah coba, sukses sih. tapi kok cuma muncul sebentar ya, trus berubah lagi.
    mohon dicek di blog saya http://hanifahdin.blogspot.com
    trimakasih

    BalasHapus
  16. Haseum Pisan...ewehan gening, kadon jadi link ka maneh.

    BalasHapus
  17. sorry blur rada keras, ti preman cadas. thanks blur , Hereuy biasa, hehehhe....

    BalasHapus
  18. gan, ane udah coba',tapi np gk muncul ya, adeeeeh.....pusing jdinya ne gw....,mhon bantuannya??

    BalasHapus
  19. SALAM KENAL ! MAKASIH NAK ATAS ILMUNYA, SUDAH BAPAK COBA TERNYATA BAGUS HASILNYA. SALAM DARI HTTP://WWW.TABIB-AMPUH.BLOGSPOT.COM

    BalasHapus

Mau tukeran link? silakan buka Link Sahabat dan apabila ada pertanyaan silakan tulis di Kotak Pertanyaan. Terima Kasih...

Kami akan menghapus komentar yang: Tak sopan, memakai HURUF BESAR, berupa caci maki, mengandung kata-kata kebun binatang, debat kusir, provokasi, di luar konteks, berupa undangan/ reklame. Komentar yang terlalu panjang, tanpa paragraf dan sulit dipahami. Komentar copy-paste, silakan di-link saja.

Isi komentar adalah tanggung jawab penulis komentar, bukan tanggung jawab pengelola blog/situs ini. Harap maklum.