Trik Membuat Daftar Isi Lengkap, JQuery Accordion (Update)

UPDATE!:  pada postingan sebelumnya, membuat daftar isi jaqury sudah tidak bisa lagi di karenakan, akun google code server di blokir oleh google. Tapi anda jangan kuatir. Kang salman kini sudah menemukan trik terbaru. Silakan Lihat DEMO scrint kode ini kang salman dapat dari situs abu-farhan.com alhamdulillah instalasinya pun tidak susah..

Pertama silakan buat postingan baru, kemudian pilih Edit HTML (disebelah Compose) kemudian pastekan kode di bawah ini

<link href="http://abu-farhan.com/script/acctoc/acc-toc.css" media="screen" rel="stylesheet" type="text/css"></link>
<script src="http://abu-farhan.com/script/acctoc/daftarisiv2-pack.js"></script>
<script src="http://asksalman19.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>
<script type="text/javascript">
var accToc=true;
</script>
<script src="http://abu-farhan.com/script/acctoc/accordion-pack.js" type="text/javascript"></script>

Keterangan :

• Ganti tulisan warna merah di atas dengan url blog anda.
• Jika Nanti muncul pesan peringatan, ceklis saja dan terbitan!

Selamat mencoba..

Cara Membuat Dafar Isi JQuery Accordion. Seperti Gambar di atas. Menarik bukan. Ini adalah kali 3 Kang salman membahas tutorial membuat daftar isi di blog. artikel-artikel lainnya dapat anda lihat di bagian paling bawah posting artikel ini. Untuk mempersingkat waktu silakan lihat contoh gedget ini, silakan klik Daftar Isi

Bagaimana menarik tidak ? langsung aja yuk kang salman bahas
1.  Login Ke Blogger
2.  Pilih Tata Letek/Rancangan
3.  Pilih Edit HTML
4.  Cari Kode ]></b:skin> dan Letakkan kode di bawah ini, di atas kode ]></b:skin>

#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/AVvXsEgNqABzqJKsKhs0ABE7nwLx7Jz-iJzLR2penF_ohNlDkFtsVSSLeDpmR6DspycbzEb08EP0gL2QglIfShf8FcM4IHUvrE4yRdm-5CrztJI6KyXGRhqpPBZxbay4h2ydj_SiWjyNfheSH3k/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/AVvXsEgTpusf4WqJ8s5ViX7XfQKLzOeJh2KtqB-ej2AaKgg7JqFUeFDNuj0JXH9gf4me8hex32LLb-p-CI1Flms_dHflZvVUEOnuVgLlvWTvrWGCwE7sbjthe5BCw-mP-EHZHnlDDxK15CJKv68/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/AVvXsEhtZTXk0w5W_SFsGBIPOoCxnO2wvMagHVoaKf-8pI5vWG59TIvf-DZ_6OHhBpAN8Bc3T6nGQRhkBFS8v-5CkODRcURadqqejTi2NRN7AUzDKP_CoquNjSs5YUN7C7ftH_AMGixgMXlDGpA/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>

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

6.  Simpan Template


Langkah ke 2
Setelah melakukan optimasi ccs seperti di atas hal selanjutnya yang harus anda lakukan adalah membuat Entri Baru / Posting Artikel Baru
1.  Login ke Blogger
2.  Pilih Entri Baru
3.  Pilih Edit HTML
4.  Paste kode di bawah ini di tempat posting Edit HTML

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

NB : Ubah NAMABLOGANDA dengan nama blog mu sendiri.


Contohnya seperti di bawah ini :

<script type="text/javascript" src="http://hensblog.googlecode.com/files/dafis_accv1.js"></script>

<script src="http://asksalman19.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>

Mudah kan? selanjutkan Terbitkan artikel anda. dan lihat hasilnya hehehe
Oi ya widget di buat oleh modification-blog.blogspot.com


Lihat Juga :

• Cara Membut Daftar Isi ( 1 )
• Membuat Daftar Isi /Site Map Lengkap 

Post By Kang Salman
http://asksalman19.blogspot.com

Ingin mendapat penghasilan tambahan? Bergabung dan jadikan blog anda sebagai ladang uang bagi dompet anda. Daftar =>  disini <= klik!  untuk memanen uang $ seperti saya. Gratis

Dapatkan update artikel  terbaru kami langsung ke email anda.