Cara Membuat Daftar Isi Dengan Jquery

 Cara membuat daftar isi dengan jquery yang satu ini ternyata banyak disukai oleh para blogger.karena dengan daftar isi ini sangat keren dan cantik untuk dilihat juga. disamping itu tampilan ini lebih disukai daripada daftar isi dengan fungsi scroll.


Ikuti langkah-langkah dibawah ini!

• Login ke blogspot.
• Klik Design/Rancangan.Edit HTML.
• Kemudian letakan kode dibawah ini di atas kode ]]></b:skin>

##dafis-acc{
font-family:"Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#333;
background:#ffffff;
}
.dafis-label {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4WrBDbWjlBZYx7l2GL7ejERgHKON15nr-2SoMisJDj39ZUoAPZZ7sf3VoOBWmFWbh3glSHBl6yzhdwLoykZ-xCGDa3atZCNsBXBJeV51ldpMauTWspGtdgg8JDyDlmGgvTYp9QTAEJAA/d/bg4.gif") repeat-x scroll 0 0 #E1F4FB;
border: 1px solid #2F94BA;
color: #FFFFFF;
cursor: pointer;
font-weight: bold;
line-height: 1.4em;
margin: 1px 3px;
outline: medium none;
overflow: hidden;
padding: 2px 10px;
text-decoration: none;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
vertical-align: baseline;
white-space: nowrap;
}
.dafis-label:hover {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEho8uFx8EIPgZRVM2v0iYbPOMohQvqvipBZItRPDElM9vmw7zsNSfVU4TsTI9AOgBmhfFG6GHnNonWTcRqw7Z9IMbK5A2NiCo9CVx_k2B7pY1tRZjcIF6Fri9jDLkVHTb1sYE61iBjyCj8/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;
border: 1px solid #339DC6;
line-height: 1.5em;
margin: 1px 3px !important;
text-align: left;
white-space: nowrap;
}
.dafis-daf ol li a {
color: #333333 !important;
display: block;
padding-left: 10px;
text-decoration: none !important;
}
.dafis-daf ol li a:hover {
background: none repeat scroll 0 0 #7BC4DF;
border-left: 5px solid #333333;
padding-left: 5px;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}

Copy kode dibawah ini dan letakkan diatas kode </head>

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

•  Tapi jika di blogmu sudah ada kode seperti ini maka kamu boleh meninggalkan langkah yang ini.
  
  
  <script type="text/javascript" src="http://infonetmu.googlecode.com/files/Acc1.js"></script>
  <script src="http://exyezet.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>

• Jika sudah,copy dan paste kode dibawah ini,boleh kamu letakkan dalam postingan maupun widget blog kamu.
• Ganti yang berwarna merah dengan URL blogmu.Selesei.

Mudah bukan? sulit ya? ya sudah,kalo mau yang gampang silahkan kamu copy kode dibawah ini,letakkan dipostingan kamu lalu terbitkn..

<style type='text/css'>
#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/AVvXsEi4ThwtaRF_mRUflZpW47eqQ332O-5BMLDZ0zlOysqq1ff7xtz7wWISnQRWwdmkP2TuGMwefhGyww9dWloOjHXv5mnwf-TBwkmuQailomdiUyywsddyBr24xZpGtXbbvMWXo4-SXKWZbJs/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/AVvXsEg4WrBDbWjlBZYx7l2GL7ejERgHKON15nr-2SoMisJDj39ZUoAPZZ7sf3VoOBWmFWbh3glSHBl6yzhdwLoykZ-xCGDa3atZCNsBXBJeV51ldpMauTWspGtdgg8JDyDlmGgvTYp9QTAEJAA/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/AVvXsEho8uFx8EIPgZRVM2v0iYbPOMohQvqvipBZItRPDElM9vmw7zsNSfVU4TsTI9AOgBmhfFG6GHnNonWTcRqw7Z9IMbK5A2NiCo9CVx_k2B7pY1tRZjcIF6Fri9jDLkVHTb1sYE61iBjyCj8/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); }
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<script type="text/javascript" src="http://infonetmu.googlecode.com/files/Acc1.js"></script>
<script src="http://exyezet.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>

Artikel Terkait:

Blogger

• Cara membuat tombol minimize dan maximize
• Cara Membuat Kotak Area Dengan Efek Membesar Saat Disorot Mouse
• Cara Membuat Link Bergoyang Dengan Javascript
• Post Populer dengan Animasi
• Konten Bundar Slide
• Cara membuat Label cloud berputar di blog
• Putar Gambar dengan CSS3 tanpa Javascript
• Pasang Modus Hemat Energi di Blog
• Membuat Tombol Top Up
• Gambar Dengan Efek Zooming di Blog
• Kotak Text Area Dengan Tombol Select All
• Cara Membuat Browser Berputar
• Cara Membuat Efek Coret Pada Postingan
• Image Gallery Menggunakan Jquery 1.4.2
• Cara Menampilkan Favicon Di Semua Browser
• Cara Membuat Random Post Di Blogger
• Cara membuat Artikel Terkait Dengan Gambar/Thumbnails
• Cara Mudah Pasang Emoticon Di Kotak Komentar
• Cara Pasang Head Line News
• Membuat Artikel Terkait Dengan Fungsi Scroll
• Cara Membuat Fitur Reply Pada Kotak Komentar
• Cara Mudah Membuat Recent Post Bergambar Dengan Efek Naik Tangga
• Cara menampilkan Icon Di Judul Postingan
• Memanipulasi Tampilan Jumlah Komentar