Buat Daftar Isi Accordion Slide Ala UTta' Ver.4

Kali ini saya akan membuat artikel mengenai "Daftar Isi Accordion Slide Ala UTta' Ver.4".

 

LIHAT DEMO DISINI....

Saya tidak akan menjelaskan lagi mengenai accordion ini, silahkan Sobat baca disini.. pada postingan saya sebelumnya. :D

Berikut ini adalah bagaimana cara membuat daftar isi Accordion Tersebut sahabat bisa lihat dibawah ini.
1. Cara memasangnya dengan membuat sebuah posting blog dengan judul terserah (Misalnya : Daftar Isi Blog Lengkap Atau Table Of Content ).
2. Selanjutnya Masukkan kode di bawah ini pada postingan, caranya seperti membuat postingan seperti biasa tetapi dalam mode Edit HTML.
3. Dan Copy dan kode di bawah ini :

 <style type="text/css">
#UTdafis-ori{font-family:Monaco,Monospace !important;font-size:13px;color:#000; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPHlpq6CoRFKtBbv78Nff46_XgtijLMzCRSgeDt9PaaX4xe_Q4IksqZHL0xl8JcL40yIsJBey5U8mSJS3dCLFdLFxnRGla279EbeJIpCSu_tYrOWAc4X2HoBgCktaPkG__NyA4pB_rb10/d/bg5.gif) repeat-y scroll left center #00477D;padding:2px 0;border:1px solid #eee;}
.UTdafis-label{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhy-bTS2iocpHwxuQ_57Q2-M7GKqoU8tXUpXfcZ57ueL4FrVEOTENGHKN2TEGCR28lx8yMyLNlQfubXEBf_YTzeusYNkB46FoAcllzbK9P3KrIegPSxhERqvrzK1EaSMaH4-c5cMdhyphenhyphenALs/d/bg4.gif) repeat-x scroll 0 0 #0033CC; 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 #bbb;}
.UTdafis-label:hover{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYaIVrUW6FZ_qJFJ30Pr7FpIZyJrNDGa7PD2OHE8mXZE04neg3PKp_rIYxaA2yaDK3jS7WgDGr36TdQYEc9riKbbQFFhd7HMonMZuJCwv-LlA2tSz98FW8EtbkyBru3Mfqu2DhgDc5lms/d/bg2.gif) repeat-x scroll 0 0 #00477D; color:#000; } .UTdafis-ir ol{ margin:0 0 0 30px !important; padding:0 !important; }
.UTdafis-ir ol li{ background-color:#809FFE; line-height:1.5em; margin:1px 3px !important; white-space:nowrap; text-align:left; border:1px solid #9191FE; } .UTdafis-ir ol li a{ text-decoration: none !important; color:#333 !important; display:block; padding-left:10px; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<!-- Content - http://ngawicybers.blogspot.com/ - Start -->
<script src="http://ut2a-4down-blogspot-com.googlecode.com/files/daftar_isi.js" type="text/javascript"></script><script src="http://ut2a-4down-blogspot-com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script><!-- Content - http://ngawicybers.blogspot.com/ - End -->

- Ubah teks yang berwarna merah dengan dengan url blog anda.
- Sedangkan Teks yang berwarna hijau adlah script pendukung, jika sudah memasangnya ditemplate sobat, mka script diatas gak perlu lagi.OKE.

4. Langkah Terakhir 'Klik Publish Post'.

Selamat Mencoba ^^