Olá fofos! Hoje estou
muito feliz, pois minha internet voltou uhuuu!!!, mas triste também, pois a
Lorena disse que não vai mais poder postar aqui, pois ela vai ficar muito
ocupada. Eu te entendo Lô, vou pro 3º ano do Ensino Médio e também não sei se
vou conseguir postar diariamente no blog.
Mas vamos ao que
interessa:
Bem esse tutorial foi
a Fernanda dona do blog Meu SkateRosa que pediu, na verdade ela pediu um menu na navbar eu entendi como isso e
vou ensinar a vocês.
Primeiro vá em Modelo>> Editar HTML>> Aperte Ctrl+F
e procure por:
</head>
Abaixo dele cole o
seguinte:
<div class='bar_top'>
<div class='bar_topd'>
<ul class='menu_barrax'>
<li><a href='Link' title='Texto do tooltip'>Nome</a></li>
<li><a href='Link' title='Texto do tooltip'>Nome</a></li>
<li><a href='Link' title='Texto do tooltip'>Nome</a></li>
<li><a href='Link' title='Texto do tooltip'>Nome</a></li>
<li><a href='Link' title='Texto do tooltip'>Nome</a></li>
<li><a href='Link' title='Texto do tooltip'>Nome</a></li>
<li><a href='Link' title='Texto do tooltip'>Nome</a></li>
<li><a href='Link' title='Texto do tooltip'>Nome</a></li>
<li><a href='Link' title='Texto do tooltip'>Nome</a></li>
<li><a href='Link' title='Texto do tooltip'>Nome</a></li>
<li><a href='Link' title='Texto do tooltip'>Nome</a></li>
<li><a href='Link' title='Texto do tooltip'>Nome</a></li>
</ul></div></div>
Recomendo que mude
somente onde está em negrito.
Agora continuando no
HTML, procure por:
]]></b:skin>
Acima dele cole:
.bar_top {
width: 100%;
height: 31px;
background: #CORDABARRINHA;
Border-bottom: 10px none #F4D998;
}
.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;
margin: 0 0 0 10px;
padding: 9px 0px 0px 0px;
text-shadow:0 1px #CORDASOMBRA;
}
.menu_barrax li a{
background: #CORDOFUNDODOMENU;
padding: 10px;
color: #CORDAFONTE;
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: #CORDAFONTEHOVER;
background: #CORDOFUNDODOMENUHOVER;
-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 #CORDASOMBRAHOVER;
}
.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;
}
Mude o que for
preciso e salve!
Pronto já está pronto
seu menu.
Espero que gostem!!!
Créditos: Pequena Esfera