Memuat Daftar Isi Lengkap

Membuat Daftar Isi Dengan Jquery Diblogspot - Seperti yang anda ketahui, Daftar isi bisa memudahkan pengunjung untuk menemukan artikel yang dicarinya pada suatu blog. Baiklah gan, Pada kesempatan ini saya mau share lagi Tentang Daftar Isi Otomatis Dengan Efek Jquery. Daftar isi ini sangat menawan dan cantik sekali, mampu memikat hati para blogger. itulah efek efek yang mampu diciptakan Jquery,. jangan bengong aja gan, langsung aja dipraktekin mantranya berikut :

• Login ke Blogger
• Kemudian Cari Rancangan - Edit Html - expand widget template.
• Kemudian letakkan kode berikut 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/AVvXsEhceNjlBHmB3cEmNkgU2qwFMs60PPxvBFsMjfXmMxGpz7WxlO9gdEdYYeSXp6fT-U52stxqxG7hk7XEQofKrHOvLZJwn5UTRLuu_B8vDDWQwEVBHYRAOfGl9RXTIERMnihTbbAifSP8SjE/s320/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/AVvXsEiT097gfi4M5aoZdcvm_NW598ImpjBfxt4FDB19Hu5noshuJka0sfe6hdLqGz6FIyQ6liiv-3_7Lxj137NX2Sq4k-_fQF-xkm2hXFLI0IbB38Yau5vtLxwiKLdHAMhKY6VEuKIBFLqo9U0/s1600/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/AVvXsEgWH5IfY5ufnIFtIORL0OA1qb9lzpe4AFzyF-ICkzRmx-9w1fNOwxEimt1_wvKfyAeE6bc1BgfVllqBfW7KLw-y5KkgMeqFsPbu6q955Dhn0XjnS7Yz4xwvcRDHXq42Xu7k-26N1Cc4zfQ/s320/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);
}

• Jika sudah , tahap berikutnya adalah Meletakkan kode berikut diatas kode </head>

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

• Kemudian Save Template.
  Selanjutnya meletakkan Widgetnya di Sidebar :
  Langsung klik Tata Letak - Add Widget - Html/Javascript
  Kemudian Copy paste kode berikut :

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