Botões Redes Sociais com efeito de Transição

► +A +/- -A
Olá Leitores! Hoje irei vos ensinar um tutorial bem legal, no mesmo estarei ensinando como adicionar botões de redes sociais no seu Blog com um lindo efeito de transição.

Inserindo no Blog

1. No menu do Blog, clique em Layout 
2. Em seguida clique em Adicionar um Gadget
3. Escolha a opção HTML/JavaScript
4. Dê um título ao Gadget
5. E no campo do Gadget adicione o seguinte código:

<div class='widget-content'>
<style type="text/css"> #buttoncb ul {margin:10px 15px;padding:0px;} #buttoncb ul li {list-style-type: none;padding: 0;background: transparent;margin: 0;} #buttoncb ul li a{background: url('http://2.bp.blogspot.com/-JKB0aVYaIW0/UC-oBl8NXxI/AAAAAAAAEYA/IbgyikdkM5A/s1600/blsocial12.png') 0 0 no-repeat; height:48px;padding-left: 48px;cursor: pointer;text-decoration: none;border-radius:0.5em;-moz-border-radius:0.5em;-webkit-border-radius:0.5em;-o-border-radius:0.5em;display:inline-block;margin:0;width: 220px;} #buttoncb ul li:hover span {margin-left: 10px;opacity: 1;} #buttoncb ul li span {border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; color: white; margin-left: 100px; opacity: 0; position: relative; text-align: center; width: auto; padding: 5px 10px; transition: all 0.3s cubic-bezier(1,2,0,0) 0s; -moz-transition: all 0.3s cubic-bezier(1,2,0,0) 0s; -webkit-transition: all 0.3s cubic-bezier(1,2,0,0) 0s; top: 14px;} #buttoncb span{padding:5px;background:#000;color:#fff;margin:0 5px;} #buttoncb .fb span {background-color: #0853A3;} #buttoncb .twiter span {background-color: #00B1F7;} #buttoncb .google span {background-color: #9E0202;} #buttoncb .pint span {background-color: #D00;} #buttoncb .linkedin span {background-color: #005075;} #buttoncb .devart span {background-color: #4C7A4A;} #buttoncb .ytube span {background-color: #A00;} #buttoncb .rss span {background-color: #EC5601;} #buttoncb a.fb { background-position: 0 -384px;} #buttoncb a.twiter { background-position: 0 -432px;} #buttoncb a.google { background-position: 0 -480px;} #buttoncb a.pint { background-position: 0 -528px;} #buttoncb a.linkedin { background-position: 0 -576px;} #buttoncb a.devart { background-position: 0 -624px;} #buttoncb a.ytube { background-position: 0 -672px;} #buttoncb a.rss { background-position: 0 -720px;} #buttoncb a.fb:hover { background-position: 0 0px;color: #0374DD;} #buttoncb a.twiter:hover { background-position: 0 -48px;color: #00A1DF;} #buttoncb a.google:hover { background-position: 0 -96px;color: #A70000;} #buttoncb a.pint:hover { background-position: 0 -144px;color: #C00;} #buttoncb a.linkedin:hover { background-position: 0 -192px;color: #005772;} #buttoncb a.devart:hover { background-position: 0 -240px;color: #4C7A4A;} #buttoncb a.ytube:hover { background-position: 0 -288px;color: #A00;} #buttoncb a.rss:hover { background-position: 0 -336px;color: #EC5601;} </style> <div id="buttoncb"> <ul> <li ><a href="Link Facebook Anda" class="icon fb" ><span>Facebook</span></a></li> <li ><a href="Link Twitter Anda" class="icon twiter" ><span>Twitter</span></a></li> <li ><a href="Link Google+ Anda" class="icon google" ><span>Google+</span></a></li> <li ><a href="Link Pinterest Anda" class="icon pint" ><span>Pinterest</span></a></li> <li ><a href="Link Linkedin Anda" class="icon linkedin" ><span>LinkedIn</span></a></li> <li ><a href="Link Deviant Art Anda" class="icon devart" ><span>DeviantArt</span></a></li> <li ><a href="Link Youtube Anda" class="icon ytube" ><span>Youtube</span></a></li> <li ><a href="Link RSS Anda" class="icon rss" ><span>RSS</span></a></li> </ul> </div>
</div>

Atenção: Os links em Negrito, você substituirá pelo link do mesmo..


Demo:

http://tecnoblogoficina.blogspot.com.br/

Pronto Galera, espero que tenham gostado, qualquer duvida não deixem de comentar aí :D.
Abraços! 


ARTIGO ATUALIZADO - 06/02/2013 - ÁS 18:36




Créditos: Jackson Soares

► Postagens Relacionadas:

8 Comentários

Dj incognito disse...

pena que nao tem uma demo.

1 de fevereiro de 2013 20:29
Caio Vinicius disse...

Irei postar!

1 de fevereiro de 2013 20:40
Juliano disse...

precisa colocar link para demonstração ou foto os artigos são excelente mas vc peca neste ponto

5 de fevereiro de 2013 18:57
Caio Vinicius disse...

Verifique a atualização.

6 de fevereiro de 2013 19:45
Caio Vinicius disse...

Pessoal, ocorreu uma mudança devido á uns conflitos que causou uns erros.. devido a isso, atualizei o post juntamente com um link para Demo, confiram!

6 de fevereiro de 2013 19:46
Herlan Santos disse...

Olá Caio.


Gostei muito, irei utilizar em um de meus blogs, parabéns pela postagem.


Abraços!

14 de fevereiro de 2013 15:06
Caio Vinicius disse...

Olá Herlan! Fico Grato por ter gostado do tutorial, e obrigado pela participação também :D Abraços.

15 de fevereiro de 2013 20:40
Rafael disse...

Boa noite gostei Muito dos botoes sou novato na area de edções e gostaria de saber com vc se os botões dá pra ficar um ao lado do outro na orizontal e nao na vertical. abraços parabens pela postagem.

9 de maio de 2013 18:52

Postar um comentário

Seu comentário é bem vindo, mas leia antes de comentar...
→ Se os comentários conter palavrões, xingamentos, ofensas ao autor ou qualquer pessoa, não serão publicados!
→ Não Contiver outros sites!
→ Não conversar com comentários!
→ Não conter propaganda!
→ Visite o nosso termos de uso
Obrigado e volte sempre!