Tutoriales sobre Blogger

En este tutorial veremos como agregar Botones de tus Redes Sociales tales como Facebook, Twitter y Google+ con un efecto Hover creado con CSS para Blogger.

Un efecto hover consiste en la alteración del aspecto de un elemento de la interfaz gráfica cuando se sitúa el puntero sobre el mismo.

Antes de comenzar veremos una demostración:

Demostración

Comencemos:

Paso 1: Vamos a Blogger>> Plantilla>> Edición HTML.
Paso 2: Buscamos la siguiente linea (Ctrol + F)

]]></b:skin>

Paso 3: Justo por encima de ]]></b:skin> pegamos el siguiente código CSS.

***Efecto Hover para tus Redes Sociales por Tutoriales-blogger.info***
#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;}

Ahora agregaremos nuestras redes sociales en un gadget para ello seguimos estos pasos

Paso 4: Vamos a Blogger>> Diseño>> Añadir un gadget>> HTML/Javascript
Paso 5: Dentro del gadget pegamos el siguiente codigo HTML.

<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>