traduzido: "Saiba como se faz: "Social Media botoes sprites e transicoes de CSS3""Social Media botoes sprites e transicoes de CSS3"Isso foi perguntado muitos leitores deste blog, e sao os botoes para as redes sociais usam hoje em dia, e como prometido, e agora eu nao quero mais endividados, porque aqui vai.Estes botoes servem para ligar as suas redes sociais : Facebook , Twitter , Google+ , RSS Feed e assinatura de e-mail .coisa que muitos acham atraente e o efeito quando o cursor passa sobre eles, como o icone de movimentos se enquanto o fundo muda de cor.Este gadget vai ser visto em duas versoes, uma com cinco pequenos botoes alinhados horizontalmente, e um 4 botoes e alguns mais antigos alinhados em duas colunas. Eles sao feitos com sprites e transicoes CSS3. Ou as versoes que vao ser colocados em uma unica etapa, ou seja, atingindo ambos os estilos como a estrutura HTML dentro de um gadget, por que? preguica ao redor, mas quem . estilos postas em pratica o modelo que voce pode faze-lo sem qualquer problema , em seguida, para colocar em seu blog, ir paraDesign | Adicionar um Gadget | HTML / Javascript e cole o codigo la botoes que voce gosta.Esta e a primeira versao de 5 botoes.E este e o codigo que voce deve colar no seu gadget:<style>/* Botones de Redes Sociales - Ciudad Blogger */.social_bookmarks_container {width:100%;height:65px;padding:0;position:relative;}.social_bookmarks {position:relative;float:left;margin:0;padding:0;}.social_bookmarks li {margin:0 0 1px 1px;height:57px;width:57px;list-style:none;float:left;padding:0;-webkit-transition: all 0.4s ease-in-out;-moz-transition: all 0.4s ease-in-out;-o-transition: all 0.4s ease-in-out;-ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out;}.social_bookmarks li a {float:left;width:57px;line-height:24px;display: block;text-indent: -99999px;margin:0px;outline: none;padding:0;min-height:57px;height:100%;text-decoration:none;}.social_bookmarks .iconrss{background: #A4A4A4 url(//lh6.googleusercontent.com/-s8sIx3OX2WI/U4vC1nmgr0I/AAAAAAAALK4/W3Z3qXMwrCg/s114/icon-rss.png) top left no-repeat;}.social_bookmarks .iconrssmail{background: #BDBDBD url(//lh5.googleusercontent.com/-H4iUybdCAyU/U4vC1yQWu1I/AAAAAAAALLE/fTpR7eN4cIw/s114/icon-rssmail.png) top left no-repeat;}.social_bookmarks .icontwitter{background: #D8D8D8url(//lh6.googleusercontent.com/-4TshwJW7hIE/U4vC2JM25AI/AAAAAAAALLI/tcIkpheXrYU/s114/icon-twitter.png) top left no-repeat;}.social_bookmarks .iconfacebook{background: #E6E6E6 url(//lh5.googleusercontent.com/-nt-UdZG1ns0/U4vC1v57lwI/AAAAAAAALLQ/pAOWjEBSnSg/s114/icon-facebook.png) top left no-repeat;}.social_bookmarks .icongplus{background: #F1F1F1 url(//lh6.googleusercontent.com/-brT53y4GgMs/U4vC1UPpmFI/AAAAAAAALK8/vRxosS7GGKs/s114/icon-gplus.png) top left no-repeat;}.social_bookmarks .iconfacebook:hover{background-position:center -57px; background-color:#37589b;}.social_bookmarks .icontwitter:hover {background-position:center -57px; background-color:#46d4fe;}.social_bookmarks .icongplus:hover {background-position:center -57px; background-color:#de5a49;}.social_bookmarks .iconrss:hover{background-position:center -57px; background-color:#ff6600;}.social_bookmarks .iconrssmail:hover{background-position:center -57px; background-color:#FFDE00;}.social_bookmarks li:hover a{background: transparent url(//lh4.googleusercontent.com/-XNviZ_JqvyU/U4vDMDFAX8I/AAAAAAAALLk/E4VIJr1onlo/s57/icon-social-reflect.png) no-repeat;}</style><div class='social_bookmarks_container'><ul class='social_bookmarks'><li class='iconrss'><a href='/atom.xml'>RSS</a></li><li class='iconrssmail'><a href='http://feedburner.google.com/fb/a/mailverify?uri=NombreDelFeed'>RSS Mail</a></li><li class='icontwitter'><a href='http://twitter.com/usuario'>Twitter</a></li><li class='iconfacebook'><a href='http://facebook.com/usuario'>Facebook</a></li><li class='icongplus'><a href='http://plus.google.com/+usuario/about'>Google Plus</a></li></ul></div>Esta e a outra versao, o botao 4...."voce deve colar no seugadget HTML / Javascript ....este e o codigo:<style>/* Botones de Redes Sociales - Ciudad Blogger */.social_bookmarks_container {width:176px;height:176px;padding:0;position:relative;}.social_bookmarks {position:relative;float:right;margin:0;padding:0;}.social_bookmarks li{margin:0 0 1px 1px;height:77px;width:77px;list-style:none;float:left;padding:0;-webkit-transition: all 0.4s ease-in-out;-moz-transition: all 0.4s ease-in-out;-o-transition: all 0.4s ease-in-out;-ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out;}.social_bookmarks li a {float:left;width:77px;line-height:24px;display: block;text-indent: -99999px;margin:0px;outline: none;padding:0;min-height:77px;height:100%;text-decoration:none;}.social_bookmarks .iconrss{background: #A4A4A4 url(//lh6.googleusercontent.com/-s8sIx3OX2WI/U4vC1nmgr0I/AAAAAAAALK4/W3Z3qXMwrCg/s000/icon-rss.png) top left no-repeat;}.social_bookmarks .icontwitter{background: #D8D8D8url(//lh6.googleusercontent.com/-4TshwJW7hIE/U4vC2JM25AI/AAAAAAAALLI/tcIkpheXrYU/s000/icon-twitter.png) top left no-repeat;}.social_bookmarks .iconfacebook{background: #E6E6E6 url(//lh5.googleusercontent.com/-nt-UdZG1ns0/U4vC1v57lwI/AAAAAAAALLQ/pAOWjEBSnSg/s000/icon-facebook.png) top left no-repeat;}.social_bookmarks .icongplus{background: #F1F1F1 url(//lh6.googleusercontent.com/-brT53y4GgMs/U4vC1UPpmFI/AAAAAAAALK8/vRxosS7GGKs/s000/icon-gplus.png) top left no-repeat;}.social_bookmarks .iconfacebook:hover{background-position:center -77px; background-color:#37589b;}.social_bookmarks .icontwitter:hover {background-position:center -77px; background-color:#46d4fe;}.social_bookmarks .icongplus:hover {background-position:center -77px; background-color:#de5a49;}.social_bookmarks .iconrss:hover{background-position:center -77px; background-color:#ff6600;}.social_bookmarks li:hover a{background: transparent url(//lh4.googleusercontent.com/-XNviZ_JqvyU/U4vDMDFAX8I/AAAAAAAALLk/E4VIJr1onlo/s000/icon-social-reflect.png) no-repeat;}</style><div class='social_bookmarks_container'><ul class='social_bookmarks'><li class='iconrss'><a href='/atom.xml'>RSS</a></li><li class='icontwitter'><a href='http://twitter.com/usuario'>Twitter</a></li><li class='iconfacebook'><a href='http://facebook.com/usuario'>Facebook</a></li><li class='icongplus'><a href='http://plus.google.com/+usuario/about'>Google Plus</a></li></ul></div>E rapido, certo? A unica coisa que resta a fazer e colocar os seus nomes de usuarios de cada rede social onde indicado em vermelho .Pela primeira versao deve colocar o nome do seu feed Feedburner quando indicado, e, claro, ter a assinatura ativada Feedburner e-mail .E se voce nao gostar das cores, voce tambem pode altera-los. Os codigos hexadecimais estao em negritocores estao em seu estado normal, e aqueles em laranja sao as cores quando pairando.fonte:ciudadbloggerBotones de Redes Sociales con