Daftar Isi Menggunakan J-Query

Bismillah,..

Sudah lama sekali saya tidak menyapa sobat Berbagi Ilmu.
OK.. baiklah.. untuk pemanasan.. kali ini berbagi ilmu akan memberikan tutorial tentang bagaimana cara membuat daftar isi menggunakan J-Query, seperti yang dimiliki oleh Berbagi Ilmu sendiri. Sumber tutorial saya ambil dari blog ini.

OK deh,.. gak perlu basa basi terlalu panjang.. langsung aja nih langkah-langkahnya..

• Log In ke akun blogger sobat
• masuk ke dasbor, klik rancangan dan pilih edit HTML
• Lalu, letakkan kode di ini dibawah ]]></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/AVvXsEh2oLerQNsQv333zW50szVp_7-LncJCsEAXR8WUMfsV5qLKwDxVDk_EjCMs_p6Q5s9r1BWhtYhpQmaK3lWtMWrHF4BuRT2PptCVms-CrLfzBUzBJNWny5f7iDwjWxNfP5AeHJvWipaj3wk/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/AVvXsEgSD-TqV6Bv1HzceFDl5lXW7RLlYH35gIhLE6gEaBdCEiegMT1mmQMG-pSSkdoVPenCttqo8-pgo9mytWjnj7vCk_40JVtMPtz4Fj_FilU0cKLRX9fD4ong0G_rBUAywWn0QyB2iU7rhfQ/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/AVvXsEhdu58grYXS00vM_p8w4mDT9NvNvOQABqIXaBS30_w6hRZj9nHP6KYqW2mrVtjF86mqQGRKermw0Sfa2-ITDYT9WuRakF-4heuFcZIy75b-vb9zxXGxx4AnxUHaG00OVOHmbYApEbUB_0A/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); }  

• Selanjutnya cari kode </head>
   lalu letakkan kode dibawah ini.. di atas kode </head>
•  <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'/>
• Simpan template
•  
•  
• Langkah Berikutnya yaitu Klik menu Posting, kemudian masuk ke Entri baru. Masukkan kode di bawah ini pada postingan, caranya seperti membuat postingan seperti biasa tetapi dalam mode Edit HTML.
• <script type="text/javascript" src="http://hensblog.googlecode.com/files/dafis_accv1.js"></script>
  <script src="http://NAMABLOGANDA.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>
• Penting !!!: Ubah NAMABLOGANDA dengan nama blog sobat sendiri...
   
• Nah.. dah jadi deh.. ee.. jangan lupa disipan ya... :)
• N liat hasilnya...