Jquery Accordion

Jquery Accordion - Langsung saja DEMO Jquery Accordion adalah ada di sidebar kanan blog ini yang bagian atas saya beri nama Menu Andalan. Bagaimana cara membuatnya?perhatikan langkah-langkah dibawah ini

NB : Tutorial dibawah ini menggunakan blogger antar muka terbaru

1.Login Ke Akun blogger sobat
2.Klik Templates Pilih Edit HTML
3.Centang Expand Template Widget
4.Cari kode <head> masukkan kode berikut tepat dibawah <head>

Belajar Ilmu:

5.Kemudian cari kode ]]></b:skin> masukkan kode dibawah ini tepat diatas/sebelum kode ]]></b:skin>

Belajar Ilmu:

6.Lalu klik Simpan Templates
7.Lalu selanjutnya setelah templates tersimpan Klik Tata letak
8.Pilih tambah Gadget tunggu beberapa saat lalu klik HTML/JAVA SCRIPT
9.Masukkan kode dibawah ini

Belajar Ilmu:

<div style="background:#222;padding:2px;border:1px solid 666;"> <div align="center" style="background:#2f4274 url(http://vertical-accordion-menu.googlecode.com/files/bg_hor-accordion-gubhugreyot-1.gif);font-family:Monotype Corsiva;font-size:16px;font-weight:bold; margin:5px; color:#c2d2fa;padding:2px 5px;border:1px solid blue;">CLICK any categories for open!</div> <div class="clear:both"></div> <div class="molormenu"> <h3 class="selektor accordion">Menu-1</h3> <ul class="ul_accordion"> <li><a href="Link-1a" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li> <li><a href="Link-1b" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li> <li><a href="Link-1c" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li> <li><a href="Link-1d" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li> <li><a href="Link-1e" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li> </ul> <h3 class="selektor accordion">Menu-2</h3> <ul class="ul_accordion"> <li><a href="Link-2a" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li> <li><a href="Link-2b" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li> <li><a href="Link-2c" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li> <li><a href="Link-2d" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li> <li><a href="Link-2e" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li> </ul> <h3 class="selektor accordion">Menu-3</h3> <ul class="ul_accordion"> <li><a href="Link-3a" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li> <li><a href="Link-3b" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li> <li><a href="Link-3c" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li> <li><a href="Link-3d" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li> <li><a href="Link-3e" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li> </ul> <h3 class="selektor accordion">Menu-4</h3> <ul class="ul_accordion"> <li><a href="Link-4a" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li> <li><a href="Link-4b" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li> <li><a href="Link-4c" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li> <li><a href="Link-4d" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li> <li><a href="Link-4e" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li> </ul> <h3 class="selektor accordion">Menu-5</h3> <ul class="ul_accordion"> <li><a href="Link-5a" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li> <li><a href="Link-5b" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li> <li><a href="Link-5c" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li> <li><a href="Link-5d" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li> <li><a href="Link-5e" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li> </ul> <h3 class="selektor accordion">Menu-6</h3> <ul class="ul_accordion"> <li><a href="Link-6a" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li> <li><a href="Link-6b" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li> <li><a href="Link-6c" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li> <li><a href="Link-6d" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li> <li><a href="Link-6e" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li> </ul> </div> </div>

10.Klik Simpan

KETERANGAN :
1.KODE HTML YANG TERSEDIA HANYA 6 SELECTOR MENU JIKA INGIN MENAMBAHKAN KODE BARU TAMBAHKAN DENGAN KODE SEPERTI DIBAWAH INI

Belajar Ilmu:

2.LINK JUGA BISA DI TAMBAHKAN DENGAN KODE DIBAWAH INI MISAL

Belajar Ilmu:

3.GANTI LINK (link-1a s/d link-1e dan yang lain) DENGAN URL SETIAP MENU/TERSERAH ANDA
CONTOH : http://belajar-ilmu1.blogspot.com
4.Title di isi dengan keterangan tentang nama menu. Title ini akan terlihat sebagai tip yang terlihat ketika cursor berada di atas link menu.
5.Nama menu merupakan nama atau judul menu yang akan ditampilkan.
6.Lebar Accordion akan menyesuaikan diri dengan lebar widget yang tersedia.
7.Jika blog sebelumnya sudah menggunakan jQuery, maka anda hanya perlu menggunakan kode dan javascriptnya saja (jQuery cukup 1 (satu) dalam satu blog). Buatlah script yang lain selalu berada di bawah jQuery!

Sumber : gubhugreyot.blogspot.com

Belajar Ilmu

Kamis, 02 Agustus 2012

Jquery Accordion

.: Artikel Terkait :.

Tidak ada komentar :

Posting Komentar