Ola Leitores! Hoje irei vos ensinar um tutorial bem legal, no mesmo estarei ensinando como adicionar botoes de redes sociais no seu Blog com um lindo efeito de transicao.Inserindo no Blog1. No menu do Blog, clique em Layout 2. Em seguida clique em Adicionar um Gadget3. Escolha a opcao HTML/JavaScript4. De um titulo ao Gadget5. E no campo do Gadget adicione o seguinte codigo:<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>Atencao: Os links em Negrito, voce substituira pelo link do mesmo..Demo:http://tecnoblogoficina.blogspot.com.br/Pronto Galera, espero que tenham gostado, qualquer duvida nao deixem de comentar ai :D.Abracos! ARTIGO ATUALIZADO - 06/02/2013 - AS 18:36Creditos: Jackson SoaresPost: Botoes Sociais com lindo efeito de transicao Versao 2 Ola Galera! Acho que estranharam o extenso tempo em que o Tecnoblog ficou tanto tempo sem artigos como sempre e desatualizacoes, bem continue lendo o artigo e saiba mais sobre oque causou esse "transtorno".Bom pessoal, ultimamente quando minhas ferias acabaram eu dei procedencia aos estudos em uma escola de periodo integral, eu martelei pensamentos ao ponto em que a carga horaria nao seria pesada, mas em compensacao ao meu ensino fundamental a carga horaria e triplicada a tradicional e devido a isso estava totalmente sem tempo para o blog, estou cursando o curso de informatica e pretendo aumentar meus conhecimentos na programacao web, so que tem seus contras, fiquei ate preocupado em ter que pensar em