Botones de Redes Sociales (Facebook, Twitter y Google+) con efecto hover

Hola amigos, hoy les enseñare a como poner los botones de las redes sociales Facebook, Twitter y Google+ en nuestro blog.
Este gadget es muy bueno ya que vienen en blanco y negro, y al pasar el cursor, se vuelven a color.

Vista previa:



1. Ir a Plantilla → Editar HTML, adentro presionamos Ctrl + F para buscar lo siguiente:
]]></b:skin>
2. Encima del  ]]></b:skin> pegamos:
***Efecto Hover para tus Redes Sociales por Gadgeria.blogspot.com***#sosial {display:block;margin:0px 0px 0;width:100%;float:center;background:transparent;position:relative;padding:0;height:40px;}#sosial::before {content:"";width:0;height:0;bottom:-11px;position:absolute;right:-1px;border-right-color:transparent;border-bottom-color:transparent;}#sosial::after {content:"";bottom:0;position:absolute;left:-40px;z-index:99999;border-left-color:transparent;}#sosial ul {position:relative;}#sosial ul::after {content:"";bottom:-47px;position:absolute;left:-43px;z-index:99999;}#sosial li {display:block;float:left;margin:0 10px;text-indent:-999999px;}#sosial li a {display:block;height:45px;width:133px;overflow:hidden;background:url(http://3.bp.blogspot.com/-_yX_V-or3pw/Ubi8AXEI4EI/AAAAAAAAAEs/eyXbDlhZnxo/s400/Sosial-Sprite.png);}.fb {background-position:0 0;}.fb:hover {background-position:0 -45px !important;}.twitter {background-position:0 -177px !important;}.twitter:hover {background-position:0 -225px !important;}.gplus {background-position:0 -90px !important;}.gplus:hover {background-position:0 -135px !important;}
Despues, guardamos los cambios y nos vamos a Diseño → Añadir Gadget → HTML/Javascript y pegamos lo siguiente:

<div id="sosial">
<ul>
<li>
<a class="fb" href="https://www.facebook.com/" target="_blank">Haste Fan en Facebook</a></li>
<li>
<a class="twitter" href="http://twitter.com/" target="_blank">Siguenos en Twitter</a></li>
<li>
<a class="gplus" href="https://plus.google.com/" target="_blank">Siguenos en Google+</a></li>
</ul>
</div>
Reemplazamos lo que está en rojo por lo que le corresponde.

Updates Via E-Mail

Blogger templates