Menu Horizontal Com CSS3 Para Blog!

► +A +/- -A
image

Olá leitor, Neste tutorial de hoje venho trazendo como colocar um menu, bem elegante, no seu blog, este menu combina muito com blogs com a mesma cor dele, e além de tudo é um menu de qualidade.
O menu é todo acinzentado, com efeito hover amarelo, e possui a o seu redor, um belo efeito que da a impressão dele estar embutido em seu blog.

Então vamos começar o tutorial:

Começando o Tutorial:
1. Acesse o painel do seu Blog e clique na Guia Modelo.
2. Depois segure as teclas CTRL+F e procure por:

]]></b:skin>

3. E ACIMA do código citado acima adicione o seguinte código:


nav  { 
        display: block; 
        width: 100%; 
        overflow: hidden; 
}


nav ul { 
        margin: 80px 0 20px 0; 
        padding: .7em; 
        float: left; 
        list-style: none; 
        background: #444; 
        background: rgba(0,0,0,.2); 
        -moz-border-radius: .5em; 
        -webkit-border-radius: .5em; 
        border-radius: .5em; 
        -moz-box-shadow: 0 1px 0 rgba(255,255,255,.2), 0 2px 1px rgba(0,0,0,.8) inset; 
        -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.2), 0 2px 1px rgba(0,0,0,.8) inset; 
        box-shadow: 0 1px 0 rgba(255,255,255,.2), 0 2px 1px rgba(0,0,0,.8) inset; 
}


nav li { 
        float:left; 
}


nav a { 
        float:left; 
        padding: .8em 1.5em; 
        text-decoration: none; 
        color: #555; 
        text-shadow: 0 1px 0 rgba(255,255,255,.5); 
        font: bold 1.1em/1 'trebuchet MS', Arial, Helvetica; 
        letter-spacing: 1px; 
        text-transform: uppercase; 
        border-width: 1px; 
        border-style: solid; 
        border-color: #fff #ccc #999 #eee; 
        background: #c1c1c1; 
        background: -moz-linear-gradient(#f5f5f5, #c1c1c1); 
        background: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#c1c1c1)); 
        background: -webkit-linear-gradient(#f5f5f5, #c1c1c1); 
        background: -o-linear-gradient(#f5f5f5, #c1c1c1); 
        background: -ms-linear-gradient(#f5f5f5, #c1c1c1); 
        background: linear-gradient(#f5f5f5, #c1c1c1); 
}


nav a:hover, nav a:focus { 
        outline: 0; 
        color: #fff; 
        text-shadow: 0 1px 0 rgba(0,0,0,.2); 
        background: #fac754; 
        background: -moz-linear-gradient(#fac754, #f8ac00); 
        background: -webkit-gradient(linear, left top, left bottom, from(#fac754), to(#f8ac00)); 
        background: -webkit-linear-gradient(#fac754, #f8ac00); 
        background: -o-linear-gradient(#fac754, #f8ac00); 
        background: -ms-linear-gradient(#fac754, #f8ac00); 
        background: linear-gradient(#fac754, #f8ac00); 
}


nav a:active { 
        -moz-box-shadow: 0 0 2px 2px rgba(0,0,0,.3) inset; 
        -webkit-box-shadow: 0 0 2px 2px rgba(0,0,0,.3) inset; 
        box-shadow: 0 0 2px 2px rgba(0,0,0,.3) inset; 
}


nav li:first-child a { 
        border-left: 0; 
        -moz-border-radius: 4px 0 0 4px; 
        -webkit-border-radius: 4px 0 0 4px; 
        border-radius: 4px 0 0 4px; 
}


nav li:last-child a { 
        border-right: 0; 
        -moz-border-radius: 0 4px 4px 0; 
        -webkit-border-radius: 0 4px 4px 0; 
        border-radius: 0 4px 4px 0; 
}



4. Agora clique em salvar.


Instalando o menu no blog:
1. Em Seguida clique em Salvar Modelo.
2. Depois clique na Guia Layout. ( Elementos da pagina )
3. Na lateral do seu Modelo, clique em Adicionar Gadget.
4. Selecione o Gadget tipo "HTML/Javascript",
5. E no Conteúdo do Gadget, cole o seguinte código:




<nav>
    <ul>
         <li><a href="LINK">ITEM</a></li>  
         <li><a href="LINK">ITEM</a></li>  
         <li><a href="LINK">ITEM</a></li>  
         <li><a href="LINK">ITEM</a></li>  
         <li><a href="LINK">ITEM</a></li>
    </ul>
</nav>

6. Pronto agora adicione o menu no local que mais desejar!
                              
                                                                                          Menu e design por: códigos blog



► Postagens Relacionadas:

2 Comentários

Daniel disse...

Olá, gostei de seu blog, com dicas muito legais. Tenho uma dúvida, como faço para destacar os comentários do autor no Disqus? Como o seu, que diferente dos outros comentários que é cinza, o seu é azul claro. Grato pela atenção.

29 de outubro de 2011 19:19
Caio disse...

Olá Daniel, Já estou providenciando um tutorial de como destacar os comentários do autor no Disqus :)

31 de outubro de 2011 07:46

Postar um comentário

Seu comentário é bem vindo, mas leia antes de comentar...
→ Se os comentários conter palavrões, xingamentos, ofensas ao autor ou qualquer pessoa, não serão publicados!
→ Não Contiver outros sites!
→ Não conversar com comentários!
→ Não conter propaganda!
→ Visite o nosso termos de uso
Obrigado e volte sempre!