Script Untuk Membuat Animated Collapse Menu

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






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.

01')">toggle.jpg" border="0" /> Nama Content

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

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.

01')">toggle.jpg" border="0" /> Nama Content 01

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

02')">toggle.jpg" border="0" />Nama Content 02

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

03')">toggle.jpg" border="0" />Nama Content 03

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

 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.