27 de jul de 2011

Menu com efeito hover

Coloque em seu blog um menu com efeito hover. Ao passar o mouse por cima, os botões do menu trocam de cor.


Veja AQUI o exemplo.

Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo.


Vá até "Elementos de página", se usar o antigo Blogger ou em "Layout", se usar o novo Blogger, clique em "Adicionar gadget" e clique em HTML/Javascript" e cole o  código abaixo fazendo as modificações necessárias.






<style>
/* menu hover--------------------------------------------- */
#menuhover {
display: inline;

}

#menuhover li {
list-style-type:none;padding: 0 2px;
}

#blogger1 {
background: url(http://2.bp.blogspot.com/_BaCxSD9NFn8/S3C-A8ggT6I/AAAAAAAABPU/4DNs2JPg3ew/s1600/bloggerc.png) no-repeat;
width: 70px;
height: 70px;
float: left;
clear: right;
}

#feedbourner1 {
background: url(http://4.bp.blogspot.com/_BaCxSD9NFn8/S3C-L0HGdXI/AAAAAAAABPs/kXpZirBI9Hg/s1600/feedburnerc.png) no-repeat;
width: 70px;
height: 70px;
float: left;
clear: right;
}

#twitter1 {
background: url(http://1.bp.blogspot.com/_BaCxSD9NFn8/S3C-pyr384I/AAAAAAAABQM/BoeY3vrTjRs/s1600/twitterc.png) no-repeat;
width: 70px;
height: 70px;
float: left;
clear: right;
}

#facebook1 {
background: url(http://4.bp.blogspot.com/_BaCxSD9NFn8/S3C-Lvvjn2I/AAAAAAAABPc/9-9QGVwWIpQ/s1600/facebookc.png) no-repeat;
width: 70px;
height: 70px;
float: left;
clear: right;
}

#blogblogs1 {
background: url(http://4.bp.blogspot.com/_BaCxSD9NFn8/S3C-A76yB9I/AAAAAAAABPM/GIWCOx-NZXE/s1600/blogblogsc.png) no-repeat;
width: 70px;
height: 70px;
float: left;
clear: right;
}

#technoraty1 {
background: url(http://2.bp.blogspot.com/_BaCxSD9NFn8/S3C-p410AzI/AAAAAAAABQE/VSbWkzAeuyc/s1600/technoratic.png) no-repeat;
width: 70px;
height: 70px;
float: left;
clear: right;
}

#orkut1{
background: url(http://4.bp.blogspot.com/_BaCxSD9NFn8/S3C-darM78I/AAAAAAAABP8/YhRQz4g0tl4/s1600/orkutc.png) no-repeat;
width: 70px;
height: 70px;
float: left;
clear: right;
}

#youtube1{
background: url(http://1.bp.blogspot.com/-ec-GPpE3cSs/TjCYsrLEt8I/AAAAAAAAFyc/uVR6nAsyuJc/s1600/youtubec.png) no-repeat;
width: 70px;
height: 70px;
float: left;
clear: right;
}

#favoritos1{
background: url(http://4.bp.blogspot.com/_BaCxSD9NFn8/S3C-Lvb_GXI/AAAAAAAABPk/KPPxDuQFNNs/s1600/favoritesc.png) no-repeat;
width: 70px;
height: 70px;
float: left;
clear: right;
}

/*hover*/

#blogger1:hover {
background: url(http://1.bp.blogspot.com/_BaCxSD9NFn8/S3C-Aw1Pi1I/AAAAAAAABPQ/0ckUW3EopWE/s1600/blogger.png)  0 0 no-repeat;
}

#feedbourner1:hover {
background: url(http://4.bp.blogspot.com/_BaCxSD9NFn8/S3C-LvTzR3I/AAAAAAAABPo/aiXPzXzhSQY/s1600/feedburner.png)  0 0 no-repeat;
}

#twitter1:hover {
background: url(http://2.bp.blogspot.com/_BaCxSD9NFn8/S3C-p-dg-mI/AAAAAAAABQI/S6uKYvq4T5c/s1600/twitter.png) 0 0 no-repeat;
}

#facebook1:hover {
background: url(http://3.bp.blogspot.com/_BaCxSD9NFn8/S3C-BJQQ5oI/AAAAAAAABPY/VmZRCCbYs3Y/s1600/facebook.png) 0 0 no-repeat;
}

