Membuat Daftar Isi Blog Dengan JQuery

Membuat Daftar Isi Blog Dengan JQuery - Daftar isi pada sebuah blog sangatlah penting untuk memudahkan para pengunjung untuk melihat/memudahkan navigasi pada sebuah blog. Walaupun fitur daftar isi sendiri sudah ada dalam fitur standar blogspot, namun yang akan kita bahas disini adalah daftar isi yang menggunakan fungsi JQuery. Hasilnya tampak pada daftar isi blog Mas GunKlaten ini. Untuk membuat daftar isi blog dengan JQuery ini sangatlah mudah. Simak tutorial Membuat Daftar Isi Blog Dengan JQuery berikut ini dan hasil dari Cara Membuat Daftar Isi Blog Dengan JQuery tampak seperti di bawah ini:

Langkah-langkah Cara Membuat Daftar Isi Blog Dengan JQuery:

• Login ke blogspot.
• Pilih template dan EDIT HTML dan centang pada Expand Widget Template.
• Selanjutnya cari kode ]]></b:skin> untuk memudahkan pencarian tekan tombol CTRL+F lalu masukkan kode ]]></b:skin> untuk pencarian. Lalu copy kode di bawah ini dan letakkan tepat diatas kode ]]></b:skin>

/* Daftar Isi With JQuery */ #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/AVvXsEi4ajLFlRvJlSrhjBw-8stkOhKoQMI8XJ8flfhpvVmrG7AzbcZMVhBMqDE4iyXxkgO0znwBhFcl1GMThmgZjRPvr-4RvNHgoKV7qAhJdUoTSZLZtwVwE7QUVrl_92tbo9imiWGv34p9LDQ/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/AVvXsEht4hVKXiMHIaxMEIlG1LJffIiv9Sxz4bAyIHZGxWSZhokkIqusrrd-1AWGfvh5VvidfTLDbf_SeuKNnFfYznLH5oaYVYUnm83I_uOuOkp2dzFgYlpyB-rxFetbyxw_7G7x_DvobnbYZ3A/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/AVvXsEgjosrrlP9XSJH_FYcXc379A22KBje0gQOSDP5tMhVeVPfOOvHceJA4fCq78L4qF7I2xyse9fbauyIeHZ20vOf05np7Kby3GxaeTyrnf3jspd2RxRCoq51BtrqmA78HnhbtQboKI5_tFUA/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); }

• Langkah selanjutnya cari kode </head> dan copy kode di bawah ini dan letakkan tepat di atas kode </head>

<script src='http://dapurtutorial8.googlecode.com/files/Scriptdaftarisi1.js' type='text/javascript'/>

• Selanjutnya SAVE/SIMPAN template dan TUTUP
• Selanjutnya untuk meletakkan widget Daftar Isi Blog Dengan JQuery sebaiknya diletakkan di sidebar.
• Pilih TATA LETAK dan TAMBAH GADGET pilih HTML/JavaScript lalu copy kode dibawah ini dan paste di HTML/JavaScript lalu simpan.

<script type="text/javascript" src="http://dapurtutorial9.googlecode.com/files/Scriptdaftarisi2.txt"></script> <script src="http://gunklaten.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>

• Pada bagian http://gunklaten.blogspot.com/feeds/posts/summary?max-results=1000 teks yang berwarna merah di ganti dengan URL alamat blog sobat.
• Dan anda bisa menambahkan fungsi Scroll Box (tidak di tambahkan juga tidak apa-apa) yaitu:  
  
  <div style="width: 290px; height: 250px; overflow: auto; padding: 4px; border:1px solid #000000;"><script type="text/javascript"src="http://dapurtutorial9.googlecode.com/files/Scriptdaftarisi2.txt"></script><script src="http://gunklaten.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script></div>
  
  Catatan: Teks yang berwarna merah diatas iyalah kode scroll yang harus di tambahkan dan anda bebas menentukan tinggi dan lebar sesuai keinginan anda pada width: 290px dan height: 250px 

Demikianlah tutorial Cara Membuat Daftar Isi Blog Dengan JQuery semoga bermanfaat.

#MAAF tutorial ini saat ini ada masalah, scrip google code menyebabkan crash browser mozila.