Tutorial Blogspot || Cara memasang jquery lava-lamp menu
Assalamualaikum..Kali ini mijie ingin membuat tutorial cara membuat lava - lamp menu menggunakan jquery seperti yang anda lihat pada menu MiJiE BLoG. Cara untuk membuat menu ini sangat mudah berbanding menu sebelum ini. Hanya mengikuti beberapa langkah sahaja dan kesannya amat memuaskan.. Ok, tanpa membuang masa, sila ikuti langkah mudah di bawah.
Step 1 : Login Dashboard => Design => Page Elements => Add a Gadget => Pilih HTML/Javascript .
Step 2 : Copy kod dibawah dan paste kan pada ruangan tadi.
<style>
#container {
width: 970px;
margin: 0px 0px;
padding: 0px 0px 0px 0px;
}
ul, li {
margin: 0; padding: 0;
}
#blob {
border-right: 1px solid #0059ec;
border-left: 1px solid #0059ec;
position: absolute;
top: 0;
z-index : 1;
background: #AE0000;
background: -moz-linear-gradient(top, #AE0000, #C30000);
background: -webkit-gradient(linear, left top, left bottom, from(#AE0000), to(#C30000));
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-moz-box-shadow: 2px 3px 5px #011331;
-webkit-box-shadow: 2px 3px 5px #011331;
}
#lava-lamp {
background: #E4E2E2;
background: -moz-linear-gradient(top, #E4E2E2, #FAFAFA);
background: -webkit-gradient(linear, left top, left bottom, from(#E4E2E2), to(#FAFAFA));
float: left;
border: 1px solid #BDBCBA;
margin: 0px 0px 0px;
padding: 8px 0px 10px 0px;
width: 970px;
}
#lava-lamp li {
float: left;
list-style: none;
border-right: 1px solid #4a4a4a;
border-left: 0px solid #4a4a4a;
}
#lava-lamp li a {
color: #202020;
text-shadow: 0 0px 0px #202020;
position: relative;
z-index: 2;
float: left;
font-size: 13px;
font-family: arial, sans-serif;
font-weight: normal;
text-decoration: none;
padding: 0px 20px;
}
</style>
<div id="container">
<ul id="lava-lamp">
<li id="selected"><a href='http://mymijie.blogspot.com'><b>HOME</b></a></li>
<li><a href='http://mymijie.blogspot.com/'><b>NAMA MENU</b></a></li>
<li><a href='http://mymijie.blogspot.com/><b>NAMA MENU</b></a></li>
<li><a href='http://mymijie.blogspot.com/><b>NAMA MENU</b></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="https://sites.google.com/site/jquery01/jquery.spasticNav.js"></script>
<script type="text/javascript">
$('#lava-lamp').spasticNav();
</script>
Step 4 : Klik Preview untuk lihat hasilnya. Semoga berjaya..;)
P/S : -
1 - Pastikan anda add a gadget/paste kod pada bahagian header.
2 - Untuk menukar warna tab menu cari kod ni #AE0000; .
3 - Untuk menukar warna background menu cari kod ni #E4E2E2; .
4 - Untuk menukar width menu, jika size menu terlalu besar @ pendek, cari kod ni width : 970px;
5 - Tukar href(link) kepada link untuk menu tersebut dan tukar NAMA MENU kepada nama pilihan anda sendiri.
OK, done.. Jika ada masalah.. Boleh komen dibawah, Insyaallah mijie akan bantu jika ada kesuntukan masa..
** Lagi tutorial disini..
If You Like This Post, Share it With Your Friends & Peers
0 komentar:
Posting Komentar