Cara Membuat Daftar Isi Accordion Di Blog

Assalamualaikum sobat :D
Ini adalah Posting Pertama Saya, Posting pertama setelah bergantinya nama blog ini menjadi Go! Blog heheheh kali ini saya akan memberikan Tutorial Blog yang patut sobat praktekkan XD Yaitu Cara Membuat Daftar Isi Accordion Di Blog hmmm,,,, kebanyakan orang membuat Daftar isi dengan tampilan Biasa, Kali ini saya akan memberikan Daftar Isi Accordion Di Blog Keren XD ohh iya, Fungsi Daftar Isi adalah Agar pengunjung Dapat Mengetahui isi postingan didalam blog kita jadi,,,, Pengunjung akan betah melihat posting diblog kita XD,, mau tau caranya? Yuk cekidot!!

LIVE DEMO

Pertama, Login Blogger
Kemudian, Masuk Postingan/ Laman (Saya sarankan sih di Laman Saja)
Masukkan kode ini Dibawah ini di Html Bukan Di Compose ya!!

<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/AVvXsEhXgKqpnHKceE-ugTapqHSDgdkdVJRM663NZJy3aempFBGA-Bo6pXk91q-yTL1Tpvh9AJNz8u7YKLrXMM5vnBVDrLOLHuKX2P01XbguYAhb_oRfXnZuXSpmDDdLcqBQ242jHEIf6iQVzQ/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/AVvXsEhih0jz3ox-cB1NhlBi8GPERsVGqG6mH7F_sV7LinG9Ij6ceBTlAdpFi_txph9xHqeU3HfLYiE-5g8ucsjBABZf-CL0trg1rxz2PmPbg49w_HpXMEid5P6lpfR8r9D9lC8jzgLb5CSPDw/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/AVvXsEiLJdkMirKlAHSfr7xZqOos-9n1bmqXory4OQvE1gpdI7UBjtU27vkSaUHy4enPZd1xISb7bOyGyfVd7eKDp5V-VNwLNG6nDEc3QA6quIVwaZ9Qg8ftQrRw7UhDG2xqSmVGhVlhwLFrUw/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 src="http://wahyu-only.googlecode.com/files/daftar_isi_accordion.js" type="text/javascript"></script>
<script src="http://error-99.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>

Kemudian Sobat Ganti Teks berwarna biru Dengan Link Blog sobat,,

Terakhir simpan Template, Selesai !! 

Sumber: Wahyu Only