#blogblogs1:hover {
background: url(http://1.bp.blogspot.com/_BaCxSD9NFn8/S3C-AuyoWFI/AAAAAAAABPI/15X2R9nyUCo/s1600/blogblogs.png) 0 0 no-repeat;
}


#technoraty1:hover {
background: url(http://1.bp.blogspot.com/_BaCxSD9NFn8/S3C-dZmZdqI/AAAAAAAABQA/moheJRvbhos/s1600/technorati.png) 0 0 no-repeat;
}

#orkut1:hover {
background: url(http://2.bp.blogspot.com/_BaCxSD9NFn8/S3C-deQGG7I/AAAAAAAABP4/iYTOHKsvBpk/s1600/orkut.png) 0 0 no-repeat;
}

#youtube1:hover {
background: url(http://2.bp.blogspot.com/_BaCxSD9NFn8/S3C-qKxnx4I/AAAAAAAABQQ/1CmlvSCrCAM/s1600/youtube.png) 0 0 no-repeat;
}

#favoritos1:hover {
background: url(http://4.bp.blogspot.com/_BaCxSD9NFn8/S3C-Lna7CbI/AAAAAAAABPg/jO7gU-KYArw/s1600/favorites.png) 0 0 no-repeat;
}

</style>

<div id='menuhover'>
<ul>

<li><a href="#" id='blogger1'target="_blank" title="Home"></a></li>

<li><a href="ENDEREÇO DO FEEDBOURNE" id='feedbourner1'target="_blank" title="FeedBorner"></a></li>

<li><a href="ENDEREÇO DO TWITTER" id='twitter1'target="_blank" title="Siga-me no Twitter"></a></li>

<li><a href="ENDEREÇO DO FACEBOOK" id='facebook1'target="_blank" title="Facebook"></a></li>

<li><a href="ENDEREÇO DO BLOGBLOGS" id='blogblogs1'target="_blank" title="BlogBlogs"></a></li>

<li><a href="ENDEREÇO DO TECHNORATY" id='technoraty1'target="_blank" title="Thecnoraty"></a></li>

<li><a href="ENDEREÇO DO ORKUT" id='orkut1'target="_blank" title="Orkut"></a></li>

<li><a href="ENDEREÇO DO YOU TUBE" id='youtube1'target="_blank" title="YouTube"></a></li>

<li><a href="ENDEREÇO DA PÁGINA COM FAVORITOS" id='favoritos1'target="_blank" title="Favoritos"></a></li>

</ul>

</div>


Se quiser mudar as imagens, mude todos os códigos que estão na cor azul e na cor amarela sendo que:

CÓDIGO NA COR AZUL: imagem que se vê
CÓDIGO NA COR AMARELA: imagem que se vê ao passar o mouse
CÓDIGO NA COR VERMELHA: troque pelo endereço de seus links



Os de cor verde, são os botões com efeito hover( ao passar o mouse) NÃO MEXA, É APENAS PARA SE ORIENTAR

O código em rosa indica onde e qual é o botão específico. NÃO MEXA, É APENAS PARA SE ORIENTAR

