Cara Membuat Daftar Isi Dengan Jquery Di Blog

Daftar Isi sangat berperan penting dalam blog. Daftar isi bisa memudahkan pengunjung untuk menemukan artikel yang dicarinya pada suatu blog. Ok deh gan, Kali 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. liat gan screenshootnya. Lumayan cantik bukan ? 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/AVvXsEh4jX2q7bvb_USx-2aCie19bU1U14f-SIF_cIupuvuXOZti3Za3TvnGqcyF75OxmgDGDz3nqJCUuP3Dx4j849xco5flxmfm7RmzkmQ5_sC00xpsR-VvyMH9cgzCrqiOjijM9m_GHvr4dV8/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/AVvXsEjARD-nlvSxLOAe0uiKVZ0fl2pffoJfdv37VjnFftsvuFe4SoRYs2OZYddjQmjZU11wl5oDUDrcuYXrtCXPpj3k0qSLigwn80bZMMSgkhkWRaUpFZJP1_d1GRCA2Rl70SYmSS47TdUs-HE/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/AVvXsEjHGOTwGzKIKev45qMw1HALHMYXHATHPpIUno8AZ9AYR-Q-k2ANu_CKR3WC9vqMaMJiqxplW_FtySQG9B7iT45f9dzSWi-SOhYvsoNkIWBdvd74hs88gqHkLjuzIclp3ksdz5AvQLvU54U/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://akramberbagi.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>

Nb :
Ganti tulisan yang berwarna biru dengan alamat blog sobat.
Kemudian Save.

Tweet