MEMBUAT DAFTAR ISI DENGAN EFEK BLUE ACCORDION

Kali ini kita akan mencoba membuat Daftar Isi dengan efek Accordion, dimana efek ini dapat mempeindah tampilan blog kita. Caranya mudah sebenarnya, hanya di beberapa tempat, penggunaan efek ini banyak yang salah ketik alias tidak dapat berjalan dengan baik di blog kita. Dari Daftar Isi model ini nanti dapat dikembangkan dengan hanya terdiri dari satu label atau beberapa label sehingga dapat mempermudah pencarian menggunakan Menu Navigasi Horisontal. Tapi hal itu akan dibahas di lain waktu,
Caranya adalah sebagai berikut :
1, Buka blog anda
2, Klik Laman Page
3. Pilih HTML (jangan menggunakan Compose)
4, Copy Paste HTML berikut ini :

------------------------------------------------------------------------------------------------------------------
<style type="text/css">
#dafis-acc{ font-family:"Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif; font-size:12px; color:#333; background:url(http://lh3.ggpht.com/_xcD4JK_dIjU/S-KAWJugl3I/AAAAAAAAEBg/bY_3UzrECSg/d/bg5.gif) repeat-y scroll left center #E7F7FB; padding:2px 0; border:1px solid #339DC6; } .dafis-label{ background:url(http://lh6.ggpht.com/_xcD4JK_dIjU/S-KAVk09KSI/AAAAAAAAEBc/Tqfaca2nwmo/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(http://lh3.ggpht.com/_xcD4JK_dIjU/S-KAVlLiuVI/AAAAAAAAEBU/Hd-n_8N7qak/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://yourjavascript.com/419551121614/jquery-min.js" type="text/javascript"></script>
<script src="http://yourjavascript.com/011154237117/acc1.js" type="text/javascript"></script>
<script src="http://arkeyes88.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>
------------------------------------------------------------------------------------------------------------------
Keterangan : Ganti tulisan yang berwarna merah dengan alamat blog anda.

5. Simpan/ Save
6. Publikasikan
7. Klik "Lihat Blog" untuk melihat hasilnya...


Selamat Mencoba....