14 comentários:

  1. Consegui inserir mas, não consegui fazer funcionar... Coleu os endereços e não funcionou.... o que faço ?

    ResponderExcluir
  2. Eu não estou conseguindo colocar como link

    ResponderExcluir
  3. Nossa, totalmente sem noção, não é bem assim que se faz um menu hover, qual é a vantagem da imagem carregar so na hora que passa o mouse e em conexões ruins demorar muito até trocar ela? na verdade tem imagem até demais ai.

    Bom no caso estava quase certo, você pega essas duas imagens, a colorida e a em preto em branco, vai no Photoshop e deixa elas uma do lado da outra, faça isso com das elas, então coloque elas no estado normal ai, mas na hora do css mande aparecer o tamanho de uma imagem apenas. Para ela que seja visualizado apenas a imagem colorida. Agora olhe ai o seu efeito hover no qual foi copiado de algum outro site que você não deu conta de fazer.
    Bom nele veja que a imagem depois de ser colocada tem "0 0".
    no caso ai é facil, ou deleta ele ou manda o background aparecer como right se a imagem era left

    para ficar mais fácil deixar aqui um exemplo.

    #link{
    background: url(link-da-imagem) left no-repeat;
    width: 70px;
    height: 70px;
    display:block;
    }

    #link:hover {
    background-position:right;
    }

    agora sim quando clicar na imagem ela vai apenas mudar de lugar.
    deixe uma div cobrindo todo o menu que você fez com o float left

    no caso ficaria

    #menuhover a {
    float: left;
    }

    assim os itens irão ficar alinhados.
    para finalizar precisa arrumar esse html enorme que ficou também
    no caso pode ficar assim:

    a id='link' href="ENDEREÇO DOS FAVORITOS" target="_blank" title="Favoritos"

    você pode colocar o id direto no link, sem a necessidade de todo aquele html
    não fechei ele ai certinho porque se não o comentário não é aceito.

    bom é isso caso não entendeu entre em contato que faço o menu todo
    mas do jeito que esta é uma vergonha deixar o tutorial assim com um menu tão pesado e com erros de formatação, além de html a mais que não tem função para nada.

    ResponderExcluir
    Respostas
    1. Obrigada pela sua preocupação e intenção em ajudar mas, não sei se percebeu, este blog tem uma linguagem muito, muito simples com imagens, tudo pra facilitar mesmo para o leitor. O que pretendi com este menu foi dar aos leigos e iniciantes, como em quase tudo que faço, a oportunidade de, caso queira, mudar as imagens do menu por qualquer outra encontrada na net. É verdade, é bem mais fácil da outra forma, para quem entende um pouco, já para quem não entende nada... Abraços.

      Excluir
  4. Não consegui fazer com que nenhum link funcionasse, e agora? Me que pese a crítica do gênio ali em cima, o fato de poder apenas copiar e colar é ótimo, parabéns.

    ResponderExcluir
  5. Elke amei o post *--* ta muito legal mesmo, não ligue pra esse claudio, mais eu só queria saber como faço para mudar as imagens, será que você poderia acrescentar isso no seu tutorial? Obrigada, o tutorial mim ajudou muuuito mesmo bj

    ResponderExcluir
  6. @madame chair já está feito, com esquema de cores, bem explicadinho. Atenção para não apagar os parenteses e nada além do que estiver marcado. Beijos.

    ResponderExcluir
  7. Elke obrigada mesmo, mais agora meu problema é outro, ao colocar o código nem percebi que não funciono :-( mesmo quando coloco os links, eles não funcionam, ou seja eu coloquei o link do meu blog ali, mais quando clico na imagem não acontece nada, o que ta acontecendo? Outras pessoas tiveram o mesmo problema, será que você não errou em nada no código?

    ResponderExcluir
  8. Oie é que como faço para fzer um hover normal, mais em favoritos colocar o codigo de add nos favoritos nein da certooo

    ResponderExcluir
  9. Amei o tutorial, exatamente o que eu procurava, cada botão com uma imagem distinta! Nada a ver o que o Claudio falou, eu já vi um tutorial tipo o dele e não rola pra nós que somos leigos, o seu é muito melhor.

    O único problema no meu menu é que está ficando um fundo cinza por baixo das imagens, o mesmo fundo do menu do blogger, sabe? Parece que o código "puxou" esse fundo do template. Você sabe como faço pra tirar? Obrigada! Bjs

    ResponderExcluir
  10. Ah e também está abrindo os links numa nova guia, queria que abrisse na página do próprio blog.

    ResponderExcluir

A legislação brasileira prevê a possibilidade de se responsabilizar o blogueiro pelo conteúdo do blog, inclusive quanto a comentários; portanto, o autor deste blog reserva a si o direito de não publicar comentários que firam a lei, a ética ou quaisquer outros princípios da boa convivência. Não serão aceitos comentários anônimos ou que envolvam crimes de calúnia, ofensa, falsidade ideológica, multiplicidade de nomes para um mesmo IP ou invasão de privacidade pessoal / familiar a qualquer pessoa. Comentários sobre assuntos que não são tratados aqui também poderão ser suprimidos, bem como comentários com links. Este é um espaço público e coletivo e merece ser mantido limpo para o bem-estar de todos nós.


Copyright © Templates e Acessórios |
Design by Elke di Barros | Tecnologia do Blogger
    Twitter Facebook Google + YouTube