Adblock Detectado

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

He desactivado Adblock
En este turorial veremos como Crear un gadget de Suscriptores de Redes Sociales Usando usando Efecto Sprite para blogger. El Efecto Sprite consiste en que los iconos de Redes Sociales se vean en blanco y negro , una ves que pace el curso
r por encima de ellos cambiaran con el efecto Rellover.
Efecto es que solo ocupa una imagen y no 14 por cada icono , y ayuda la velocidad de carga de tu blog

Vamos a empezar

  • Paso 1: Agregaremos CSS Efect Sprite a nuestro blog, para eso vamos a 
  • Blogger>>Plantilla>>Personalizar>>Avanzado>>Añadir CSS
  • Paso 2: Copia y pega el siguiente código en Añadir CSS
/*Social Sprite Css*/
#head-soc ul li {list-style :none; padding: 0 0 0 12px; float: right;}
#head-soc ul li a {text-indent: -9999px; font-size: 0; line-height: 0; overflow: hidden ; height: 32px; width: 32px ;border: 0; background: url(http://1.bp.blogspot.com/-IWFniHoyd3A/T-YdTpaOuKI/AAAAAAAAG-0/tB_K-9hn02U/s1600/spice-up-blog-sprite.gif) no-repeat; display: block;}
#head-soc li#g a {background-position: 0px 0px;}
#head-soc li#g a:hover {background-position: 0px -32px;}
#head-soc li#rss a {background-position: -32px 0px;}
#head-soc li#rss a:hover {background-position: -32px -32px;}
#head-soc li#sub a {background-position: -64px 0px;}
#head-soc li#sub a:hover {background-position: -64px -32px;}
#head-soc li#fb a {background-position: -96px 0px;}
#head-soc li#fb a:hover {background-position: -96px -32px;}
#head-soc li#twit a {background-position: -128px 0px;}
#head-soc li#twit a:hover {background-position: -128px -32px;}
#head-soc li#li a {background-position: -160px 0px;}
#head-soc li#li a:hover {background-position: -160px -32px;}
#head-soc li#youtube a {background-position: -192px 0px;}
#head-soc li#youtube a:hover {background-position: -192px -32px;}
/*Social Sprite Css http://www.tutorialesblogger.blogspot.com */

  • Paso 3: Damos click en "Aplicar al blog" 
  • Paso 4: Añadiremos el codigo HTML, para eso vamos a . . .
  • Blogger>>Diseño>>Añadir un gadget>>HTML/Javascript
  • Paso 5: Copia y pega el siguiente código en HTML/Javascript
<!--Social Sprite Html-->
<div id="head-soc">
<ul>
<li id="g"><a href="URL GOOGLE+">Google+</a></li>
<li id="rss"><a href="URL RSS FEED">RSS Feed</a> </li>
<li id="sub"><a href="URL">Subscribe</a></li>
<li id="fb"><a href="URL FACEBOOK">Facebook</a></li>
<li id="twit"><a href="URL TWITTER">Twitter</a></li>
<li id="li"><a href="URL LINKEDIN">LinkedIn</a></li>
<li id="youtube"><a href="URL YOUTUBE">YouTube</a></li>
</ul>
</div>
<!--Social Sprite Html http://www.tutorialesblogger.blogspot.com-->
Nota:- Nota solo tendremos que cambiar la URL por tus enlaces


- - 1 Comentarios
Tag

Comentarios (1)

:))
:((
: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