quinta-feira, 10 de junho de 2010

Menu de Redes sociais com efeito de zoom

Esse é um menu muito legal, que quando o cursor fica sobre o botão , ele aumenta, dando um efeito de zoom muito elegante.

Vai ficar assim.



A instalação é extremamente fácil.

Copie o código abaixo.

<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.bubblewrap{
list-style-type:none;
margin:0;
padding:0;
}

.bubblewrap li{
display:inline;
width: 65px;
height:60px;
}

.bubblewrap li img{
width: 55px; /* width of each image.*/
height: 60px; /* height of each image.*/
border:0;
margin-right: 12px; /*spacing between each image*/
-webkit-transition:-webkit-transform 0.1s ease-in; /*animate transform property */
-o-transition:-o-transform 0.1s ease-in; /*animate transform property in Opera */
}

.bubblewrap li img:hover{
-moz-transform:scale(1.8); /*scale up image 1.8x*/
-webkit-transform:scale(1.8);
-o-transform:scale(1.8);
}

</style>

<ul class="bubblewrap">
<li><a href="LINK"><img src="http://dynamicdrive.com/cssexamples/media/stumbleupon.png" title="Add to Stumbleupon" /></a></li>
<li><a href="LINK"><img src="http://dynamicdrive.com/cssexamples/media/facebook.png" title="Add to Facebook" /></a></li>
<li><a href="LINK"><img src="http://dynamicdrive.com/cssexamples/media/digg.png" title="Add to Digg" /></a></li>
<li><a href="LINK"><img src="http://dynamicdrive.com/cssexamples/media/twitter.png" title="Add to Twitter" /></a></li>
<li><a href="LINK"><img src="http://dynamicdrive.com/cssexamples/media/rss.png" title="Add RSS Feed" /></a></li>
</ul>
 


Vá em Layout - Elementos da página - Adicionar um gadget = HTML/Javascript e cole o código

Depois modifique...

Nas partes destacadas de azul , coloque a url da imagem para o botão desejado.Ou deixe como está.

Nas partes destacadas de rosa é o título do botão.

LINK - O link de destino do botão

E para adicionar um novo item, copie a parte destacada de verde e cole abaixo dela mesma, fazendo as devidas modificações acima também.

Feito isso, Salve!

Marcadores: , , , , ,

5 Comentários:

Às 28 de outubro de 2010 08:31 , Blogger Plg disse...

Olá!
Coloquei este código na sidebar do meu blog mas a template faz com que os icons apareçam na vertical. Gostaria de colocar este menu com os icons na horizontal, como posso fazer issa alteração na template?
Obrigado,
Paulo

 
Às 6 de dezembro de 2010 17:13 , Blogger Blog do José Alisson! disse...

muito bom esse post gostei,mesmo
me ajusou pra caramba.....ah eu quero saber como colocar ícone do orkut ná página,entre em contato comigo em http://www.blogdojose-alisson.blogspot.com

 
Às 24 de maio de 2011 16:41 , Blogger Roselia Lopes disse...

Ola otimo o seu post, me ajudou muito
simples e pratico.
vlw.

 
Às 23 de setembro de 2011 13:37 , Blogger tata-nadaver disse...

Nossa o meu muito obrigada, estou procurando algo assim já faz um bom tempo.

 
Às 18 de novembro de 2014 16:22 , Blogger Danilo J Fernandes disse...

Muito obrigado por ter disponibilizado esses códigos, há tempos estava precisando deste efeito para usar em algumas imagens das quais são de extrema importância em meu blog.

Valeu mesmo :), abraço!! Sucesso aew \o/
Obrigado!!

 

Postar um comentário

Se você gostou deste artigo deixe um comentário!

Duvidas ou sugestões comentem aqui! =D
*Não insultar autor ou leitores da postagens
*Não pedir parceria por comentários
*Não publicar spam ou similar.

Assinar Postar comentários [Atom]

Links para esta postagem:

Criar um link

<< Página inicial