tutorial : membuat horizontal menu bar (Jquery lava-lamp)

halooo sume :) entry ini direquest ulih Bidadari Garang . *sigh gerun denga name die . jom kita mulakan sebelom dia FIRE aku dengan kuasa sakti dia :P hahaha tak lawak . . .

entry statik ( stand alone pages )

sebelom membuat menu bar korang mestilah membuat page statik (stand alone pages) tapi ini optional je . aku suka buad supaya boleh sumbat semua link² yang suda post . baru la korang senang carik kan ? oke untok buad page statik sila ke

 blogger >> dashboard >> new post >> posting >> edit pages >> new page

sila la taip pape yang korang suka dan click publish post . btw , korang cume boleh buad sampai 10 page statik je

memandangkan lepas ni nak buad menu bar pulak , sila lah pilih no gadget . SIAP

Jquery lava-lamp menu bar

credit : maribinablog

  pegi Blogger >> Dashboard >> Design >> Page Elements >> Add a Gadget >> HTML/Javascript

  copy ( CTRL + C ) dan paste ( CTRL + V ) code ini dekat dalam kotak tadi

<style>
#container {
width: 100%;
margin: 0px 0px;
padding: 0px 0px 40px 10px;
}

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: #0b2b61;
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 5px #011331;
-webkit-box-shadow: 2px 3px 5px #011331;
}

#lava-lamp {
background: #32312E;
float: left;
border: 1px solid #BDBCBA;
margin: 0px 0px 15px;
padding: 8px 430px 10px 0px;
}

#lava-lamp li {
float: left;
list-style: none;
border-right: 1px solid #4a4a4a;
border-left: 0px solid #4a4a4a;
}

#lava-lamp li a {
color: #DDDCD8;
text-shadow: 0 0px 1px #81807B;
position: relative;
z-index: 2;
float: left;
font-size: 13px;
font-family: arial, sans-serif;
font-weight: bold;
text-decoration: none;
padding: 0px 20px;
}
</style>

<div id="container">

<ul id="lava-lamp">
<li id="selected"><a href="http://link-di-sini.blogspot.com">Home</a></li>
<li><a href="http://link-di-sini.blogspot.com">About</a></li>
<li><a href="http://link-di-sini.blogspot.com">Blog</a></li>
<li><a href="http://link-di-sini.blogspot.com">More About My Portfolio</a></li>
<li><a href="http://link-di-sini.blogspot.com">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="https://sites.google.com/site/jquery01/jquery.spasticNav.js"></script>

<script type="text/javascript">
$('#lava-lamp').spasticNav();
</script>

NOTE :

tukar warna button : edit code warna MERAH
tukar warna background : edit code warna BIRU
tukar URL : edit code warna OREN ( optional : pakai URL statik page tadi )
tukar Tajuk : edit code warna HIJAU

tukar jarak background (sila rujuk gamba di atas) : edit code warna PURPLE

  click save . click and drag kotak tu dekat bawah header . preview dan save

like dan comment :)