Membuat Daftar Isi Otomatis Yang Keren

Malem-malem gini hawanya pingin blogging, tp binggung mau posting apa, iseng buka email blog@namikazestar.com eh ternyata ada request sejak tanggal 12Oktober, waduh telat 2hari nih,. maaf nih bro baru baca email. Dia tanya gimana cara bikin daftar isi seperti yang ada disini, untuk menjawab pertanyaan tersebut, ada baiknya saya jawab disini, sekalian update blog hehe.

Daftar isi yang saya gunakan ini otomatis sob, kalu semisal ada artikel atau label baru akan otomatis masuk dalam daftar isi, jadi sobat tak perlu susah payah mengeditnya secara manual, selain otomatis, kelebihan daftar isi ini adalah bentuknya yang unik, untuk melihat pratinjaunya, sobat bisa melihat screenshot disamping.

Gimana? menarik bukan? unik kan? keren nggak? hehe, langsung saja copy script dibawah ini dan paste di laman blog sobat.

<style type='text/css'>
#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); }
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<script type="text/javascript" src="http://iwan-namikaze.googlecode.com/files/Acc12.js"></script>
<script src="http://namikazestar.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>

 Teks warna merah sobat ganti dengan nama blog sobat