News Update :

Rabu, 20 Februari 2013

Cara Membuat Menu Horizontal Drop Down 2013 Animasi Untuk Blog

Print Friendly and PDF

Cara Membuat Menu Horizontal Drop Down 2013 Animasi Untuk Blog

JQuery - Bagi kamu yang ingin memiliki menu drop down yang keren, kamu bisa membuat menu horizontal drop down dengan animasi ini, ketika drop down nya muncul akan memberikan efek animasi yang keren. Cara membuatnya juga gampang dan simpel, tidak ribet bahkan kamu bisa utak atik desain tampilannya.



1. Login ke blog kamu
2. Pilih Template > Edit HTML > Cari kode </head>
3. Letakan kode di bawah ini tepat di atas kode </head>

Kode yang width:980px; adalah kode lebar menu nya, jadi sesuaikan dengan blog kamu.
Kode yang #02b0cf; adalah warna background menu nya.
Kode yang  #f09d28; adalah warna background sub menu nya.

4. Simpan Template
5. Sukses!! daaaaaaaaaaaaaann seterusnya
Ini adalah kode HTML Menu Drop Down Animasi copy kode di bawah ini;.

Ganti tanda pagar dengan URL yang dituju.
6. Sekarang untuk memasang menu nya, kamu bisa gunakan salah satu cara di bawah ini.
(Copy kode nomor 5 ke 2 cara di bawah ini, pilih salah satu saja, dan ikuti instruksinya.)

Cara 1 : Add Gadget > HTML/Java Script > Copy kode nomor 5.
Cara 2 : Template > Edit HTML, Kamu cari kode bagian header blog kamu, untuk lebih mudah cari kode ini <div id='header-wrapper'>  biasanya, kodenya kaya di bawah ini;


<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Blazer Blog (Header)' type='Header'/>
</b:section>
</div><!-- end header-wrapper -->
NANTI KODE NOMOR 5 NYA LETAKAN DISINI DI BAWAH KODE AKHIR HEADER








Copy kode nomor 5 ke 2 cara di atas, ke HTML/JavaScript atau cara ke-2 letakan ganti kata-kata berwarna merah dengan kode nomor 5.
Notice:
Jika cara 1 gagal, berarti kamu harus gunakan cara ke 2 pasti berhasil.
Jika menggunakan cara ke-2 sebaiknya klik dulu PERTINJAUAN untuk menentukan berhasil tidaknya. Setelah berhasil bari SIMPAN TEMPLATE.





Comments
0 Comments

Tidak ada komentar:

Poskan Komentar

 

© Copyright The Tutorial Blogger 2013 -2014 | Design by Onedra | Published by Templates | Powered by Blogger.com.

Pesan Admin :Selamat Datang Bro ≧◉◡◉≦ <div style='background-color: none transparent;'><a href='http://news.rsspump.com/' title='news'>news</a></div><div style='background-color: none transparent;'><a href='http://news.rsspump.com/' title='news'>news</a></div>