Pesquisa personalizada

terça-feira, 10 de dezembro de 2013

Como criar um menu horizontal simples no Blogger





Hoje, um tutorial bem fácil. Como fazer um menu horizontal usando uma nova tag do HTML 5 chamada de nav. A construção do código HTML envolve criação de listas com links para navegação em seu blog. Eu uso esse recurso neste blog e no Dorgas on Fire. E milagre: a tag nav funciona no IEca!!!

Abaixo, um exemplo com 5 links, no caso de páginas estáticas que você possa criar em seu blog(lembrando que ao criar as páginas estáticas, o próprio Blogger oferece opções de menu, seja horizontal ou vertical). Você pode também criar links para posts específicos que você queira destacar no blog.

Coloque o código abaixo num gadget HTML/Javascript, indo em Painel de controle >> Layout >> Adicionar um gadget abaixo ou acima do cabeçalho(como você desejar):

<nav id="menu">
<ul>
<li><a href="URL DO SEU BLOG">Início</a></li>
<li><a href="URL DO LINK" target="_blank">Sobre</a></li>
<li><a href="URL DO LINK" target="_blank">Contato</a></li>
<li><a href="URL DO LINK" target="_blank">Mapa do blog</a></li>
<li><a href="URL DO LINK" target="_blank">Parcerias</a></li>
</ul>
</nav>

O atributo target="_blank" tem a função de abrir o link em uma outra aba de seu navegador, a fim de que o leitor não saia da página inicial.

Agora vamos aos estilos em CSS:

/* -----   MENU   -----  */
#menu ul {
padding: 0;
margin: 0px;
float: left;
width: 100%;
background-color: #EEEEEE; <!--Coloque aqui a cor de fundo do menu-->
list-style:none;
}
#menu ul li { display: inline; }
#menu ul li a {
padding: 2px 10px;
float:left;
background-color:#EEEEEE; <!--Coloque aqui a cor de fundo dos ítens-->
color: #000000; <!--Coloque aqui a cor da fonte-->
text-decoration: none;
font: Arial; <!--Coloque aqui o tipo da fonte-->
font-size: 80%; <!--Coloque aqui o tamanho da fonte-->
font-weight: bold; <!--Coloque aqui o peso da fonte, no caso está em negrito. Use italic para itálico ou normal para normal-->
}
#menu ul li a:hover {
background-color:#CCCCCC; <!--Coloque aqui a cor de fundo dos ítens quando o mouse passa sobre os ítens-->
color: #000000; <!--Coloque aqui a cor da fonte quando o mouse passa sobre os ítens, pode ser a mesma de antes-->
}

Os textos entre <!-- ... --> que estão em azul são comentários e que podem ser apagados.

O código CSS pode ser colocado de três maneiras:

1 - Através do designer de Modelo, indo em painel de controle >> Modelo >> Personalizar >> Avançado >> Role até achar "Adicionar CSS", copie e cole o código CSS na caixa de texto:

Método recomendável.

2 - Ou direto no código do seu template (nesse caso é recomendável antes, fazer um back up do seu modelo, caso algo dê errado) , indo em painel de controle >> Modelo >> Editar HTML >> clicando na seta para abrir os estilos do seu blog, que fica entre <b:skin>...</b:skin>:

Só use esse método se você tem o mínimo de conhecimento em layouts do Blogger

Cole o código CSS antes de ]]</b:skin>:

É fácil, mas requer atenção!

3 - Você pode também colocar os códigos HTML e CSS dentro de um gadget HTML/javascript dessa maneira:

<style>/* -----   MENU   -----  */
#menu ul {
padding: 0;
margin: 0px;
float: left;
width: 100%;
background-color: #EEEEEE;
list-style:none;
}
#menu ul li { display: inline; }
#menu ul li a {
padding: 2px 10px;
float:left;
background-color:#EEEEEE;
color: #000000;
text-decoration: none;
font: Arial;
font-size: 100%;
font-weight: bold;
}
#menu ul li a:hover {
background-color:#CCCCCC;
color: #000000;
}
</style>

