Home » , » Cara Membuat Daftar Isi Dengan jQuery Accordion

Cara Membuat Daftar Isi Dengan jQuery Accordion

Written By RACHMAT SR on Kamis, 30 Agustus 2012 | 01.07

Membuat Daftar Isi Dengan jQuery Accordion

 
Daftar isi sangat penting bagi keberadaaan sebuah blog atau web. Karena daftar isi pada website/blog berfungsi sebagai alat navigasi bagi pemilik maupun pengunjung untuk menjelajahi isi dari website/blog.

Selain itu daftar isi ini juga menggunakan efek animasi accordion, hal ini dimaksudkan agar daftar isi blog ini terasa lebih ringkas dan tidak terlalu panjang sekaligus mudah dan rapi untuk blog serta artikel yang disusun berdasarkan Label/Kategori. Sehingga serasa seperti blog anda seperti blog profesional. Sebagai contoh lihat gambar di bawah atau langsung klik disini.


Langkah Pertama
 
  1. Login dulu ke blogger anda
  2. Pada dasbor masuk ke Rancangan lalu pilih Edit HTML.
  3. Setelah itu cari kode berikut ini ]]></b:skin>
  4. Kemudian copas kode dibawah ini dan taruh diatasnya
    #dafis-acc{ font-family:"Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif; font-size:12px; color:#333; background:url(http://lh3.ggpht.com/_xcD4JK_dIjU/S-KAWJugl3I/AAAAAAAAEBg/bY_3UzrECSg/d/bg5.gif) repeat-y scroll left center #E7F7FB; padding:2px 0; border:1px solid #339DC6; } .dafis-label{ background:url(http://lh6.ggpht.com/_xcD4JK_dIjU/S-KAVk09KSI/AAAAAAAAEBc/Tqfaca2nwmo/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(http://lh3.ggpht.com/_xcD4JK_dIjU/S-KAVlLiuVI/AAAAAAAAEBU/Hd-n_8N7qak/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); }
  5. Selenjutnya cari kode </head>, lalu letakkan kode dibawah ini diatas kode </head>.
     
    1. <script type='text/javascript'  src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'/>  
    Nb : Jika sebelumnya sobat telah memasang scipt jQuery ini lewati saja langkah diatas

  6. Kemudian Klik Simpan Template.
Langkah Kedua
  1. Buatlah sebuah posting blog dengan judul terserah (Misalnya : Daftar Isi Blog Lengkap Atau Table Of Content )
  2. Selanjutnya Masukkan kode di bawah ini pada postingan, caranya seperti membuat postingan seperti biasa tetapi dalam mode Edit HTML.

<script type="text/javascript" src="http://rachmatblog.googlecode.com/files/daftarisirest.js"></script><script span style="990000" src="http://sumatrarestaurant.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>

  1. Ubah warna Biru dengan NAMABLOG ANDA dengan url blog anda
  2. Selanjutnya Klik Publish Post.
  3. Selesai.
Selamat mencoba dan semoga bermanfaat.

Tambahan:

  1. Jika anda ingin melatakan Langkah Kedua secara tomatis di postingan, maka anda masuk ke Dasbor dan pada Menu Dasbor pilih Setelan.
  2. Pada menu Setelan Pilih Format.
  3. Pada menu Format tadi Cari kolom Templat Entri jika telah ketemu Salin dan Letakan Kode dibawah di dalam kolom Templat Entri.
  4. Simpan dan Tutup - Selesai sudah.

 

<div style="margin: 5px;"><div class="bigfont" style="margin-bottom: 2px;"><input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display
!= '') {
this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display
= ''; this.innerText = ''; this.value = 'Tutup'; } else {
this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display
= 'none'; this.innerText = ''; this.value = 'Buka'; }" style="margin: 0px; padding: 0px; width: 60px;" value="Buka" type="button"></div>
<div style="background-color: rgb(230, 230, 230); border: 1px solid rgb(66, 66, 66); height: auto; margin: 10px 0px; padding: 10px; text-align: left; width: auto;"><div style="display: none;">
&lt;script type=&quot;text/javascript&quot; src=&quot;http://rachmatblog.googlecode.com/files/daftarisirest.js&quot;&gt;&lt;/script&gt;&lt;script span style=&quot;990000&quot; src=&quot;<font color="#0000FF">http://sumatrarest.blogspot.com</font>/feeds/posts/summary?max-results=1000&amp;amp;alt=json-in-script&amp;amp;callback=loadtoc&quot;&gt;&lt;/script&gt; </div></div></div>

Dengan demikian setiap ada postingan baru maka akan tomatis Daftar isi terisi.

Jangan Lupa Kode Warna Biru ubah dengan nama BLOG ANDA

 

avira-indonesia


 Semoga Artikel ini bermanfaat,

Baca Juga Artikel yang Berhubungan dengan Topik ini :


Daftar Artikel

Sumatra Restaurant Jeddah Melayani Katering Umrah dan Haji

Tips merawat baterai Laptop anda.

Jika Anda menyukai Artikel di blog ini, Silahkan kirim Email untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit.

Delivered by FeedBurner

Share this article :

0 komentar:

Poskan Komentar

Thank for your visit, leave your suggestions and comments in the fields below ...

Silahkan meninggalkan komentar anda sehingga kita dapat berbagi pemikiran Anda dengan pengunjung lainnya.



 
Support : Al Islam | Paalem 3 | Mushola
Copyright © 2013. Panduan Blogger - All Rights Reserved
Template Created by Creating Website Modified by CaraGampang.Com
Proudly powered by Blogger