Cara memasang Daftar Isi dengan jquery

Jika sebelumnya kita telah membahas cara membuatseleksi otomatis pada tag Pre dan BlockQuote, sekarang saya akan membahas tentang cara memasang Daftar Isi dinamis dengan JQUERY. Selengkapnya mari kita bahas di bawah:

• Login ke Blogger
• Pilih entri baru/halaman baru atau bisa juga masuk ke Tata Letak lalu tambahkan widget
• Dalam postingan sobat pilih tab HTML bukan compose.
• Copy semua kode di bawah ini dan letakan di postingan sobat.

<style type='text/css'> #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/AVvXsEjJ8Qd9dKsX2t7ehJZ0s11-G-mmACNoAPteIZiWFtK7ZPJfTM8FQ8Iy0SsFr8MUboyc89L7pjGEth0QJnTulCPnnJ8a5-vqMX_Y2pPxSCQtBfU5EeMkwSJHtuC50OJAM9N7DnP9TesOX6M/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/AVvXsEgDrVN0CbkcaLa3ZcsOUbAFz0cG9Js3OUG2-DbrjHsA_zEjOVwON6VssGisnsJZZ_KjGXTBLWLQ8LzDO2npnOcr3utC6Poaqz1owUjzK2pJkyUyS_aJaxxITpWFloq_I83uckmqacZ544g/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/AVvXsEhnxE7OlBz1O4ofSlc0ZHkIJ8yUADSJ1cdbBvg5uKVfM8wKza-AdSfYPUzGj2L_20GjTq2TFmjfbr26chuQ6swPW9PA8kADFPyq8pa5KxG0nKb_q0szsfTFYgsp_nsSXnzEj7A5TjgwW2k/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://infonetmu.googlecode.com/files/Acc1.js"></script> <script src="http://samsulbahriblog.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>

Dan jangan lupa ganti alamat yang bertanda biru dengan URL blog sobat

Terakhir simpan.

Semoga bermanfaat.

sumber: Dafin Defabdaky