<nav id="menu">
<ul>
<li><a href="URL DO SEU BLOG">Início</a></li>
<li><a href="URL DO LINK" target="_blank">Sobre</a></li>
<li><a href="URL DO LINK" target="_blank">Contato</a></li>
<li><a href="URL DO LINK" target="_blank">Mapa do blog</a></li>
<li><a href="URL DO LINK" target="_blank">Parcerias</a></li>
</ul>
</nav>

Eis como fica este menu:

Menu horizontal normal

Quando passa o mouse sobre um link


Et voilà! Temos um menu horizontal bem simples. Podemos estilizá-lo com bordas, sombras e outras coisas que o CSS3 possa nos oferecer, mas por ora é só!


Permalink:





Sobre o Autor:
Crazyseawolf Para saber mais sobre o autor deste blog, visite o seu perfil no Google+ ou este link . Para enviar uma mensagem, clique aqui . Para outras informações, leia o FAQ .



21 comentários :

  1. Não consigo inserir um menu no blogspot.com. Preciso de ajuda.
    Obrigada.

    ResponderExcluir
    Respostas
    1. Sara, fiz um tutorial bem simples e bem explicado. Se mesmo assim não está conseguindo, sugiro que contrate alguém para fazer isso para você.
      Mas se seguir todos os passos você consegue. :)

      Excluir
  2. faltou finalizar: " } "

    #menu ul li a:hover {
    background-color:#CCCCCC;
    color: #000000;}

    ResponderExcluir
  3. Ok. Já fiz o menu...como direciono as novas postagens e as já existentes para esses menus ?

    ResponderExcluir
  4. Não entendi o que você quer fazer. Um menu em um site serve para abrigar links que são estáticos ou alguma postagem que você acha importante e merece ser destacada. Não é para colocar todas as postagens que você fez e as novas que surgirão..
    Veja os meus menus aqui neste blog e no Dorgas on Fire como eles funcionam.

    ResponderExcluir
  5. Respostas
    1. Thássila, no código do menu o comprimento (width) está em 100%, isso significa que ele vai ficar do tamanho do corpo do seu layout, dentro de um container definido pelo seu template.

      Excluir
  6. Parabéns pelo post, super simples e de fácil compreensão :)
    Testei e funcionou direitinho, pretendo estiliza-lo pra ficar combinando melhor com o template, mas dependendo do layout nem precisa porque ele é super bonitinho.
    Muito obrigado por disponibiliza-lo, já salvei nos favoritos :)
    Abraços
    www.dezenoveprimaveras.com.br

    ResponderExcluir
  7. Aparecido,
    Bom dia.
    Onde posso estar errando... não consigo alterar a cor da fonte do menu?

    ResponderExcluir
    Respostas
    1. A cor é um código do tipo #EEEEEE, para alterar você tem que colocar o código da sua cor de preferência, que pode ser encontrado em http://www.flextool.com.br/tabela_cores.html

      Excluir
  8. Aparecido,
    Boa tarde.
    Instalei o código do menu e ficou tudo certinho até a hora de eu dar link.
    Criei páginas no blog e salvei com o mesmo nome que coloquei no menu. Todavia quando eu clico no menu o que abre é a página no editor e não ela já na internet.
    E também não consigo alterar a cor da fonte...
    Onde o burraldo está errando? hehe

    ResponderExcluir
    Respostas
    1. É complicado. Uma vírgula mal colocada, um espaço a mais já altera o código. Outro detalhe, você está colocando o link correto de cada página?

      Excluir

Pessoal, comentem, críticas e elogios serão bem aceitos. E eu respondo, posso demorar mas respondo. Esse velho lobo do mar tarda mas não falha!!!!

Leia antes a minha Política de Comentários.

Se quiser deixar o link de uma postagem sua, utilize o código abaixo trocando o que está escrito em letra maiúscula:

<p><abbr><em><strong>SEU NOME</strong> - último post do blog... <a href="<strong>LINK-DA-POSTAGEM</strong>"><strong>TÍTULO DA POSTAGEM</strong></a></em></abbr><p>

Related Posts with Thumbnails
Google
 
 
Template Denim, criado por Darren Delaye, customizado por Crazyseawolf.