Script Untuk Membuat Animated Collapse Menu

Script Untuk Membuat Animated Colapse

Sekarang ini banyak sekali Script-script menarik yang disediakan oleh berbagai website, salah satunya adalah website javascript  favotite saya yaitu www.dynamicdrive.com , situs ini terbilang cukup lengkap dalam menyediakan berbagai macam script. dan salah satunya adalah script yang akan saya bahas kali ini, yaitu script untuk membuat animated collapse menu. atau show hide menu. dimana didalam menu tersebut kita bisa menyembunyikan bermacam content, seperti  isi postingan, gambar ,Link list dll. seperti pada contoh dibawah ini. coba anda klik gambar gambar yang bertuliskan show atau tulisan yang ada disebelahnya.

Britney Spear

Contoh Posting

Apa sih Shoutbox itu ? Shoutbox adalah sebuah widget yang mempunyai fungsi yang tidak jauh berbeda dengan chatting, dimana semua pengunjung ataupun pemilik blog itu sendiri.bisa saling mengirimkan pesan-pesan singkat seperti perkenalan, pemberitahuan dan lain sebagainya

Bila kita melihat blog ataupun website yang sudah memasang shoutbox, biasanya shoutbox ini terletak pada halaman depan blog ataupun website tersebut, karena dengan adanya Widget shoutbox ini sangat memudahkan bagi para pengunjung untuk berkomunikasi secara langsung dengan pemilik blog ataupun dengan pengunjung lainnya secara bersamaan

Untuk anda yang berminat memasang widget shoutbox ini pada Blog ataupun website anda. Caranya adalah sebagai berikut :

Link Walpaper Artis

Avril Lavigne
Angelina Jolie
Britney Spears
Aishwarya Rai
Carmen Electra
Beyonce Knowles
Jessica Alba
Jennifer Lopez
Kelly Clarkson
Paris Hilton
Shakira
Jessica Simpson

Tanpa perlu berlama-lama lagi bagi anda yang berminat untuk membuat Animated Collapse menu tersebut.caranya aalah sebagai berikut.

1. Setelah anda login ke Blogger kemudian anda masuk ke menu Tata Letak/Layout >> Edit Html.

2. Pada halaman edit html, anda copy dan paste semua kode dibawah ini tepat di atas kode </head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://sites.google.com/site/vmart77/javascript/animatedcollapse.js">
/***********************************************
* Animated Collapsible DIV v2.4- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
</script>

<script type="text/javascript">
animatedcollapse.addDiv('01', 'fade=1,height=200px')
animatedcollapse.addDiv('02', 'fade=1,height=200px')
animatedcollapse.addDiv('03', 'fade=1,height=200px')
animatedcollapse.addDiv('04', 'fade=1,height=200px')
animatedcollapse.addDiv('05', 'fade=1,height=200px')
animatedcollapse.addDiv('06', 'fade=1,height=200px')

animatedcollapse.addDiv('cat', 'fade=0,speed=400,group=pets')
animatedcollapse.addDiv('dog', 'fade=0,speed=400,group=pets,persist=1,hide=1')
animatedcollapse.addDiv('rabbit', 'fade=0,speed=400,group=pets,hide=1')

animatedcollapse.ontoggle=function($, divobj, state){ //fires each time a DIV is expanded/contracted
    //$: Access to jQuery
    //divobj: DOM reference to DIV being expanded/ collapsed. Use "divobj.id" to get its ID
    //state: "block" or "none", depending on state
}
animatedcollapse.init()
</script>

Keterangan :
Tulisan yang dicetak tebal dan berwarna merah di atas bisa anda edit sesuai keinginan anda, misalnya untuk tulisan '01' yaitu untuk menandakan Id atau identitas menu, sedangkan untuk kode '200' yaitu ukuran tinggi tampilan menu tersebut bila diklik.bila anda ingin memperbanyak Id untuk tampilan menu, silahkan anda copy paste atau perbanyak kode animatedcollapse.addDiv('01', 'fade=1,height=200px') dan beri Id yang berbeda dengan yang lainnya.

3. Klik save/simpan template.

4. Setelah anda memasukan semua kode diatas pada halaman Html template anda, langkah selanjutnya adalah
anda copy dan paste kode dibawah ini paa gadget Html/Javascript dimana saja terserah anda mau menampilkan menu tersebut dimana.

<a href="javascript:animatedcollapse.toggle('01')"><img src="toggle.jpg" border="0" /></a> Nama Content</a>

<div id="01" style="width: 300px; background: #cc0000; display:none">
<b>Isi dengan content apapun yang anda inginkan seperti gambar, postingan dll disini.</b><br />
</div>


Bila anda ingin memperbanyak tampilan menu tersebut, silahkan anda copy paste kode diatas dan beri Id yang berbeda sesuai dengan yang ada pada halaman Html template yang anda masukan sebelumnya.contohnya seperti dibawah ini.

<a href="javascript:animatedcollapse.toggle('01')"><img src="toggle.jpg" border="0" /> Nama Content 01</a>

<div id="01" style="width: 300px; background: #cc0000; display:none">
<b>Isi dengan content apapun yang anda inginkan seperti gambar, postingan dll disini.</b><br />
</div>

<a href="javascript:animatedcollapse.toggle('02')"><img src="toggle.jpg" border="0" />Nama Content 02</a>

<div id="02" style="width: 300px; background: #cc0000; display:none">
<b>Isi dengan content apapun yang anda inginkan seperti gambar, postingan dll disini.</b><br />
</div>

<a href="javascript:animatedcollapse.toggle('03')"><img src="toggle.jpg" border="0" />Nama Content 03</a>

<div id="03" style="width: 300px; background: #cc0000; display:none">
<b>Isi dengan content apapun yang anda inginkan seperti gambar, postingan dll disini.</b><br />
</div>

 dan hasilnya akan seperti dibawah ini.

Nama Content 01

Isi dengan content apapun yang anda inginkan seperti gambar, postingan dll disini.

Nama Content 02

Isi dengan content apapun yang anda inginkan seperti gambar, postingan dll disini.

Nama Content 03

Isi dengan content apapun yang anda inginkan seperti gambar, postingan dll disini.

untuk gambar tombol, saya menggunakan gambar ini ,silahkan anda ganti sesuai keinginan anda dengan memasukan link gambar anda pada tulisan toggle.jpg pada kode di atas.begitu juga mengenai ukuran lebar tampilan menu tersebut bila diklik silahkan anda ganti ukuran Width:300px;

Untuk jelasnya silahkan anda praktekkan sendiri pada blog anda. dan bila ada yang kurang mengenai semua postingan saya, jangan merasa sungkan untuk menuliskan komentar anda. saya akan sangat berterima kasih sekali bila anda memberi komentar pada setiap postingan yang anda baca. saya rasa cukup sekian dulu,postingan saya kali ini. Semoga bermanfaat dan salam blogger mania.