Cara membuat daftar isi keren efek accordion style

1. Langkah pertama yaitu menambahkan kode css ke
template blog.





    cari kode  ]]></b:skin> 



    Kemudian masukkan kode css di bawah ini tepat di
atas kode ]]></b:skin> tadi.







<<br
/> #dafis-acc {<br /> font-family:"Trebuchet MS", Tahoma,
Verdana, Arial, Helvetica, sans-serif;<br /> font-size:14px;<br />
}<br /> .dafis-label {<br /> background: rgb(125,126,125);<br
/> background: -moz-linear-gradient(top, rgba(125,126,125,1) 0%, rgba(14,14,14,1)
100%);<br /> background: -webkit-gradient(linear, left top, left bottom,
color-stop(0%,rgba(125,126,125,1)), color-stop(100%,rgba(14,14,14,1)));<br
/> background: -webkit-linear-gradient(top, rgba(125,126,125,1)
0%,rgba(14,14,14,1) 100%);<br /> background: -o-linear-gradient(top,
rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);<br /> background:
-ms-linear-gradient(top, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);<br
/> background: linear-gradient(top, rgba(125,126,125,1) 0%,rgba(14,14,14,1)
100%);<br /> filter: progid:DXImageTransform.Microsoft.gradient(
startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 );<br />
-webkit-border-radius: 25px;<br /> -moz-border-radius: 25px;<br />
border-radius: 25px;<br /> color: #A1A1A1;<br /> text-transform:uppercase;<br
/> font-weight: bold;<br /> line-height: 2em;<br /> margin: 1px
3px;<br /> cursor: pointer;<br /> outline: medium none;<br />
overflow: hidden;<br /> padding: 2px 10px;<br /> text-decoration:
none;<br /> text-align: center;<br /> }<br />
.dafis-label:hover {<br /> color: #F2F2F2;<br /> }<br />
.dafis-daf ol {<br /> margin: 0 0 0 30px !important;<br /> padding:
0 !important;<br /> }<br /> .dafis-daf ol li {<br />
background: -moz-linear-gradient(top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0)
100%);<br /> background: -webkit-gradient(linear, left top, left bottom,
color-stop(0%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0)));<br />
background: -webkit-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0)
100%);<br /> background: -o-linear-gradient(top, rgba(0,0,0,0.65)
0%,rgba(0,0,0,0) 100%);<br /> background: -ms-linear-gradient(top,
rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);<br /> background:
linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000',
endColorstr='#00000000',GradientType=0 );<br /> -webkit-border-radius:
25px;<br /> -moz-border-radius: 25px;<br /> border-radius:
25px;<br /> line-height: 1.3em;<br /> margin: 1px 3px
!important;<br /> text-align: left;<br /> white-space:
nowrap;<br /> }<br /> .dafis-daf ol li a {<br /> color:
#333333 !important;<br /> display: block;<br />
padding-top:5px;<br /> padding-left: 10px;<br /> text-decoration:
none !important;<br /> }<br /> .dafis-daf ol li a:hover {<br
/> color:f2f2f2;<br /> padding-left: 5px;<br /> text-shadow: 0
1px 1px rgba(0, 0, 0, 0.3);<br /> }<br /> 





2. Memasang kode javascript / jquery. Cari kode
</head> kemudian masukkan kode berikut ini di atasnya.  

Jika ditemplate blog
sudah ada kode tadi tidak perlu lagi memasukkannya.

Terakhir simpan template.  



3. Langkah ke tiga yaitu memasang kode berikut boleh di postingan blog atau
di static page (halaman statis)

<script
src="http://julak-project.googlecode.com/files/daftar%20isi.js"
type="text/javascript">

</script>

<script src="http://layarilmu.blogspot.com.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc">

</script>

silakan masukkan /
gunakan  menu HTML pada saat menulis artikel. Jangan lupa untuk mengganti http://layarilmu.blogspot.com dengan nama blog sobat
sendiri. Kemudian publikasikan. Dan daftar isi keren dengan accordion style pun
sudah jadi.