Cara Membuat Daftar Isi Di Blog (Part 3) ~ Bithoo

Hai Sobat Bithoo ketemu lagi,,, Emmm ada lagi nih cara membuat daftar isi blog, kita menuju ke daftar isi part 3,,, penasaran bentuk dari daftar isi part 3 ini yuk kita lihat.

Contoh gambar dari bentuk daftar isi part 3

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. Demo dapat di lihat disini Penasaran ingin sekali mempraktekan cara membuat daftar isi dengan efek link nudging dan accordion di blog sobat? Yuk ke cara:

Langkah pertama:

Pada dasbor masuk ke Rancangan lalu pilih Edit HTML.

Cari kode ]]></b:skin>

Copy kode dibawah ini dan paste diatas kode ]]></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/AVvXsEhgSF7sN1j5yceVVGH50lXVa7BcwPqfmRVob-Hm-K7Yx1YuKogVjyAboFaShkF0zeJh_ow_AcWgCgANe9lDmYA_O6yKkfAY1T2LyFUOmH9U7MnIc5AEyh73yVmmZ0GEwSdGIXK0Milr1Mc/d/bg5.gif) repeat-y scroll left center #E7F7FB;
padding:2px 0;
border:1px solid #8FF8FF;
}
.dafis-label{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7f59HOJIsVzqZgjNXErX5-tXFtJakrEkvBHadcBr6o6PTsdNADjdmuz3ynN8ygUn4qaOVcqhRbRKAASQDwCgBRtVK1vzZfElWvERfKNiGTjvAz9aXknYNk6k1FnJpe41p9ItoHBTMIcI/d/bg4.gif) repeat-x scroll 0 0 #FFD4F2;
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 #82EAFA;
}
.dafis-label:hover{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTp3l3-j41sW-0EMdtUJjd0Vlhyphenhyphenq3yCvH46DZLVR_VrNH77IMPS86C-pXLdJlh-vaK8e1zNasC2SX_uBCwmbkdD-iCnYVgGPoWOfeUW-B1oGyEj6Swub7lIzbN7-BI7Zx4vhYzVJSlQbI/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:#FFB8D1;
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: #A6FFFF;
border-left: 5px #333 solid;
padding-left: 5px;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
}

keterangan:
warna di ubah sesuai keinginan

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'/>

Simpan Template

Langkah kedua:

Buat postingan, di beri judul daftar isi atau sitemap

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://bithoo.blogspot.com/feeds/posts/summary?max-results=1000&alt=json-in-script&callback=loadtoc">
</script>