Menu Horizontal com Efeitos no Blogger usando CSS

Criar um menu horizontal para usar no blog algo fcil 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 botes 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 idias e cdigos
simples que j publicamos anteriormente em tutoriais como:
Formatao Especial nos Textos das Postagens
Fazer Menu com Imagens ao lado dos Links
O que vamos fazer reunir algumas dessas tcnicas para criar um menu
mais bonito e com aparncia sofisticada, mas vamos aos cdigos do menu
horizontal, entre na pagina layout do seu blog, clique em adicionar gadget,
escolha a opo HTML/javascript e cole o cdigo abaixo:
<style type="text/css">
.menu a{font-size:12pt;padding-top:5px; padding-bottom:4px;display:
inline-block;width:198px;text-align:center;color: #000;background-image:
url(endereo da imagem);}.menu a:hover {background-image: url(endereo
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>
Editar e colocar os links no menu horizontal
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 - endereo da pagina
Ajuda para Blogueiros - Texto que aparece ao passar o mouse sobre o link

Dicas para Blogs - Texto que aparece no menu

No pule linhas entre os links, pois alguns navegadores podem dar erro no
alinhamento por causa disso, ou seja, escreva o cdigo inteiro como se
fosse apenas uma linha.
Personalizar o layout e aparncia do menu (editar os Estilos CSS)
A imagem arredondada do menu e o fundo degrade na verdade so
imagens de fundo e tambm 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 cdigo das
imagem dos botes:
background-image: url(endereo da imagem);
Essas so as imagens que usamos:

Em qualquer uma das duas poderamos 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 grtis - 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 boto e
margens, veja abaixo:
font-size:12pt; - Tamanho da fonte dos links do menu
padding-top:5px; padding-bottom:4px; - espao acima e abaixo do link
dentro do boto
width:198px; - largura do boto
text-align:center; - alinhamento do texto
color: #000; - cor do link
Veja aqui mais informaes sobre: Alterar cores dos links - CSS Lembramos
que essas configuraes 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 no h
espao suficiente onde colocou o gadget, ou seja, o menu tem 900px de
largura e seu blog tem 850px ento 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 tambm sobre: Diferena entre Margin e Padding
Apesar de ser um pouco complicado montar esse cdigo, fazer as imagens e

acertar toda a aparncia dele depois disso na hora de trocar os links no

precisar mais mexer nos cdigos CSS e s trocar o link na primeira parte
do cdigo (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.