Accordion Menu Versi Dynamic Drive

Accordian menu sederhana dari DynamicDrive saya aplikasikan ke blogger, contohnya bisa sobat lihat di sidebar blog ini dan kebetulan Rya , S@si dan si centil Jovie  meminta saya untuk memposting nya, kalau diklik efeknya akan buka tutup atau seperti accordion. Mau tahu cara buatnya?

1. Seperti biasa, login ke blogspot, kalau sudah login masuk ke Tata Letak > Edit HTML

Perhatian! Jangan lupa untuk membackup template sobat, klik DownLoad Full Template!

2. Setelah itu masukkan kode di bawah ini di atas kode <b:skin>

<script type="text/javascript" src="http://subagya.googlepages.com/jquery-1.2.2.pack.js"></script>

<script type="text/javascript" src="http://subagya.googlepages.com/ddaccordion.js">

/***********************************************
* Accordion Content script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/

</script>


<style type="text/css">

.mypets{ /*header of 1st demo*/
cursor: hand;
cursor: pointer;
padding: 2px 5px;
border: 1px solid gray;
background: #E1E1E1;
}

.openpet{ /*class added to contents of 1st demo when they are open*/
background: yellow;
}

</style>

<script type="text/javascript">

//Initialize first demo:
ddaccordion.init({
headerclass: "mypets", //Shared CSS class name of headers group
contentclass: "thepet", //Shared CSS class name of contents group
collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
defaultexpanded: [0,1], //index of content(s) open by default [index1, index2, etc]. [] denotes no content.
onemustopen: true, //Specify whether at least one header should be open always (so never all headers closed)
animatedefault: false, //Should contents open by default be animated into view?
persiststate: true, //persist state of opened contents within browser session?
toggleclass: ["", "openpet"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
togglehtml: ["none", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs)
animatespeed: "fast" //speed of animation: "fast", "normal", or "slow"
})
</script>

Simpan hasil pekerjaan sobat

3. Kemudian masuk ke Tata Letak >  Add page elements > HTML/Javascript

Masukkan script di bawah ini

<h2>Example 1:</h2>
<a href="#" onClick="ddaccordion.expandone('mypets', 0); return false">Expand 1st header</a> | <a href="#" onClick="ddaccordion.collapseone('mypets', 0); return false">Collapse 1st header</a> | <a href="#" onClick="ddaccordion.toggleone('mypets', 1); return false">Toggle 2nd header</a>

<h3 class="mypets">Dogs</h3>
<div class="thepet">
<img src="http://i10.tinypic.com/7xlrga1.jpg" />
The dog is a domestic subspecies of the wolf, a mammal of the Canidae family of the order Carnivora. The term encompasses both feral and pet varieties and is also sometimes used to describe wild canids of other subspecies or species. The domestic dog has been (and continues to be) one of the most widely-kept working and companion animals in human history, as well as being a food source in some cultures.
</div>

<h3 class="mypets">Cats</h3>
<div class="thepet">
The Cat, also known as the Domestic Cat or House Cat to distinguish it from other felines, is a small carnivorous species of crepuscular mammal that is often valued by humans for its companionship and its ability to hunt vermin. It has been associated with humans for at least 9,500 years.
</div>

<h3 class="mypets">Rabbits</h3>
<div class="thepet">
Rabbits are small mammals in the family Leporidae of the order Lagomorpha, found in several parts of the world. There are seven different genera in the family classified as rabbits, including the European rabbit (Oryctolagus cuniculus), cottontail rabbit (genus Sylvilagus; 13 species), and the Amami rabbit (Pentalagus furnessi, endangered species on Amami O-shima, Japan). There are many other species of rabbit, and these, along with cottontails, pikas, and hares, make up the order Lagomorpha. Rabbits generally live between four and twenty years.
</div>

Contoh Hasilnya bisa di lihat di bawah ini :

Example

Expand 1st header | Collapse 1st header | Toggle 2nd header

About Me

Nama guwe Guruh Subagya, hanya lelaki biasa tinggal di Jakarta, biasa di panggil mochal, pekerjaan gw seorang Medical Representative, gw senang bersosialisasi, senang main games, internet, mulai senang blogging. Aliran Music guwe Punk Melodic. band favorite NOFX, No Use For A Name, Hi-Standart. Keep Punk Rock Elite Dude. Lihat Profil Lengkap Saya

My Cats

Nama : Cella

Umur : 1 tahun 5 bulan

Jenis : Jantan

Ayah : Garonk

Ibu : Blacky

Hobi : Makan ikan pakai nasi, terus tidur, bangun dan makan lagi

My YM Status

NB : Silakan isi content sobat yang akan mau di tampilkan di accordion menu diantara kode <div class="thepet">  content </div>

Info : Content bisa di isi dengan gambar, dan HTML/Javascript code

Lihat hasil pekerjaan sobat , kalau berhasil berarti sukses kalau tidak silahkan ulangi dari tahap ke 2 kalau tidak bisa juga silahkan kunjungi dynamicdrive atau beritahu saya. Ok sobat happy blogging :D