Copas 5menit: Cara Membuat Daftar Isi Model JQuery Accordion

Cara Membuat Daftar Isi Efek jQuery Accordion sebenernya artikel ini saya ambil dari Blog Modification dimana artikel ini mengambil Tips dan trik yaitu Bahan dasar pembuatan artikel ini adalah dengan cara pengambilan berdasarkan label atau kategori sehingga tidak terlalu panjang dan ringkas dan terkesan rapih juga Blog anda akan terkesan lebih Profesional...Cara Membuat Daftar Isi JQuery

Cara Membuat Daftar Isi Model JQuery Accordion

Tidak Usah Berlama Lama Lagi Langsung Aja Ikuti Perintah Perintah Berikut IniCara Membuat Daftar Isi JQuery...

Login Ke Blogger.
Masuk Ke Rancangan Lalu Edit HTML.
Cari Kode Di Bawah Ini
]]> Lalu
Masukan (copy paste) kode CSS dibawah ini diatas kode pada Langkah 4:

Cssnya Sudah Dirapatkan Sedikit..

6.Cari kode dibawah ini:
</head> atau head

Langkah 7.

Masukan (copy paste) kode javascript dibawah ini diatas kode pada Langkah 6:

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

Lalu Simpan Template dan Langkah Terakhir Buat sebuah artikel dengan judul terserah anda (misal; Daftar Isi atau Table of Content) Lalu Ke Mode Edit HTML lalu Masukan (copy paste) kode dibawah ini ke dalam artikel :

<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&alt=json-in-script&callback=loadtoc"></script>

Lalu Simpan Jadi Deh Daftar Isi Yang Cantik Menurut SayaModifikasi By : HTC DCC

Update : lupakan cara diatas lalu ikuti cara berikut :

copas kode dibawah ini ke dalam postingan anda :

<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/AVvXsEgVnmeoo0WxAX_IQ6a5rCAEKRcq0FZtBmff3257FHNR-OxeAnRUP0U4vjU3uCuVLLeSjSeqmNUAcFj5cS-wJZDGX8XaTrtxkOuSCX1dK8BqQjwVFG_2JhHItWVWI8CIVIXmcfnQETkIh0w/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/AVvXsEhdp0IwvIsYW8571Vt6ektbWx9fLHiSu-8PsW3qWqjL7YJFsDo_3HA99lKnlxWoZs2WRt78efakLIYJOCzsRNGlRocev0o0Ts7PfrPfCCgtEY1PB7pVZnsb-f92qSwp9BV7p6W_Xpm_ByQ/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/AVvXsEiZLPB8UBxW4PuXNTFGw0DiA8a8CObvH4IFQ-67i0SBndvugxMFFQ0sRcpLEzErPbkRoqoonbE5KHQ-suqdSVPBoTNGq1X-8uohrWv7U8Au1DC2xPXGHA01IXOPoRuzE2czr2-JCCEJdC4/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://ojel88.googlecode.com/files/daftarisi.js"></script>
<script src="http://ojelhtc.blogspot.com/feeds/posts/summary?max-results=1000&alt=json-in-script&callback=loadtoc"></script>

lalu ganti http://ojelhtc.blogspot.com dengan nama blog anda

Semoga Berhasil Ya...

Saran Dan Kritik Anda Sangat Membantu Saya Dalam Menulis Artikel Selanjutnya Pada Blog Ini...

Thursday, June 17, 2010

Cara Membuat Daftar Isi Model JQuery Accordion