Tutorial - Menu redondo


Oi gente. 
Primeiro eu quero pedir desculpas por não postar nada ontem. O motivo: CÓLICA!
Como pedido de desculpas hoje eu vou tentar postar o máximo que eu conseguir. E vou começar essa "maratona" com um tutorial de menu.
É um menu simples mais que eu acho MUITO fofo.
Esse menu está sendo muito usado por varias pessoas no flogvip. Eu mesma já tive um flogvip e usava muito esse menu, foi de lá que eu peguei o código.

Para ver o tutorial clique em Leia mais e let's go!



Vá em Editar HTML aperte ctrl + f e procure por ]]></b:skin> acima disso que você acabou de procurar cole esse codigo:

/* -- BARRA -- */
#barra {
cursor: crosshair;
margin-top: -10px;
height: 60px;
color: #ffffff;
}
#barra .tubo {
text-align: center;
padding: 10px;
width: 50%;
height: 20px;
background: transparent;
}
#barra .fvbarraf {
padding: 3px;
color: #c1b2cd;
font-family: calibri;
font-size: 11px;
height: 15px;
border: 2px solid #cbb6db;
background: #ded0e9;
text-align: center;
text-decoration: none;
position: relative;
text-align: center;}
#barra .fvbarra a:link, #barra .fvbarra a:visited ,#barra .fvbarra a:active {
align: center;
-moz-border-radius:20px;
-o-border-radius: 20px;
border-radius: 20px;
border: 0px solid #cbaeae;
color: #e8def0;
font: 10px calibri;
font-style: normal;
font-weight: bold;
line-height: 12px;
text-align: center;
cursor: crosshair;
padding: 10px;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 0px;
background: #d5c7e0;
margin: 5px;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-webkit-box-shadow: 0px 0px 5px #baadc5;
-moz-box-shadow: 0px 0px 5px #baadc5;
box-shadow: 0px 0px 5px #baadc5;}
#barra .fvbarra a:hover {
align: center;
-moz-border-radius: 20px;
-o-border-radius: 20px;
border-radius: 20px;
border: 0px solid #cbaeae;
color: #c1b2cd;
font: 10px calibri;
font-style: normal;
font-weight: bold;
line-height: 12px;
text-align: center;
cursor: crosshair;
padding: 12px;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 0px;
background: #d5c7e0;
margin: 5px;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-webkit-box-shadow: 0px 0px 5px #baadc5;
-moz-box-shadow: 0px 0px 5px #baadc5;
box-shadow: 0px 0px 5px #baadc5;}
#barra .fvbarra {font: normal 10px Verdana; color: transparent;} #barra .barraimg {opacity:.0;} 


Clique em Salvar modelo. Agora vá em Layout e adicione um gadget de Html/JavaScript e cole esse código:


<div id="barra">
<table border="0" cellspacing="0" cellpadding="0" class="tubo">
  <tr>
    <td width="210" class="fvbarra"> <a href="SEU_LINK" class="fvbarra">Nome que vai aparecer</a>  </td>
  </tr>
</table></div>

Edite ele com os links que você quer que apareçam no menu. Se quiser adicionar mais barrinhas é só colocar esse código:

<a href="http://flogvip.net/painel_enviar_foto.php" class="fvbarra">postar foto</a> 
Coloque o código antes do </td>

Se repassar crédite. ^-^

Nenhum comentário:

Postar um comentário