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

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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmorZyxM2HQbbCKaF9rq04CrCQ-J4Ebx9mRxccCRUu956lLyhmBdyDZM9Mij9IsMX3JoxbDW2LjZS9mEpECVwatLsKGo8cGWNKi1kfaGSZpUZXdsLcQEAW7lcD6MRRtePd0VVbAdMTxQo/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

Post:  Botões Sociais com lindo efeito de transição – Versão 2