sexta-feira, 4 de novembro de 2011

3 menus de redes sociais com efeito CSS3

Olá! Seja bem vindo a mais um tutorial aqui no cblogger. Neste pequeno artigo irei disponibilizar 3 menus com botões de redes sociais bem legais para seu blog. O menu possui alguns efeitos em CSS3, bem como o efeito de rotação e opacidade. Apresentam botões das principais redes sociais da internet mais conhecidas até então, como o Facebook, Twitter e a mais nova rede social, o Google Plus. Veja:

Menu de redes sociais Ver demonstração

Para instalar um desses no seu blog, apenas copie um dos códigos abaixo com seus respectivos códigos. Depois vá em “Layout” –> “Adicionar um gadget” –> “HTML/Javascript” e cole-os, em seguida faça as devidas alterações conforme destacado de vermelho, após isso, salve.

image

<style>

.minhasredes1 {
padding: 15px;
}

.minhasredes1 a {
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
opacity: 0.5;
}

.minhasredes1 a:hover {
opacity: 1;
}

.minhasredes1 img {
-webkit-transition:All 0.2s ease;
-moz-transition:All 0.2s ease;
}
.minhasredes1 img:hover {
-webkit-transform: rotate(10deg) scale(1.2) skew(1deg) translate(0px);
}

</style>

<div class="minhasredes1">
<a href="URL PERFIL TWITTER" title="Siga-me no Twitter"><img src="http://dl.dropbox.com/u/47734544/Icones/RS%201/twitter-icon.png"/></a>
<a href="URL PERFIL FACEBOOK" title="Me adicione no Facebook"><img src="http://dl.dropbox.com/u/47734544/Icones/RS%201/facebook-icon.png"/></a>
<a href="URL PERFIL GOOGLE PLUS"  title="Me circule no Google Plus"><img src="http://dl.dropbox.com/u/47734544/Icones/RS%201/googleplus-icon.png"/></a>
<a href="URL CANAL YOUTUBE" title="Inscreva-se no nosso canal"><img src="http://dl.dropbox.com/u/47734544/Icones/RS%201/youtube-icon.png"/></a>
</div>

image

<style>

.minhasredes2 {
padding: 15px;
}

.minhasredes2 a {
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
opacity: 0.5;
}

.minhasredes2 a:hover {
opacity: 1;
}

.minhasredes2 img {
-webkit-transition:All 0.2s ease;
-moz-transition:All 0.2s ease;
}


.minhasredes2 img:hover {
-webkit-transform: rotate(10deg) scale(1.2) skew(1deg) translate(0px);
}

</style>

<div class="minhasredes2">
<a href="URL PERFIL TWITTER" title="Siga-me no Twitter"><img src="http://dl.dropbox.com/u/47734544/Icones/RS%202/Twitter-icon.png"/></a>
<a href="URL PERFIL FACEBOOK" title="Me adicione no Facebook"><img src="http://dl.dropbox.com/u/47734544/Icones/RS%202/Facebook-icon.png"/></a>
<a href="URL PERFIL GOOGLE PLUS" title="Me circule no Google Plus"><img src="http://dl.dropbox.com/u/47734544/Icones/RS%202/Google-Plus-icon.png"/></a>
<a href="URL FEED" title="Assine nosso Feed"><img src="http://dl.dropbox.com/u/47734544/Icones/RS%202/RSS-icon.png"/></a>
</div>

image

<style>

.minhasredes3 {
padding: 15px;
}

.minhasredes3 a {
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
opacity: 0.5;
}

.minhasredes3 a:hover {
opacity: 1;
}

.minhasredes3 img {
-webkit-transition:All 0.2s ease;
-moz-transition:All 0.2s ease;
}

</style>

<div class="minhasredes3">
<a href="URL PERFIL TWITTER" title="Siga-me no Twitter"><img src="http://dl.dropbox.com/u/47734544/Icones/RS%203/twitter-icon.png"/></a>
<a href="URL PERFIL FACEBOOK"title="Me adicione no Facebook"><img src="http://dl.dropbox.com/u/47734544/Icones/RS%203/facebook-icon.png"/></a>
<a href="URL FEED"title="Assine nosso Feed"><img src="http://dl.dropbox.com/u/47734544/Icones/RS%203/rss-icon.png"/></a>
</div>

Simples e útil, esses são os menus desenvolvidos por min, espero que tenham gostado. E se poder, comente. :D.

Ícones por Icon Archive

Marcadores: , , , , , , , ,

10 Comentários:

Às 4 de novembro de 2011 12:00 , Blogger Gardenya Barbosa disse...

Muito bom, já to usando. Valeu

 
Às 5 de novembro de 2011 16:04 , Blogger viciados em blog disse...

eu queria saber como colocar um menu como o desse site http://www.maisfollowers.com.br o menu que esta do lado da pagina que quando posisiona o mause em cima ele expande pro lado

 
Às 6 de novembro de 2011 20:10 , Blogger Luiz Guilherme disse...

Vlw mto bom

 
Às 18 de novembro de 2011 23:27 , Blogger Le Parti Eventos disse...

Ficou muito legal, mas queria te perguntar uma coisa: tem como por exemplo, quando a gente clicar encima do icone do face, ele abrir outra pagina e não sair do nosso blog?
obrigada!

 
Às 20 de novembro de 2011 21:49 , Blogger Códigos Blogger disse...

Tem sim, apenas acrescente:

target="blank"

depois de:

<a href="URL PERFIL FACEBOOK"

Exemplo:

<a href="URL PERFIL FACEBOOK" target="blank" title="Me adicione no Facebook"><img src="http://dl.dropbox.com/u/47734544/Icones/RS%203/facebook-icon.png"/></a>

 
Às 5 de dezembro de 2011 21:27 , Blogger Pensamentos Personalizados disse...

Muito obrigada;estava louca procurando saber onde e como instalava e so aqui é que encontrei.Vcs estão de parabéns e outra vez MUITO OBRIGADA!!!

 
Às 7 de janeiro de 2012 21:12 , Blogger Richard disse...

hehe

 
Às 17 de janeiro de 2012 23:31 , Blogger :*: קя๏ƒª ઝáイi α :*: disse...

Super legal!
Obrigada...
Deu certinho...
HOje mesmo tinha pegado a dica de outro blog, e qdo coloquei desconfigurou todinho ele... perdi um monte de coisas...
a sua dica, foi maravilhosa...

 
Às 20 de outubro de 2012 13:30 , Blogger noel. disse...

só tem um problema, aqui no chrome a imagem quando passa o mouse ela tem o efeito normal e alem disso ela expnade de tamanho e da uma inclinada. fica bem legal...mas no firefox ela so muda de cor mesmo, dao expande e nem inclina é normal??

 
Às 9 de setembro de 2014 00:33 , Blogger Sâmia Vida disse...

Eu fiz o menu como ensinado porém mesmo colocando o endereço da rede social normal quando tentar clicar no blog redireciona pra uma pagina com o endereço do blog na frente. Por exemplo: www.tombosdavida.com/www.facebook.com
Ou seja, não abre a pagina da rede social em si, como posso resolver essa situação?

 

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