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:

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(http://lh3.ggpht.com/_xcD4JK_dIjU/S-KAWJugl3I/AAAAAAAAEBg/bY_3UzrECSg/d/bg5.gif) repeat-y scroll left center #E7F7FB; padding:2px 0; border:1px solid #339DC6; } .dafis-label{ background:url(http://lh6.ggpht.com/_xcD4JK_dIjU/S-KAVk09KSI/AAAAAAAAEBc/Tqfaca2nwmo/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(http://lh3.ggpht.com/_xcD4JK_dIjU/S-KAVlLiuVI/AAAAAAAAEBU/Hd-n_8N7qak/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%;"><br /> <script src="http://litehoster.mobie.in/file/js/datar.isi.js"></script><script src="http://www.bejokemayangan.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script></div>

Penting !!!:
Ubah http://www.bejokemayangan.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...