Cara Membuat Daftar Isi Blog Dengan JQuery

Cara Membuat Daftar Isi Blog Dengan JQuery

Daftar Isi dalam blogmerupakan bagian penting yang dapat membantu kita untuk melihat-lihat atau mencari dalam suatu Web/Blog. Bagian ini juga dapat mempercantik tampilan blog kita asalkan kita dapat merubahnya sedemikian rupa. Nah, kali ini saya akan membagi tips "Cara Membuat Daftar Isi Blog 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. Jika kamu ingin melihat demonya langsung silahkan klik disini.

Bagi yang ingin membuat daftar isi seperti itu silahkan di simak baik-baik yaa . . .



Cara Pertama

1. Login ke Blogger.
2. Klik Template.
3. Edit HTML.
4. 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/AVvXsEghgVQ8cmtzEdwv_vUfsjygEaJQD4hoCQxrn_OVB97fXPMpqV6u9Ki5VEzGxN_O1Z6JEoeGxx3YIKbpD-jp0naYteNJEko7Kzj9r3j0OWAyoe_cDDooJZOJbRU3D085ZVF1dXUTftJjXYg/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/AVvXsEizSQRy5IcZnHd_pI8fvUT1PQnVzY2IZexxHmicR2a1xHWZRaxPLy4_CWX1EyAnmgqpXzctJfXha3QgCTyVHTPS4HJw_6tXJkeahddhnR04dFpj2GWU5bPZydxuSldKgaH2NaFkNYn9KrM/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);
   }

5. 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 no 5 ini.
6. Jika sudah,copy dan paste kode dibawah ini,boleh kamu letakkan dalam postingan maupun widget blog kamu.
   

   <script type="text/javascript" src="http://infonetmu.googlecode.com/files/Acc1.js"></script>
   <script src="http://www.edu-soft.tk/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>

7. Ganti yang berwarna merah dengan URL blogmu.Selesai.

Bagaimana, mudah atau sulit ??? Bagi yang kesulitan saya akan memberikan tips altenatif yang lebih mudah dan cepat.


Cara Kedua

1.   Login ke Blogger.
2.   Buat Entri baru. Ubah ke mode HTML.
3.   Copy kode berikut ke Entri

<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/AVvXsEhrbBOZGvcDl2VwiB9cPVpID902c6jPCT1tvTxXlYQhUKSzZUnNb56yWdPVAEgtJ_mkK0IdeUgCTiwNUKMiXDvFMnj74aAWSr87cXqPkEUn0nykxE2F8sNrVX6xXLE5aD1hSvvmxNZdEKs/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/AVvXsEghgVQ8cmtzEdwv_vUfsjygEaJQD4hoCQxrn_OVB97fXPMpqV6u9Ki5VEzGxN_O1Z6JEoeGxx3YIKbpD-jp0naYteNJEko7Kzj9r3j0OWAyoe_cDDooJZOJbRU3D085ZVF1dXUTftJjXYg/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/AVvXsEizSQRy5IcZnHd_pI8fvUT1PQnVzY2IZexxHmicR2a1xHWZRaxPLy4_CWX1EyAnmgqpXzctJfXha3QgCTyVHTPS4HJw_6tXJkeahddhnR04dFpj2GWU5bPZydxuSldKgaH2NaFkNYn9KrM/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://www.edu-soft.tk/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>

4.   Ganti yang berwarna merah dengan URL blog kamu.
5.   Terbitkan Entri tersebut.
6.   Buat Laman yang di link-kan ke postingan tadi. ( Untuk yang ingin menampilkan Daftar Isi di Blog)
7.   Selesai.

Selamat mencoba