Tutorial ♥Blog - Menu Navbar

Nova Ilustração >w<

Yoo Bolitos >ww<

Tão bons \o/ ? Eu bem u3u, que acham da nova ilustração \o, eu tava no ps e tava a fazer a ilustração, e apeteceu-me fazer uma nova, essa tá um pouco parecida à outra, mas retirei e coloquei outras personalizações ^^

Hoje vim vos ensinar a colocar o Menu Navbar >w<

Leia Mais >w<

Créditos:  ♥

Então vamos lá \o\

Vamos em Modelo>HTML

E fazem CTRL+F e procuram por ]]></b:skin> e em cima colam o seguinte codigo:

.bar_top {
width: 100%;
height: 31px;
background: #47a9d7; /* cor do fundo */
}
.menu_barrax {
float: center;
margin: 0;
padding: 0;
}
.menu_barrax li {
float: left;
list-style: none;
font-size: 10px;
font-weight: bold;
font-family: Verdana, Arial;
text-transform: uppercase;
border-right: 4px none #dddddd; /* deixe essa cor */
margin: 0 0 0 10px;
padding: 9px 0px 0px 0px;
text-shadow:0 1px #267ca4;  /* sombra das letras */
}
.menu_barrax li a{
background: #47a9d7;  /* cor do fundo, deixe a mesma que o de cima */
padding: 10px;
color: #fff;  /* cor da letra*/
text-decoration: none;
-webkit-transition:all 0.4s ease;
-o-transition:all 0.4s ease;
-moz-transition:all 0.4s ease;
transition:all 0.4s ease;
}
.menu_barrax li a:hover {
text-decoration: none;
color: #4aaddc;  /* cor da fonte em hover*/
background: #1b93cd;  /* cor do fundo em hover */
-webkit-transition:all 0.4s ease;
-o-transition:all 0.4s ease;
-moz-transition:all 0.4s ease;
transition:all 0.4s ease;
text-shadow:0 1px #0d1c27;  /*cor da sombra do texto em hover */
}
.transit {
-webkit-transition:all 0.4s ease;
-o-transition:all 0.4s ease;
-moz-transition:all 0.4s ease;
transition:all 0.4s ease;
}
.bar_topd {
width: 900px;
margin: 0 auto;
}

Só personalizarem as cores, de resto não mexam só se souberem mexer com html e códigos~
Agora vamos procurar por </head> e cole :

<center>
<div class='bar_top'>
<div class='bar_topd'>
<ul class='menu_barrax'>
<li><a href='SEU LINK' title='Volte para a homepage'>Inicio</a></li>
<li><a href='SEU LINK' title='TITULO'>NOME</a></li>
<li><a href='SEU LINK' title='TITULO'>NOME</a></li>
<li><a href='SEU LINK' title='TITULO '>NOME</a></li>
<li><a href='SEU LINK' title='TITULO'>NOME</a></li>
<li><a href='SEU LINK' title='TITULO'>NOME-</a></li>
</ul></div></div></center>

Espero que tenhas percebido >w< alguma dúvida só comentar ^^
Kissus >w<~