Menu Horizontal com Efeitos no Blogger usando CSS

Menu Horizontal com Efeitos no Blogger usando CSS

✪ Ver Comentários...

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.

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çãoHTML/javascript e cole o código 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(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>

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 - 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.

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

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.

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.