Cara Membuat Daftar Isi Dengan jQuery

Daftar Isi dengan jQuery ini termasuk daftar isi yang banyak digemari para blogger. Dengan tampilan yang keren dan menarik sudah pasti donk banyak yang tertarik. Lihat aja tampilannya seperti gambar berikut :

Bagaimana…….keren kan…??

Bagi yang tertarik, ikuti langkah berikut :

1. Login ke blogspot.
2. Klik Design/Rancangan.
3. Edit HTML.Jangan lupa member centang pada Expand Template Widget

4. Kemudian cari Kode  ]]></b:skin>  Biar gampang, sobat bisa mencari dengan mengklik tombol  Ctrl+F  Setelah ketemu, copy kode dibawah ini dan letakkan diatas Kode ]]></b:skin>  tadi.

#dafis-acc{
font-family:"Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#333;
background:#ffffff;
}
.dafis-label {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXALHUmvNCjrA-q0W-alwPKtB3vVPbpOTWSPrYW2fw_bUDAalbqDr31RujOU7sd02NYlIguMg9Lm4UlhyP8x4yjRJxYtt6O7zFORnttARDuBB7rfmWorYywX7TIsMgOZov3X0bmzjgzx4/d/bg4.gif") repeat-x scroll 0 0 #E1F4FB;
border: 1px solid #2F94BA;
color: #FFFFFF;
cursor: pointer;
font-weight: bold;
line-height: 1.4em;
margin: 1px 3px;
outline: medium none;
overflow: hidden;
padding: 2px 10px;
text-decoration: none;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
vertical-align: baseline;
white-space: nowrap;
}
.dafis-label:hover {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaYW3nfPRjsZjnfVc2rCz1mxNY_3Pr22iFsfLH0t5Gc0TIkfgiL93c9Oo4MKKQ9IovJcdhYjWB-grdc1AtpjkQs4E4_h7rBtFYWv_MDBnalmXPpBlccbS9EOIznz5Mbc2OMSu9XcIqau8/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;
border: 1px solid #339DC6;
line-height: 1.5em;
margin: 1px 3px !important;
text-align: left;
white-space: nowrap;
}
.dafis-daf ol li a {
color: #333333 !important;
display: block;
padding-left: 10px;
text-decoration: none !important;
}
.dafis-daf ol li a:hover {
background: none repeat scroll 0 0 #7BC4DF;
border-left: 5px solid #333333;
padding-left: 5px;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}

5. Lalu cari Kode </head> dan Letakkan Kode dibawah ini tepat diatas kode </head>

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

Tapi jika di blog sobat sudah ada kode seperti ini maka sobat boleh meninggalkan langkah no 5 ini.

Lalu simpan.

6. Jika sudah,copy dan paste kode dibawah ini,boleh sobat letakkan dalam postingan maupun diwidget blog sobat.

<script type="text/javascript" src="http://newbienb.googlecode.com/files/Acc1.js.txt"></script>
<script src="http://newbienb.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>

Ganti yang berwarna merah dengan URL blog sobat.

Bagaimana..?? Mudah bukan…

Bagi yang belum berhasil , coba diperhatikan kembali apakah sudah memberi label pada tiap2 postingannya.