Membuat Daftar ISI dengan jQuery Accordion di Blog

Sobat blogger sudah lama nih tidak posting tentang Blogger, kali ini saya akan sedikit posting tentang membuat daftar isi dengan jQuery accordion, dengan menerapkan daftar isi di blog kita, maka akan mempermudah pengunjung untuk mengetahui isi dari blog kita, nah pastinya akan banyak juga pembaca artikel kita, betul tidak..? untuk melihat contohnya kamu lihat di daftar isi blog ini, oke kita langsung saja ke lokasi pembuatannya, apa saja bahan-bahan yang di perlukan untuk membuatnya..? tidak sedikit kok,..! cuma secangkir kopi dan sepiring cemilan pasti sukses he... he...

1. pertama biasa kita masuk ke akun blog kita
2. masuk rancangan / tataletak
3. Edit HTML
4. Centang expand widget template
5. lalu copy saja kode CSS berikut di atas kode ini : ]></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/AVvXsEjT-_XSmz10cy01uUM-osyXv0KBqLqnmh_6A_rbJ84UjcwZr2PWg3lhiY0R3U9TNkVd8JMF27r_MZUStH08j3bHyn_OD33Upm2jbF7hRsZrj16K4pch2iasuRW75otZF7gVzZ83XohyphenhyphenQAc/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/AVvXsEiKJ1TSho4ibTi_whSlNQOrqUneTq-aE7DdIBNzCDM8FM_QFOuMmIkR1RRVvC3bPwe8Xo6BJh7MsxvCilj7Q7y1OwZl2OcDRZGTcb3PSGAZ9VgT10u31pdxbFP6bWVJtEDGa-69su-cYk0/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/AVvXsEgOKYyrKLfxxQ8VikUAL0_Kz9anMdQztbS2vil54rs9_SkYNyEylpkctqnUIHHECwrkc6gfsP8h5uRDQt7EPHbNDWv00jpcSELX-7fP5XULW_VZF4ePZWmaBw_xD1q8ZYWAjlNQ4jZ3aRw/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); }

Setelah itu pasang juga kode ajax.googleapis berikut diatas kode ini : lt;/head>
tetapi bagi sobat yang sudah memasang kode ini lewati saja, karena kalau kita pasang lagi bisa bentrok kodenya dan tidak bisa berjalan dengan normal, tetapi yang belum memasangnya ini wajib di pasang oke.

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

Bila semua sudah rampung dan benar save template sobat, selesailah tahap pertama ini.

1. Sekarang masuk masuk ke tahap kedua yaitu :
2. posting baru atau new post mode HTML
3. lalu masukkan kode berikut :

<script type="text/javascript" src="URL/dafis_accv1.js"></script>
<script src="http://niammuddin.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>

Tambahan :
URL http://sukarianta.blogspot.com ganti dengan URL blog sobat

Setelah itu terbitkan dan lihat hasilnya, jreeng.. tara...! menakjubkan bukan.
apabila sobat ingin membuat menu Dafttar isi tinggal copy saja URL postinga tadi, dan masukkan ke dalam URL menu yang akan kita buat.

Oke selesai itu saja semoga berguna dan bermanfaat untuk teman-teman semuanya.
Bila kurang jelas bisa tanyakan di komentar, nanti kita bahas sama-sama.

Tips tricks yang populer lainnya: