Voltei + Menu sublinhado


Holaa!!!
Depois de algumas semanas sem postar, finalmente resolvi tomar vergonha na cara e aparecer por aqui. Sei que ter um blog exige muito mais do simplesmente saber postar e ter responsabilidade, acima de tudo nós precisamos de tempo, para poder elaborar os materiais e até mesmo o que escrever nos posts, mas como eu vinha dizendo anteriormente eu estava lotada de trabalhos, e apenas agora acho que as coisas vão começar a aliviar aqui pro meu lado.
Na ultima enquete que fiz aqui no blog, vi que vocês preferem que eu poste coisinhas para blog de vocês, e hoje vim trazer um tuto de um menu muito usado na web que ao passar o mouse ele fica com um risco em baixo, como esse:


Para colocar no blog é bem simples.
Primeiro você tem que colocar a fonte que vai usar no menu, como não se está mais hospedando fontes no tumbrl eu ainda não pesquisei como vou fazer font-face  então eu indico por enquanto pra usarem as fontes, feinhas do google mesmo.
A fonte que eu coloquei nesse menu é a Questrial, então vá no seu codigo html e antes de </head> cole
<link href='http://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
agora você vai antes de ]]></b:skin>  e cole
*{margin:0; padding:0;}

#menuunder  {width:990px; margin:auto; margin-top:30px;}
#menuunder ul li {display:inline; margin-right:20px;}
#menuunder ul li a {color:#ff0060; text-decoration:none; font-family:questrial; font-size:20px;}
#menu ul li a:hover {border-bottom:3px solid #990033; padding-bottom:3px; color:#ff0060;}
Explicando : Em negrito é a cor da fonte e em sublinhado é a cor do underline .

Agora em layout, adicione um html /java script e cole o seguinte codigo

<div id="menuunder">
<ul>
<li><a href="LINK">Início</a></li>
<li><a href="LINK">About</a></li>
<li><a href="LINK">contatos</a></li>
</ul>
Onde está LINK você coloca o link da página ~lógico u.u
Para cada página nova você coloca
<li><a href="LINK">Nome da página</a></li>.
Espero que vocês tenham entendido, qualquer coisa é só perguntar aqui nos coments.
Falando nisso, eu estou meio que enjoada desse layou, me dá até desanimo de postar na hora em que vejo, então vou vou ver se arrumo um tempinho pra trocar nosso layout.

Por hojê é só, até mais gente!

3 comentários:

  1. Respostas
    1. Obrigado Samira, que bom que você gostou. ^^

      Excluir
  2. Amei o tutorial , talvez irei usar no layout que estou criando !! :33

    ~ Bjooks ~

    ResponderExcluir

Deixe seu Link que eu retribuo :))