Adblock Detectado

Nuestro sitio se mantiene gracias a la publicidad, por favor Desactiva Adblock para seguir navegando

He desactivado Adblock

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:

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>
  • Paso 6: Guardamos nuestro gadget y listo a disfrutar


Nota:-  Solo deberás de cambiar la URL en roja por las de tus Redes Sociales

- - 2 Comentarios
Tag

Comentarios (2)

:))
:((
:D
:(
:)
:-)
;)
=))
:p
=.=
==
^_^
/=he
:*
/=r
/=l
:v
/=ok
/=clap
(y)
(yy)
/=hi
/=j
/=hup
/=hd
/=hl
/=hr
/=s
<3

Instrucciones Para omentar

Incertar Enlace

Utilice el codigo <a href='LINK'> EJEMPLO </a>

Cargar Imagen

[img] LINK_ANH [/img] -Use el codigo para cargar una imagen.

Formato Word

<b> negrita </b>
<i> cursiva </i>
<u> texto subrayado </u>
<strike> texto tachado </strike>

Insertar un Fragmento de codigo

Primero use esta herramienta para codificar el codigo que quiera agregar.
Luego utilice el codigo [code] CODIGO HTML [/code]

Cerrar