Membuat Menu Navigasi Dengan JQuery. terkadang HAPIA Mesir sering ditanya tentang cara membuat menu navigasi, banyak sekali tutorial yang menyajikan cara membuat menu ini. mulai dari yang paling sederhana sampai yang menggunakan perpaduan antara code CSS dengan JQuery.Berikut adalah cara membuat menu navigasi menggunakan CSS dan JQuery yang HAPIA Mesir sajikan bersumber dari Net Tuts dengan beberapa penyesuaian. Untuk Melihat DEMO silahkan klik link dibawah ini :
Cara Membuat Menu Navigasi Dengan JQuery adalah sebagai berikut :
- Login keBlogger dengan account anda.
- Pergi ke "Tata Letak" kemudian "Edit HTML".
- Cari code ]]></b:skin> untuk meletakkan code CSS berikut diatasnya :
- Login keBlogger dengan account anda.
- Pergi ke "Tata Letak" kemudian "Edit HTML".
- Cari code ]]></b:skin> untuk meletakkan code CSS berikut diatasnya :
#container {
width: 1000px;
margin-top:-10px;
}
ul, li {
margin: 0;
padding: 0;
}
#blob {
background: #0b2b61;
border-right: 1px solid #0059ec;
border-left: 1px solid #0059ec;
position: absolute;
z-index: 1;
top: 0;
background: -moz-linear-gradient(top, #0b2b61, #1153c0);
background: -webkit-gradient(linear, left top, left bottom, from(#0b2b61), to(#1153c0));
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-moz-box-shadow: 2px 3px 10px #011331;
-webkit-box-shadow: 2px 3px 10px #011331;
}
#nav {
padding:5px;
position: relative;
background: #292929;
float: left;
}
#nav li {
float: left;
list-style: none;
border-right: 1px solid #4a4a4a;
border-left: 1px solid black;
}
#nav li a {
color: #e3e3e3;
z-index: 2;
position: relative;
cursor: pointer;
float: center;
font-size: 20px;
font-family: helvetica, arial, sans-serif;
text-decoration: none;
padding: 30px 52px;
width: 100%;
}
width: 1000px;
margin-top:-10px;
}
ul, li {
margin: 0;
padding: 0;
}
#blob {
background: #0b2b61;
border-right: 1px solid #0059ec;
border-left: 1px solid #0059ec;
position: absolute;
z-index: 1;
top: 0;
background: -moz-linear-gradient(top, #0b2b61, #1153c0);
background: -webkit-gradient(linear, left top, left bottom, from(#0b2b61), to(#1153c0));
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-moz-box-shadow: 2px 3px 10px #011331;
-webkit-box-shadow: 2px 3px 10px #011331;
}
#nav {
padding:5px;
position: relative;
background: #292929;
float: left;
}
#nav li {
float: left;
list-style: none;
border-right: 1px solid #4a4a4a;
border-left: 1px solid black;
}
#nav li a {
color: #e3e3e3;
z-index: 2;
position: relative;
cursor: pointer;
float: center;
font-size: 20px;
font-family: helvetica, arial, sans-serif;
text-decoration: none;
padding: 30px 52px;
width: 100%;
}
- Simpan Template.
- Pergi ke "Elemen Laman".
- Tambah Gadget dan pilih "HTML/JavaScript".
- Rata-rata template dari blogger telah terpasang "tambah Gadget" dibawah Header. jika belum anda silahkan cari tutorial untuk membuat gadget dibawah Header.
- Copy paste code berikut kedalamnya :
- Pergi ke "Elemen Laman".
- Tambah Gadget dan pilih "HTML/JavaScript".
- Rata-rata template dari blogger telah terpasang "tambah Gadget" dibawah Header. jika belum anda silahkan cari tutorial untuk membuat gadget dibawah Header.
- Copy paste code berikut kedalamnya :
<div id="container">
<ul id="nav">
<li id="selected"><a href="/">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="#">Blogging Tips</a></li>
<li><a href="#">Menu Navigasi</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://hapiajavascript.googlecode.com/files/NavScript.txt"></script>
<script type="text/javascript">
$('#nav').spasticNav();
</script>
<ul id="nav">
<li id="selected"><a href="/">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="#">Blogging Tips</a></li>
<li><a href="#">Menu Navigasi</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://hapiajavascript.googlecode.com/files/NavScript.txt"></script>
<script type="text/javascript">
$('#nav').spasticNav();
</script>
- Simpan.
# width: 1000px; adalah lebar menu navigasi.
# font-size: 20px; adalah ukuran font pada menu navigasi.
# padding: 30px 52px; adalah jarak antara tulisan dengan garis atas dan bawah dengan nilai 30 pixel dan garis samping kanan dan kiri dengan nilai 52 pixel.
Selamat Mencoba dan Happy Blogging.
Dari Planet Aqidah
Dari Bunglon Blog
# width: 1000px; adalah lebar menu navigasi.
# font-size: 20px; adalah ukuran font pada menu navigasi.
# padding: 30px 52px; adalah jarak antara tulisan dengan garis atas dan bawah dengan nilai 30 pixel dan garis samping kanan dan kiri dengan nilai 52 pixel.
Selamat Mencoba dan Happy Blogging.
selamat atas Award-nya dan amankan postingannya( simpan )
eky ni,kalo dicoba di blogspot saya.makasih kawan...
welcome back please
Nah.. Ini sedikit membantu untuk membuat Tamabhan Ilmu Membuat Blog
Gak salah mampir lagi kesini, ternyata ada info baru, jadi nambah ilmu buat ngeblog...
Langsung di bookmarklah biar nanti mudah nyarinya.
Kayaknya keren nich...
Simpan dulu ahhh...
Boleh juga sobat panduannya, coba dipraktekkan.
btw: link udah dipasang sob pls cek, and pasang juga aku ya.., tks
wah hapia bagus nih trik2nya mau coba ah ganti dulu ya
Alhamdulillah dapat ilmu blogger lagi. Ala kulli hal, blognya sudah jadi profesional semua ya, apalagi yang artikelislami.com (Tidak pakai gratisan blogspot lagi). Semoga sukses
BeDa@ alhmdllh mas muchlisin... yang satunya alhmdllh dapat dibelikan sama teman..jadi alhmdllh dapet dot com....
keren sobt... ntar aku coba dech... thanks ya...
selalu ada yang baru kalo bersilaturahim ke rumah sahabat.
trims yaa atas ilmunya sangat membantu, sukses selalu n tetap semangat.
barang siapa yang mau mengamalkan apa yang telah didapatkannya, niscaya Allah akan membuka ilmu yang terpendam
Keren abis mas, numpang tenar ya ....
wah mantep nih, ane test deh,
kkeren nih master, kira2 aq pasang d blog q bagus g yah
asalamualikum...
wah seru sob dari sampelnya lebih smoot yach pake jQuery,
ini perlu di bookmark dl untuk dipelajari..
thanks udah berkenan menerima award nya sobat..
Sukses Slalu!
Assalamu'alaikum...ilmu bagus lagi nih.....makasih kiyai////
mmm.. mau tanya gratisan Sob Hapia apakah Jquery sama seperti java script..hhhee...mau cobain nanti
makasih bro.... dicoba dulu ah..
mas hapia bener benr ngerti yg oby perlu'iin....
di save dlu yah mas....
ntar kalo ol di skul oby praktekin....
lagi BW... gak enak kalo di campur edit template blog
^_^
dah lama pingin nambah menu horizontal di bloog
mesti tenang nih kalau mau dipraktekkan
oke saya bookmark dulu sahabat
mantap tutorialnya, mesti saya praktekkan di blog lain dulu soalnya saya sering sekali error kalau utak-atik begini
nah ini mas yang saya suka, tentang bikin menu navigasi
soalnya utak-atiknya hanya yang biasa-biasa saja mas, makanya blog saya kaku karena menu nya gak cantik,hehehe
mantap bro infonya.
Wew... It's Very good....
Nice Info... You are the best one....!!!
thankssss
thank's ilmux,
assalam..maaf saya bru bgt didunia blog ini..mo tnya dong mas/pak
kalo misalnya link yang mau dimasukkin itu lebih dari 1 gimana yah?
misalnya mau masukkin lebih dari 1 entri post (lebih dri 1 link ) ke dalam menu "product" ..
itu gmna caranya yah,,bingung .
terimakasih..