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ó!

Artigos recentes

Linkem me:

Related Posts with Thumbnails
Google