Daftar Isi Efek jQuery Accordion

Sekarang Wandev Pengen Posting Tutorial Blog Ni, Wandev Pengen Kasih Tau Ke Temen - Temen Semua Cara Membuat Daftar Isi Efek jQuery Accordin, Tapi Sebelumnya Wandev Terimakasih Dulu Kepada  Blogger Tune-Up  Yang Sudah Menuntun Wandev Hingga Bisa ! 

CONTOH DAFTAR ISI

Oke Langsung Mulai Aja !

1. Login Ke Blog Kalian
2. Klik Rancangan - Edit HTML - Centang Expand Template Widget
3. Cari Kode Di Bawah Ini

]]></b:skin>

   
    4. Masukan Kode Dibawah Ini Di Atas Kode Di Kode Nomor 3

#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/AVvXsEhGUgdetKfiHngdm6EWpaJf4YzjuxsimCSkKoqN1aM45NX6rhts2CTOB6k0nqn74_jFkjQHfAE8n1SJO_LjLIm7N0URtgqySiZf_Swp9buyjolXqq5zaTnbpixyovA6xLrBGbgLe4K7Ryg/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/AVvXsEhF2OhPaWDpop8TwHquzujBOYAhXt0eqG4jBBiqxglTRgTdShFirLY5UBX1qd7v52NIXqgyp3kMzM2WiUhUUTk8W0g4lrSr6eZB-Pf1HVgbRE3JNjxXSiu6tlTdd4hhePBG-pudTHbUqrs/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/AVvXsEgjT0uc-B7Qb2T8eiXHdQXpdw4XCHPjCuUJerEiKagWlYQkRXAAqbcPGdBfaL3iOeg3LZpUhjskpc7eYYpe5zmkEDQnG5EW6trIX5g8O_-xYLQjW9awok70aoUu0RgGV4zDydMIvqXC4P0/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. Cari Kode Di Bawah Ini

</head>

         
         6.  Masukan Kode Di Bawah Ini Di Atas Kode Nomor 5

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

         7 . Simpan Template
         8 . Klik Posting - Entri Baru
         9 . Tulis Judul Sesuai Keinginan Anda ( Daftar Isi )
         8 . Masukan Kode Di Bawah Ini Dalam Postingan Anda

     

<script type="text/javascript" src="http://hensblog.googlecode.com/files/dafis_accv1.js"></script>

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

         9 . Ganti Tulisan Yang Berwarna Merah Dengan Nama Blog Sobat
       10 . Klik Terbitkan Artikel Dan Silahkan Anda Cek !


NB : KALAU ANDA MASIH BINGUNG SILAHKAN KOMENTAR !


SELAMAT MENCOBA !  ^_^