Cara membuat Daftar isi Blog dengan JQuery

Kali ini Baharshare akan memberikan tutor Cara membuat Daftar isi Blog dengan JQuery. Cara ini mungkin sedang dicari oleh para blogger karena unik , bagus dan rapi dan tentunya SEO , hehe
Ok cukup itu saja yang bisa Baharshare bagi tanpa basa-basi lagi mari kita praktekan.
1. Pilih Template - Edit HTML - Centang Expand
2. Cari kode ]]></b:skin> untuk lebih cepatnya tekan CTRL+F dan masukan kode tersebut.
3. Masukan Script di bawah ini tepat 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/AVvXsEhR31BbbCRm36zYmfG0AZ3XVFooIsZdqFLZmdG_GEz4YMLMXmmFzxN2vc0jWLb81xGQUA9KarvnGUSkIQi8MKmddjF68T1klckmmsaoCfM6ZFhqe9v_dXYh3lVPUbpunGSs6PLJTOlZ-zU/d/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/AVvXsEgHNhXewQpAOXVpiK5ACZ5M4adqr-BPWxKVTlqjBZVeyBNBFRjoSNteudVeQynlKtahjdU0t7izPzzUwKAAiW7LP5yF22DDvilfBXF9avTI2CRXNgHwI-xkrLZ-Z3FngV3jx5Tim1K-3BE/d/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/AVvXsEhV4_LFjYl1f2iMBwA5ewqCHNbYGcSFrkPpG6Lx1mXXqyAOh-YMV8nz-Da1XwI4pRf10YsxIBKv9UZ6zgPjW0EwXq_JVGFM0xtjLYMJOnuqBAu0rpHvqCSziUHi0bwjJgQ7dsnvKjshhjw/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;
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);
}

4. Selanjutnya cari kode </head> dan masukan script dibawah ini tepat di atas kode tersebut.

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

5. Ket : Jika sebelumnya sobat telah memasang scipt jQuery ini lewati saja langkah diatas
6. Kemudian coba anda membuat postingan dan pilih HTML.
7. masukan script di bawah ini di HTML tadi.

1. <script type="text/javascript"  src="https://sites.google.com/site/bangkolis/javascript/daftarisibangkolis.js"></script>  
2. <script src="<span style="color: #990000;">http://baharshare.blogspot.com/</span>feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script> 

8.ubah kode yang berwarna hitam dengan URL anda .9. Dan lihat hasilnya.


sumber : www.maskolis.com