Cara membuat Daftar Isi Otomatis Jquery

Panduan membuat Daftar Isi Otomatis Dengan Jquery Di blogspot - Seperti kita ketahui, bahwa daftar Isi mempunyai  peranan penting dalam blog. Daftar isi sangat membantu pengunjung untuk menemukan artikel yang dicarinya pada blog yang dikunjunginya. Dalam kumpulan panduan blog ini saya akan membagi tentang Daftar Isi Otomatis Dengan Efek Jquery. Daftar isi ini sangat menawan dan cantik  serta menarik tentunya, mampu memikat hati para blogger. Bisa Anda lihat pada contoh. Menarik khan? itulah efek efek yang mampu dihasilkan oleh Jquery,  Ok, langsung saja kita praktek.

Sebelumnya Login ke Blogger

Kemudian masuk ke Rancangan -> Edit Html -> centang 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:10px;
color:#333;
background:url(http://1.bp.blogspot.com/-Q0gQpqnpwdw/TggUQZh1y3I/AAAAAAAAANg/-9rHKcaz5JU/s320/bg5.gif) repeat-y scroll left center #E7F7FB;
padding:2px 0;
border:1px solid #339DC6;
}
.dafis-label{
background:url(http://2.bp.blogspot.com/-SlHI9wfcEy0/TggUQSS6hBI/AAAAAAAAANY/osNWdKWUfZQ/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(http://3.bp.blogspot.com/-x7WFTrEvdnY/TggUQNCYIkI/AAAAAAAAANQ/i8ZH9H_K_bg/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);
}

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

Save Template.
sampai disini belum selesai dan 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://ruditabuci.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>

Untuk menampilkan di Blog silahkan ganti tulisan yang berwarna biru dengan alamat blog Anda.
Kemudian Save. 
Selesai sudah sekarang anda mempunyai Daftar Isi Otomatis Dengan Efek Jquery

Related Articles by Category