Tutorial --> Navigation Menu Bar




Hyep... hu.. dah lama x buat tutor..
bosan.. but.. ramailah yang
suruh tira buatkan blog dia org..
sebab tu la bila tira nak buat je, 'tira, boleh buatkan
blog?' kalau kata tak boleh majuk nanti..
Oklah, kita back to the point k?
    penat tau tira cari ni..
    nak buat menu bar cam tira?









(tekan gambar kalau nak tengok dgn labih jelas)

* Pergi Dashboard --> Design --> Edit HTML
* dah ke? ok then tekan ctrl + f or F3
* cari ni :

   ]]></b:skin>




* dah jumpa? copy code ni pulak n paste di ATAS
   code yang anda cari tadi.


#menubar1 {
margin: 0;
height:33px;
padding: 3px 6px 2px;
background: #F778A1url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEFf6SL05mWb8ix97W3YW5Ht41txv55YRu_F-RIHBmu0gJm9x_NvsluYwLevs91NQnZZfcVsJHh1T4qIJpOqBPZw69WimWG9JsSylZB-pyReVoeGUswM37thA3qiw-CNWNiPlwmDIu0ZLK/s320/gradient.png) repeat-x 0 -110px;
line-height: 100%;
border-radius: 0em;
-webkit-border-radius: 0em;
-moz-border-radius: 4px;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0, .4);
-moz-box-shadow: 0 1px 3px rgba(0,0,0, .4);
}
#menubar1 li {
margin: 0 5px;
padding: 0 0 8px;
float: left;
position: relative;
list-style: none;
}
/* main level link */
#menubar1 a {
font: bold 12px Arial;
color: #fff;
text-decoration: none;
display: block;
padding: 8px 20px;
margin: 0;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
text-shadow: 0 1px 1px rgba(0,0,0, .3);
}
#menubar1 a:hover {
background: #000;
color: #000;
}
/* main level link hover */
#menubar1 .current a, #menubar1 li:hover > a {
background: #EE82EEurl(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEFf6SL05mWb8ix97W3YW5Ht41txv55YRu_F-RIHBmu0gJm9x_NvsluYwLevs91NQnZZfcVsJHh1T4qIJpOqBPZw69WimWG9JsSylZB-pyReVoeGUswM37thA3qiw-CNWNiPlwmDIu0ZLK/s320/gradient.png) repeat-x 0 -40px;
color: #404040;
border-top: solid 1px #f8f8f8;
-webkit-box-shadow: 0 1px 1px rgba(0,0,0, .2);
-moz-box-shadow: 0 1px 1px rgba(0,0,0, .2);
box-shadow: 0 1px 1px rgba(0,0,0, .2);
text-shadow: 0 1px 0 rgba(255,255,255, 1);
}
/* dropdown */
#menubar1 li:hover > ul {
display: block;
}
/* level 2 list */
#menubar1 ul {
font: normal 12px Arial;
color:#000000;
text-align:left;
display: none;
margin: 0;
padding: 2px 2px 2px 2px;
width: 185px;
position: absolute;
top: 35px;
left: 0;
background: #9EDEFAurl(http://3.bp.blogspot.com/_LZtXSNcp76A/TBJ9sMqebeI/
AAAAAAAABGI/9LYh5N58KYw/s320/gradient.png) repeat-x 0 0;

border: solid 1px #b4b4b4;
-webkit-border-radius: 10px;
-mozborder-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0, .3);
-moz-box-shadow: 0 1px 3px rgba(0,0,0, .3);
box-shadow: 0 1px 3px rgba(0,0,0, .3);
}

Dah siap? save
lepas tu pergi ke
page element - add a gadget -Html/javascript
paste kat bawah ni kalau nak tukar warna 
dah ke??
yg warna kuning tu tukar dengan warna kat SINI!!


<ul id='menubar1'>
<li class='current'><a href='Url anda'>Tajuk 1</a></li>
<li><a href='Url anda'>Tajuk 2</a></li>
<li><a href='Url anda'>Tajuk 3</a></li>

*yg warna kuning n biru tu korang kene buat page dulu..
  tak tahu camne nak wat page? click HERE

tapi kalau nak buat menu bar kene buat tiga
page tau..

then, tukarkan yg warna kuning
ke URL page anda..

yg warna biru tu tajuk page yg anda dah buat k.

da siap?? save  lah..

kalau x fhm sila comment

Tiada ulasan: