/ / Cara membuat daftar isi dengan efek nudging dan accordion pada blog

Cara membuat daftar isi dengan efek nudging dan accordion pada blog

author: -


Daftar isi berefek accordian berfungsi untuk menghemat tempat dimana daftar isi blog banyak.
Membuat daftar isi blog menjadi lebih ringkas dan rapi.
Banyak kita jumpai daftar isi berefek accordion ya...
Bagaimana kalau kita menambahkan efek link nudging yaitu jika link di sorot maka akan bergeser.

Penasaran ingin sekali mempraktekan cara membuat daftar isi dengan
efek link nudging dan accordion di blog sobat?
Yuk ke cara:


  1.  Langkah pertama 
  2. Login blogger anda 
  3. Pada dasbor masuk ke Rancangan
  4. lalu pilih Edit HTML. 
  5. Cari kode ]]></b:skin>
  6. Copy kode dibawah ini dan paste diatas kode ]]></b:skin>

#dafis-acc{
font-family:"Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size:13px;
color:#ff0000;
background:url() repeat-y scroll left center #000;
padding:2px 0;
border:1px solid #ccc;
}
.dafis-label{
background:url() repeat-x scroll 0 0 #000;
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: #ff0000;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
border:1px solid #383737;
}
.dafis-label:hover{
background:url() repeat-x scroll 0 0 #383737;
color:#fff;
}
.dafis-daf ol{
margin:0 0 0 30px !important;
padding:0 !important;
}
.dafis-daf ol li{
background-color:#000;
line-height:1.5em;
margin:1px 3px !important;
white-space:nowrap;
text-align:left;
border:1px solid #040C0F;
}
.dafis-daf ol li a{
text-decoration: none !important;
color:#333 !important;
display:block;
padding-left:10px;
}
.dafis-daf ol li a:hover{
background: #ccc;
border-left: 5px #333 solid;
padding-left: 5px;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
}
keterangan: 
warna di ubah sesuai keinginan 

 5. Tempatkan kode di bawah ini di atas kode </head>
<script type='text/javascript'  src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'/>
6. Simpan template

Langkah kedua 

 1. Buat postingan, di beri judul daftar isi atau sitemap 
 2. Tempatkan kode di bawah ini di edit html editor blog
<script src="https://sites.google.com/site/bangkolis/javascript/daftarisimaskolis.js" type="text/javascript">
</script>
<script src="http://www.cybermig.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc">
</script>
Ganti dengan url blog sobat

3. Save dan lihat hasilnya