Menu Accordion dan Accordion Label menampilkan daftar posting

Kali ini kita akan membahas menu navigasi dengan script ddaccordion atau menu navigasi yang jika tombolnya diklik atau dimouseover maka link atau teks didalamnya akan terbuka. Menu ini agak mirip expand collapse tapi bedanya jika kita pindah mengklik menu satu lagi maka menu yang terbuka tadi akan otomatis langsung tertutup.
Lihat contoh ( navigasinya CLASSIC, HTML, SIMPLE, dan contoh ini menampilkan label blognya ).
Tertarik ingin membuatnya ?
Ok, langsung saja ke pembuatannya :

- Kita ke bagian Tata letak dan pilih edit html, terus expand template widget
- Pasang kode dibawah ini dibagian tag CSS atau diatas ]]></b:skin>

.mypets{
cursor: hand;
cursor: pointer;
padding: 2px 5px;
border: 1px solid gray;
background: #000000;
}

.openpet{
background: red;
}

Silahkan ganti warna backgroundnya ( red ) ketika dibuka dan background menu utama #000000 (hitam) dengan warna anda sendiri, lihat kode warna disini

- Setelah itu pasang script dibawah ini dan letakkan dibawah ]]<</b:skin>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='http://www.geocities.com/hans_anthonio/ddaccordion.js' type='text/javascript'/>
<script type='text/javascript'>
ddaccordion.init({
headerclass: "mypets",
contentclass: "thepet",
revealtype: "mouseover",
mouseoverdelay: 200,
collapseprev: true,
defaultexpanded: [ ],
onemustopen: false,
animatedefault: true,
persiststate: true,
toggleclass: ["", "openpet"],
togglehtml: ["none", "",
""], animatespeed: "normal",
oninit:function(expandedindices){
},
onopenclose:function(header, index, state, isuseractivated){
}
})
</script>

Keterangan :

- Script diatas bergaya mouseover, ganti tulisan mouseover dengan click jika ingin memakai sistem klik.
- Jika anda memakai sistem klik maka ganti tulisan mouseoverdelay dengan clickdelay.
- Tulisan defaultexpanded: [ ] adalah jika menu ingin tertutup semua ( dalam standby ), ganti dengan [0] jika ingin menu pertama terbuka, dan [1] jika menu kedua ingin terbuka begitu seterusnya.
- animatespeed: "normal" tulisan" normal " adalah kecepatan sedang ganti dengan "slow jika ingin pelan dan "fast" jika ingin cepat.

- Klik simpan ...
-Selanjutnya pindah ke elemen halaman , klik tambah gadget dan pilih html/javascript. Masukkan kode dibawah ini :

<div class="mypets">Judul Menu</div>
<div class="thepet">

Pasang disini tulisan-tulisan anda, atau jika berupa link seperti,
<a href="http://Link Anda.blogspot.com">Judul Link anda</a>

</div>

Klik simpan...
Selesai....


Anda juga bisa memasang menu ini untuk setiap label yang menampilkan daftar posting per label seperti label expand collapse, caranya yaitu :

Klik tambah gadget dan pilih html dan masukkan kodenya seperti dibawah ini :

<div class="mypets">Judul Menu</div>
<div class="thepet">

<script style="text/javascript" src="http://www.geocities.com/hans_anthonio/aanbae.js"></script> <script style="text/javascript"> var numposts = 1000;var showpostdate = false;var showpostsummary = false;var numchars = 100;var standardstyling = false;</script> <script src="http://ALAMAT BLOG KAMU.blogspot.com/feeds/posts/default/-/Link%20Label%20Anda?orderby=published&alt=json-in-script&max-results=999&callback=showrecentposts"></script>

</div>

Nah ganti dengan alamat blog anda dan juga label masing - masing, maka daftar posting per label akan tampil di dalam menu ini, jika anda ingin menampilkan 5 label berarti anda buat 5 seperti ini..