Daftar Isi Jquery Accordion

di Senin, Agustus 23, 2010

Selamat malam teman-teman,^^. Sehat selalu untuk kita semua ,,amin.

Sekian lama mutar otak untuk bahan postingan kali ini,akhirnya dapat juga, hehe. Browsing kesana-kemari demi mendapatkan sebuah titik terang postingan, hmmm. Kali ini bahas daftar isi aja deh, walaupun kedengarannya sudah basi, tapi nggak apa-apa , tujuannya untuk sharing aja, Just sharing ,,oke ^^. Daftar Isi ini berbeda dengan postingan ane kemarin yang di requeskan oleh salah satu teman bloger, teman teman bisa membaca Cara Membuat Daftar Isi. Nah, kalau bicara soal daftar isi, pasti teman-teman sudah pada tahu fungsinya,??..yup..^^. Daftar isi menurut definisi ane -->> berfungsi untuk menampilkan link-link postingan berdasarkan waktu atau kategori ,, hehe,,betul ??.
Nah, halaman daftar isi ini sangat bermanfaat bagi pengunjung yang ingin menjelajahi lebih jauh isi dari sebuah situs/blog.

Ok, daftar isi yang ingin ane bahas kali ini adalah daftar isi dengan Jquery Accordion., daftar isi yang yang menurut ane ajib,,he. Banyak sih, daftar isi accordion yang lain, tapi ane bahas yang satu ini saja ya ,^^.
Daftar Isinya seperti ini teman-teman :

Oke, bagi teman-teman yang berminat, silahkan ikuti langkah-langkah berikut :

1. Biasa,.. Log In ke Blogger
2. Design-->>Edit HTML
3. Cari kode ]></b:skin> , dan letakkan kode dibawah ini di atas kode ]></b:skin>
   
4. #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/AVvXsEj8NGpNxie0fcaehpFkye9_yKWI_M6rkwna3Vig0zUmRuhZmqkiI6CWkyZndXHGGYqtX85nFsO6nZjw98cGUTOeE_ulcsl8a2BdYVInN7EyUcumkLVGeYLEM7LND5BLyuss69k03zKbbQs/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/AVvXsEikIFaF_IexzhKKlL5pRWXJEq78ZOkwIv2PMm-OfE8wIY26dC94uqs3ZK4HTSC4v0mAGeXmsrFmBRww941zcnZkSlQi_OZT-TC6RTP1ajWKIKz0khKlOYsrwMc1-4RiIXBJaiAEapE4lTs/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/AVvXsEiMbsf6mRicx65euy5dXseAiwKlG_M2t9rA8D_vBN532DnhAarkH07j2nOq6_3R8kB-i_2O8mQDIfOch5hMVkbOUlx113TR4p-oSfZG8mawBoEAaGiOpIfbx9Cq-5MZVjKE1iJ7ZPzSPEs/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. Kemudian cari kode </head> , dan letakkan kode di bawah ini di atas kode </head>
6. <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'/>

Simpan Template

Sesudah di save, masuk ke Edit Entry-->> buat postingan baru., dan masukkan kode di bawah ini ke dalam postingan teman-teman.

<script type="text/javascript" src="http://hensblog.googlecode.com/files/dafis_accv1.js"></script>
<script src="http://www.elvindinatablog.co.cc/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>

Ubah URL dengan URL blog teman-teman.Publish/terbitkan. Selesai,^^.

Untuk merubah warna silahkan lihat pada kode warna coklat, dan ganti dengan kode warna yang teman-teman sukai. Kode warna silahkan lihat disini.

Sekian dari ane , semoga bermanfaat^^.

Dengan memasukan alamat email dibawah ini, berarti anda akan dapat kiriman artikel terbaru dari Elvindinata BLog di inbox anda :

Delivered by FeedBurner

Baca Juga Yang Lainnya