♦ Tutorial ~ Menu Barrinha


Hey Rilakkumas
Perceberam que eu passei mais de 15 dias longe do blog e que comecei a ver Game of Thrones e estava assistindo filmes de terror e por isso não pude vir aqui? Talvez sim, talvez não.
  Brincadeira pessoal, não foi só por causa disso que eu passei um tempinho fora do blog, foi por outros motivos também, um deles foi preguiça, o outro mais tempo para mim e mais outros que eu não quero nomear, mas só essas besteirinhas não me deixariam tão afastados de vocês, seus pandacórnios (roubando a fala da Lovelly). Durante esse tempo eu recebi umas inspirações e já comecei a criar o novo layout do blog, que na minha humilde opinião, está muito perfeito.
  Acho que não se esqueceram que eu sou responsáveis pelos tutoriais e efeitos em html aqui do blog, então hoje eu trago um dos meus menus preferidos, é o menu barrinha, muitas pessoas usam mas do jeito errado, esse menu é uma barrinha completa e bem colorida, bem, quem quiser conhece-la continue lendo a postagem. E eu também fiz um PREVIEW. Let's go.


Vá em MODELO >> EDITAR HTML e procure por ]]></b:skin>
E cole este código em cima dele.
.estatus {background: #E75977; color:#fff; font-family:'Ubuntu Mono'; padding:3px 5px 3px 5px; text-shadow:1px 1px 0px #D83A5A; margin-top:5px; text-align:center; text-transform: uppercase;border-radius: 4px; cursor:pointer; width:300px; font-size:11px;}
.estatus a{color: #fff !important; padding:3px 2px 3px 2px; text-shadow:1px 1px 0px #D83A5A;-webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease;}
.estatus a:hover{text-shadow:1px 1px 0px #D33051; background:#5C526D; padding:3px 2px 3px 2px; color:#fff;}
  No .estatus você editara o background: #E75977; que é a cor da barrinha, e em .estatus a:hover você mudará o background:#5C526D; que a cor do link quando passamos o mouse, apenas isso. Eu amo esse menu por ser tão simples.

E onde você quiser que o menu apareça cole o código de baixo.
Aqui tem 5 links, mas se você quiser mais é só colar mais alguns <a href="LINK">NOME</a> +  depois do <center><div class="estatus">, apenas isso e nada mais.
<center><div class="estatus">
<a href="LINK">NOME</a> +
<a href="LINK">NOME</a> +
<a href="LINK">NOME</a> +
<a href="LINK">NOME</a> +
<a href="LINK">NOME</a>
</div></center>
Simples não? AQUI temos uma tabela de cores para você usar se quiser, espero que tenham gostado e bye bye.


5 comentários:

  1. awn que fofo *-*

    htmlandresources.blogspot.com

    ResponderExcluir
  2. Que fofo esse menu, se aumentar o tamanho dele acho que dá ate pra usar embaixo do cabeçalho ^^

    ResponderExcluir
  3. Adorei o menu, vou ver se consigo usar no meu próximo Lay ^^

    http://breathingnewthings.blogspot.com.br/

    ResponderExcluir
  4. eu amei mas no meu fico pequeno me ajuda?

    ResponderExcluir
  5. eu amei mas no meu fico pequeno me ajuda?

    ResponderExcluir