Carregando atualizações...

X

Redes Sociais Com Efeito JQuery

Nesta postagem compartilho com vocês ícones para redes sociais com efeito jquery para deixar seu blog muito mais da ora!!!




Para colocar no blogger... Entre em "Modelo" - "Editar HTML", dê um Ctrl + F e procure pela tag
]]></b:skin>
Tendo encontrada a tag, cole ACIMA dela o seguinte código
.abt-social-slide ul li{list-style:none;border-bottom:none;padding:0}
.abt-social-slide li a{width:59px;height:59px;float:left;text-indent:-99999px;border:solid 1px #222121;border-radius:5px;-webkit-transition:All .3s ease-out;-moz-transition:All .3s ease-out;-o-transition:All .3s ease-out;margin:5px 5px 10px;padding:0}
.abt-social-slide li a.facebook{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQ5eXCApCpA1ynYdGtn6awMvT2W9Y0VOmdEPiLRt-yJ6vmG4hel-jHuQgJA1P1mZk4CMM-jrGAdqCABO6_rxpBBlmhTbhFyw3fIvd2kXuFAzy35-IwnhVURIHRs8gOoCEqru9X7EiOqg/s1600/facebook.png) no-repeat 0 -88px}
.abt-social-slide li a.facebook:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQ5eXCApCpA1ynYdGtn6awMvT2W9Y0VOmdEPiLRt-yJ6vmG4hel-jHuQgJA1P1mZk4CMM-jrGAdqCABO6_rxpBBlmhTbhFyw3fIvd2kXuFAzy35-IwnhVURIHRs8gOoCEqru9X7EiOqg/s1600/facebook.png) no-repeat 0 0}
.abt-social-slide li a.twitter{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoBSfmfH7cuOxdsFp6Gkss4zG7Muz4Vy5rDUxlQpZdXGVI2C2gFh96nMTyWcjU9XiEi8szfbpqsSpAaRBRjB17qKpcLQkmgLuUNnMIbRTLJmRHn-YhzzZabat1UW9wQULnikbSoMUQ5w/s1600/twitter-1.png) no-repeat 0 -88px}
.abt-social-slide li a.twitter:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoBSfmfH7cuOxdsFp6Gkss4zG7Muz4Vy5rDUxlQpZdXGVI2C2gFh96nMTyWcjU9XiEi8szfbpqsSpAaRBRjB17qKpcLQkmgLuUNnMIbRTLJmRHn-YhzzZabat1UW9wQULnikbSoMUQ5w/s1600/twitter-1.png) no-repeat 0 0}
.abt-social-slide li a.google-p{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6ranUJuR4FYJ_Cx-1AKqqWcSA53VpX5jJYOnLvpw9-Wm3JMi0FWz37If6eTZfqyPnp9Ko_5lHB3vwWuD1iQa0iaei1F856ZoQSTC-yN9-aS9xaoBJpZbAj2sWIrKgjNQTziC7gMozMw/s1600/google.png) no-repeat 0 -88px}
.abt-social-slide li a.google-p:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6ranUJuR4FYJ_Cx-1AKqqWcSA53VpX5jJYOnLvpw9-Wm3JMi0FWz37If6eTZfqyPnp9Ko_5lHB3vwWuD1iQa0iaei1F856ZoQSTC-yN9-aS9xaoBJpZbAj2sWIrKgjNQTziC7gMozMw/s1600/google.png) no-repeat 0 0}
.abt-social-slide li a.rss{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8duNxLYNxwkgwxmNC0CIBZHxHjOjcOwqYnjxYksn8fG1ZUOpPveMNW4lPJsn5t9TO2vSohxsMb3MgDsxPS1fx6yWWjErhSRA0KUhj_ldTeHwUN1YlT3sQoaMVEFPf1nWBj7p9tqeteg/s1600/twitter.png) no-repeat 0 -88px}
.abt-social-slide li a.rss:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8duNxLYNxwkgwxmNC0CIBZHxHjOjcOwqYnjxYksn8fG1ZUOpPveMNW4lPJsn5t9TO2vSohxsMb3MgDsxPS1fx6yWWjErhSRA0KUhj_ldTeHwUN1YlT3sQoaMVEFPf1nWBj7p9tqeteg/s1600/twitter.png) no-repeat 0 0}
Tendo colado o código, salve e feche por que esta parte já está finalizada.

Agora, entre em "Layout" - "Adicionar um Gadget" e cole o seguinte código

<div class="abt-social-slide">
<ul>
<li><a class="facebook" href="https://www.facebook.com/dicashot" target="_blank">Facebook</a></li>
<li><a class="twitter" href="Seu twitter" target="_blank">Twitter</a></li>
<li><a class="google-p" href="sua URL do google plus" target="_blank">Google plus</a></li>
<li><a class="rss" href="http://feedburner.google.com/fb/a/mailverify?uri=dicashot" target="_blank">Rss</a></li>
</ul></div>                                                                                                                                            Widget by <a href="http://dicashot.blogspot.com.br/2013/11/redes-sociais-com-efeito-jquery_25.html">Dicashot</a>
Faça as modificações nas parte destacadas de azul no código.

Tendo feito isto no código, basta salvar e pronto!!!

Cursos Online com Certificado - Cursos 24 Horas

NOSSO CANAL
VER TV A CABO ONLINE GRÁTIS
TV ONLINE 1.0