Menu Horizontal com Efeitos no Blogger usando CSS
Criar um menu horizontal para usar no blog é algo fácil de fazer usando os estilos CSS, mas existem muitas coisas que podemos usar para personalizar e colocar efeitos interessantes neste menu com links um do lado do outro como, por exemplo, usar imagens de fundo para criar efeito de botões ou até mesmo colocar um menu com movimentos usando gifs animados.
Pode parecer um trabalho complicado criar um menu com bons estilos visuais, mas neste tutorial vamos usar apenas algumas idéias e códigos simples que já publicamos anteriormente em tutoriais como:
Formatação Especial nos Textos das Postagens
Fazer Menu com Imagens ao lado dos Links
O que vamos fazer é reunir algumas dessas técnicas para criar um menu mais bonito e com aparência sofisticada, mas vamos aos códigos do menu horizontal, entre na pagina layout do seu blog, clique em adicionar gadget, escolha a opção HTML/javascript e cole o código abaixo:
Para inserir os links do seu blog no menu apenas observe o modelo abaixo e troque conforme desejar:
<a href="http://www.dicasparablogs.com.br/" title="Ajuda para Blogueiros">Dicas para Blogs</a>
http://www.dicasparablogs.com.br - endereço da pagina
Ajuda para Blogueiros - Texto que aparece ao passar o mouse sobre o link
Dicas para Blogs - Texto que aparece no menu
Não pule linhas entre os links, pois alguns navegadores podem dar erro no alinhamento por causa disso, ou seja, escreva o código inteiro como se fosse apenas uma linha.
Personalizar o layout e aparência do menu (editar os Estilos CSS)
A imagem arredondada do menu e o fundo degrade na verdade são imagens de fundo e também o efeito ao passar o mouse sobre os links do menu é uma imagem de fundo. O estilo ".menu a" é a aparencia do menu e ".menu a:hover" é quando passa o mouse sobre o link. Veja o código das imagem dos botões:
background-image: url(endereço da imagem);
Essas são as imagens que usamos:
Em qualquer uma das duas poderíamos usar um gif animado para fazer qualquer feito com imagens você só precisa achar ou fazer uma imagem para usar no menu, veja alguns links para ajuda a criar ou editar imagens:
Programa para editar imagem ou fotos grátis - Editores de Imagens
Site para Fazer Imagens Online e Criar Banners com Efeitos
Depois que fizer as imagens você só precisa ajustar as larguras do botão e margens, veja abaixo:
font-size:12pt; - Tamanho da fonte dos links do menu
padding-top:5px; padding-bottom:4px; - espaço acima e abaixo do link dentro do botão
width:198px; - largura do botão
text-align:center; - alinhamento do texto
color: #000; - cor do link
Veja aqui mais informações sobre: Alterar cores dos links - CSS Lembramos que essas configurações vale para as duas partes do CSS ou seja para o laytou do menu e o efeito de quando o mouse passa sobre ele.
Um problema comum neste tipo de menu é um item ficar embaixo em vez de todos ficarem lado a lado normalmente esse problema é porque não há espaço suficiente onde colocou o gadget, ou seja, o menu tem 900px de largura e seu blog tem 850px então um item vai para a linha de baixo. Mas por outro lado isso pode ser útil caso queria fazer um menu com duas linhas de itens. Leia também sobre: Diferença entre Margin e Padding
Apesar de ser um pouco complicado montar esse código, fazer as imagens e acertar toda a aparência dele depois disso na hora de trocar os links não precisará mais mexer nos códigos CSS e só trocará o link na primeira parte do código (editar os links do menu horizontal). Justamente por isso esse tipo de menu é melhor do que alguns feitos com imagens para cada item. Esperamos que gostem e aproveitem essa dica sobre menu horizontal.
Pode parecer um trabalho complicado criar um menu com bons estilos visuais, mas neste tutorial vamos usar apenas algumas idéias e códigos simples que já publicamos anteriormente em tutoriais como:
Formatação Especial nos Textos das Postagens
Fazer Menu com Imagens ao lado dos Links
O que vamos fazer é reunir algumas dessas técnicas para criar um menu mais bonito e com aparência sofisticada, mas vamos aos códigos do menu horizontal, entre na pagina layout do seu blog, clique em adicionar gadget, escolha a opção HTML/javascript e cole o código abaixo:
<style type="text/css">Editar e colocar os links no menu horizontal
.menu a{font-size:12pt;padding-top:5px; padding-bottom:4px;display: inline-block;width:198px;text-align:center;color: #000;background-image: url(endereço da imagem);}.menu a:hover {background-image: url(endereço da imagem)}</style><div class="menu">
<a href="http://www.dicasparablogs.com.br/" title="Ajuda para Blogueiros">Dicas para Blogs</a><a href="http://www.dicasparablogs.com.br/" title="Ajuda para Blogueiros">Dicas para Blogs</a><a href="http://www.dicasparablogs.com.br/" title="Ajuda para Blogueiros">Dicas para Blogs</a><a href="http://www.dicasparablogs.com.br/" title="Ajuda para Blogueiros">Dicas para Blogs</a><a href="http://www.dicasparablogs.com.br/" title="Ajuda para Blogueiros">Dicas para Blogs</a></div>
Para inserir os links do seu blog no menu apenas observe o modelo abaixo e troque conforme desejar:
<a href="http://www.dicasparablogs.com.br/" title="Ajuda para Blogueiros">Dicas para Blogs</a>
http://www.dicasparablogs.com.br - endereço da pagina
Ajuda para Blogueiros - Texto que aparece ao passar o mouse sobre o link
Dicas para Blogs - Texto que aparece no menu
Não pule linhas entre os links, pois alguns navegadores podem dar erro no alinhamento por causa disso, ou seja, escreva o código inteiro como se fosse apenas uma linha.
Personalizar o layout e aparência do menu (editar os Estilos CSS)
A imagem arredondada do menu e o fundo degrade na verdade são imagens de fundo e também o efeito ao passar o mouse sobre os links do menu é uma imagem de fundo. O estilo ".menu a" é a aparencia do menu e ".menu a:hover" é quando passa o mouse sobre o link. Veja o código das imagem dos botões:
background-image: url(endereço da imagem);
Essas são as imagens que usamos:
Em qualquer uma das duas poderíamos usar um gif animado para fazer qualquer feito com imagens você só precisa achar ou fazer uma imagem para usar no menu, veja alguns links para ajuda a criar ou editar imagens:
Programa para editar imagem ou fotos grátis - Editores de Imagens
Site para Fazer Imagens Online e Criar Banners com Efeitos
Depois que fizer as imagens você só precisa ajustar as larguras do botão e margens, veja abaixo:
font-size:12pt; - Tamanho da fonte dos links do menu
padding-top:5px; padding-bottom:4px; - espaço acima e abaixo do link dentro do botão
width:198px; - largura do botão
text-align:center; - alinhamento do texto
color: #000; - cor do link
Veja aqui mais informações sobre: Alterar cores dos links - CSS Lembramos que essas configurações vale para as duas partes do CSS ou seja para o laytou do menu e o efeito de quando o mouse passa sobre ele.
Um problema comum neste tipo de menu é um item ficar embaixo em vez de todos ficarem lado a lado normalmente esse problema é porque não há espaço suficiente onde colocou o gadget, ou seja, o menu tem 900px de largura e seu blog tem 850px então um item vai para a linha de baixo. Mas por outro lado isso pode ser útil caso queria fazer um menu com duas linhas de itens. Leia também sobre: Diferença entre Margin e Padding
Apesar de ser um pouco complicado montar esse código, fazer as imagens e acertar toda a aparência dele depois disso na hora de trocar os links não precisará mais mexer nos códigos CSS e só trocará o link na primeira parte do código (editar os links do menu horizontal). Justamente por isso esse tipo de menu é melhor do que alguns feitos com imagens para cada item. Esperamos que gostem e aproveitem essa dica sobre menu horizontal.
Marcadores: Acessórios, Códigos, Colocar Menu, CSS, Personalizar