Membuat Daftar Isi Dengan jQuery Accordion

Tutorial Pemasangan Daftar Isi

1. Login ke blogger 
2. Pilih templaate >> Edit Html >> Lanjutkan
3. Centang Expand widget template
4. Copy script di bawah ini dan letakkan di atas code ]]></b:skin> 

#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/AVvXsEj7pg4_Y_Hn1r1Oy10yHjb086EeD4z2h54gu7JO8HiqfCluocrxQxOsUijnGIC094u6SUi_78NvENP8KiMf5U3MCYIOrDhaTi-V5fTzSyxQWIiCs4RY5C5p1gvNpGQMx-1wxuiFStybAfQ/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/AVvXsEjHQy4xDd2_RB-TYpj_KAbVd0tEenFhF38lnkwxlR-pnemMVyxIrNlSAWHy__u27-F0nl4oGeCEjHzUhw9FGltOO97Wtnudl2VVAs4Qjobn75Y2czAKYRqT0Ub7iYf2JcRmreGz5_ylWpY/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/AVvXsEi3DLIL-Q7bFnpxx9zMyiRvKd7xNjmiqhrG4J31W-usHwtVOYR151raKqhjhXSq4cL3ojVXKJeKp7gXS7Xs9a88zf8jLwaA0M8ShYEhCkTYuu0r-iUjlc5sONTDgIzLlc9HsZFuXxCnNOs/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);
}

5. Klik simpan template 6. Cari code </head> dan letakkan code di bawah ini di atas code </head> 

<!-- jQuery -->
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'/>

7. Buatlah sebuah postingan blog dengan judul terserah sobat (misalnya: cara membuat spoiler show hide pada blog) 8.Selanjutnya masukkan code di bawah ini pada postingan dalam metode edit Html 

<!-- JavaScript -->
<script type="text/javascript" src="https://sites.google.com/site/bangkolis/javascript/daftarisimaskolis.js"></script>
<script src="<span style="color:#990000;">http://junedalbughisy.blogspot.com/</span>feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc">
</script>

Catatan:

• Tulisan http://junedalbughisy.blogspot.com/ silahkan sobat ganti dengan url blog sobat

Selamat mencoba