04 fevereiro 2014

Tutorial: Menu de Tags

Oláa!
Eu estou completamente cansada, tive que fazer uma pesquisa de 17 páginas para Português, e olha que o ano letivo mal começou. Mas dei um tempinho de vir aqui para apresentar um tutorial, graças a falta de novidades. Bom, eu nunca apresentei menus aqui, sempre foram tutoriais mais simples, mas, acho que já chegou a hora de pelo menos apresentar um. Este é bem simples e fofo, realmente adoro ele. Neste atual layout, estou o usando para as tags. Abaixo, uma preview.

Claro que você pode alterar as cores de acordo com seu gosto. Vamos aprender como fazer?


Vá em modelo >> Editar HTML >> Ctrl + F e procure por:

]]></b:skin>
Quando achar, cole acima da tag:

.fortutos a { 
display : block;
font-family: 'silkscreen';
margin: 1px;
text-transform: uppercase;
font-size: 10px;
color:#fff; /* cor da fonte /*
border-left:6px solid #97b1c1; /* cor da borda */
background:#c8d6de; /* cor do fundo do menu */
text-shadow: 1px 1px 1px #b0c4cf; /* cor da sombra do texto */
padding: 5px 10px 3px 3px;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;}
.fortutos a:hover{
padding-left: 13px;
border-left:6px solid #668ca4;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;}
Agora, coloque num gadget HTML/ JavaScript o qual você quer que o menu apareça:

<div class="fortutos">
<a href="LINK"> NOME </a></div>
<div class="fortutos">
<a href="LINK"> NOME </a></div>
<div class="fortutos">
<a href="LINK"> NOME </a></div>
<div class="fortutos">
<a href="LINK"> NOME </a></div>
<div class="fortutos">
<a href="LINK"> NOME </a></div>

Espero que tenham gostado do tutorial :) O código foi tirado do Sweet of Cherry, mas o editei para ficar mais fácil compreende-lo.

Beijos

4 comentários:

  1. Caraca '0' Eu estou com muita dor nas coxas, e nas costas também, por causa da educação física ¬¬ Eu vou mover minha perna dói pra caramba :c

    Que bom que ensinou a fazer esse menu, achei ele tão lindo *0*

    htmlandresources.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Eu praticamente não faço nada, sério, sou péssima em educação fisica. Sei como é :C Melhoras.
      Obrigada :D haha

      beijão!

      Excluir
  2. Oi...
    Meu nome é Lúcia e adorei este menu. Vai ser fácil fazê-lo, copiando e colando os códigos que você já deixou mastigados.

    Eu tenho um site de jogos e pensei em fazer os posts relacionados (como estes posts relacionados ) com este tipo de menu.

    Estou extremamente grata,
    Beijos,
    Lúcia

    ResponderExcluir
    Respostas
    1. Olá!
      Obrigada, fico feliz que tenha sido útil. Iria realmente ficar bem legal.
      Grata pelo comentário!

      beijão!

      Excluir

.Não gostou do blog? Cada um tem o direito de gostar ou não gostar, claro, mas expresse isso de modo civilizado, sem palavrão e ofensas.
.Não tenho nada contra o famoso ''seguindo, segue de volta?'' desde que você comente pelo menos algo sobre o post.
.Eu sempre comento de volta, e se gostar do blog, sigo.
.Viu alguma coisa sua aqui? Me contate e discutiremos o assunto.
Obrigada pelo comentário!