Hari ini saya akan memberi Artikel tentang cara membuat Daftar Isi dengan effect Accordion Di blog sobat dan setiap blog pasti punya daftar isi yang berbeda beda,
Menurut saya daftar isi di blog sangat penting, karena adanya daftar isi di blog membantu pengunjung lain untuk melihat artikel kita yang berada di kategori tertentu.

Oke tanpa panjang lebar lagi saya akan menjelaskan tahap-tahap yang harus dilakukan untuk membuat daftar isi di blog. dan kita akan membuat daftar isi blog dengan effect Accordion dengan 2 macam warna.yaitu

1. Accordion Warna biru

<style type="text/css">
    #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/AVvXsEjqIUdtNT6Khg6JiDc3z8Bb6v1bf3sxt1RWyVhCMxk1ZIctCQkTLuQ13zs42QjC-eO22vUoYMWK0c_Ip6EOaBuRU5InBwEPUMB1IgPasLLnSkIDvShZbnL2t-DwFA2MsnNO9Jh48cbqJ58/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/AVvXsEiD8yFz66s_Plx930IDt1u5DKvsE-Kk_thUdIDEW3bYRRD4YiWQe5YwJe9UKjD_7-vL22O5BZaFZldiG1CR6IghuGKrvJQ1fJABwxx9tUXM7ZIq5FOkPdV2Xx8Ov0mUjVSls5vE0cRh-2w/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/AVvXsEiySp3YqgnfHQ4ubXYg4i3iRXK5tmzsNODD7vNMav4jov9z9RjRCYI4NDinfL-Ga8rOD-w1xLXhkVqQ1iLvKwEXirc7yiT-wIy0ppT4lk8SR5WVfC2hFTSlAwvOajBawoxeihiXfVfREDQ/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://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://wahyu-only.googlecode.com/files/daftar_isi_accordion.js" type="text/javascript"></script>
<script src="http://wahyu-only.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>

• Silahkan sobat ganti http://wahyu-only.blogspot.com dengan URL blog sobat.
• Results=1000 adalah jumlah daftar isi yang ingin di tampilkan

- Kemudian klik simpan

2. Membuat Accordion warna Hitam dan kuning




oke kita langsung saja,cara membuat daftar isi accordion.Langkah-langkahnya adalah sebagai berikut:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript">
</script>
<link href="http://abu-farhan.com/script/acctoc/acc-toc.css" media="screen" rel="stylesheet" type="text/css"></link>
<script src="http://abu-farhan.com/script/acctoc/daftarisiv2-pack.js">
</script>
<script src="http://wahyu-only.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc">
</script>
<script type="text/javascript">
var accToc=true;
</script>
<script src="http://abu-farhan.com/script/acctoc/accordion-pack.js" type="text/javascript">
</script>

• Silahkan sobat ganti http://wahyu-only.blogspot.com dengan URL blog sobat.
• Results=1000 adalah jumlah daftar isi yang ingin di tampilkan

- Kemudian klik simpan 

3. Membuat Accordion warna Hitam biru

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="http://www.blogger.com/blogger.g?blogID=6984301103846628017" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"></a></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script><link href="http://reader-download.googlecode.com/svn/trunk/acc-toc-labelsort-default.css" media="screen" rel="stylesheet" type="text/css"></link>

<script type="text/javascript">
var showNew    = true,
    accToc     = true,
    openNewTab = true,
    maxNew     = 10,
    baru       = "Baru Niee !",
    sDownSpeed = 600,
    sUpSpeed   = 600;
</script>

<script src="http://wahyu-only.googlecode.com/files/daftar-isi-black.js" type="text/javascript"></script>

<script src="http://wahyu-only.blogspot.com/feeds/posts/summary?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script></div>

• Silahkan sobat ganti http://wahyu-only.blogspot.com dengan URL blog sobat.
• Results=1000 adalah jumlah daftar isi yang ingin di tampilkan

- Kemudian klik simpan

Cukup sekian pembahasan kita kali ini tentang Cara Membuat Daftar Isi Blog Accordion .pilih accordion yang sobat suka...semoga artikel ini bermanfaat.

Judul : Daftar Isi Accordion untuk Blogger dan Cara Memasangnya

Label : Tutorial

URL : http://wahyu-only.blogspot.com/2013/05/daftar-isi-accordion-untuk-blogger-dan-Cara-Memasangnya.html