Blog Cik Emma: Tutorial : Cara Pasang Navigation Menu

17 February 2011

Tutorial : Cara Pasang Navigation Menu

Tutorial nih khas untuk kak Nad.

1st Step
Pegi Dashbord> Design> Page Element > Add a gadget(betul2 di bawah header)

Letak code ini

<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
430 px 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="h ttp://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>


Background boleh di tukar contoh

background:
#32312E

Link tu tukarkan kepada link korang sendiri ok.
Kalau dah rasa puas hati terus save.. Done.
 
Copyright© All Right Reserved by Cik Emma