News Update :
KeluarJangan Lupa Klik Like Dan Follow ya!

Dapatkan info terbaru via Facebook. Silahkan klik LIKE / SUKA.

Powered By Blogger Widgets and Blogger Tutorials

Lagu

Radio Box

Free Shoutcast HostingRadio Stream Hosting

F.U.N Radio Player

Free Shoutcast HostingRadio Stream Hosting

Seperti Apa Menu Horizontal dengan Efek jQuery Ini?

Jumat, 17 Agustus 2012

Mengingat waktu yang sudah malam gan,saya share langsung kepermasalahannya aja ya.

Yup,membuat menu dengan efek memanjang ke kanan menggunakan jQuery.
Contoh sebelum di eksekusi akan tampil seperti ini:
menu horizontal jquery.
1

jquery menu horizontal blogger
2

membuat menu navigasi memanjang efek jquery
3


Nah,untuk contoh fisiknya,sobat lihat aja di SINI

Gimana sob? tertarik,yuk intip cara membuatnya.

Langkah dan Cara Membuat Menu Horisontal dengan jQuery

Pertama,sobat pergilah ke Dashboard lalu pilih Tata Letak (gb1) kemudian pilih tab Edit HTML (gb2) dan jangan lupa contreng checklist 'Expand Widget Templates' (gb3)

menu jquery.
(1)


menu mendatar jquery.
(2)


trik cara membuat menu horizontal jquery.
(3)


Kemudian cari kode berikut (gunakan Ctrl+F untuk mempermudah pencarian):


Setelah sobat ketemukan kode tersebut,tepat diatasnya letakkan script berikut:


Kemudian cari lagi kode berikut (gunakan Ctrl+F untuk mempermudah pencarian):
]]>

Setelah kode tadi sobat ketemukan,kini tepat diATASnya letakkan barisan kode css berikut:
#menuguegitu {
width:200px;
height:50px;
background:#999999;
}

.membuatbordermelengkungroundedcorner {border: 3px solid #EFF0F1;
padding: 5px;
background: #ffffff;-moz-border-radius:5px;}

.membuatbordermelengkungroundedcorner a {background:none;}
img.float-right {margin: 5px 0px 0 10px;}
img.float-left {margin: 5px 10px 0 0px;
}

Setelah itu simpan template sobat.Untuk langkah terakhir ikuti berikut gan:

Pergilah ke Dashboard lalu pilih Tata Letak (gb1) dan klik Add Gadget (gb5) kemudian pilih HTML/Javascript (gb6),lihat gambar:

cara membuat menu horizontal blogger
(5)


how to create a jquery horizontal navigation menu?
(6)


Setelah itu pilih HTML/Javascript (gb5) dan letakkan kode berikut:








Simpan dan lihat hasilnya :D
Berhubung waktu sudah larut,edit sendiri ya sob sesuai dengan attribut yang sobat inginkan.See you dan Moga sukses ya nguliknya ya gan!
Share this Article on :

0 komentar:

Posting Komentar

Signature

Tertanda,
Dewanji Wilajayangga

Jiez Share Comunity - Sharing Is Fun
Perum Situ gede
Jalan Anggrek Blok B-263
085223462560
dewanji_tsm@yahoo.com
http://jiez-ultimate.blogspot.com

IP Cheker

Sign by Danasoft - Get Your Sign

 

© Copyright Jiez Share | Ultimate Sharing System 2010 | Design by Dewanji Wilajayangga | Published by Borneo Templates | Powered by Blogger.com.