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 nuestras redes sociales con un efecto hover, si te gustan los colores mas vivos en tu blog y no tan apagados este estilo de redes sociales es para ti

Antes de comenzar veremos una demostración en vivo: 

Comencemos:


  • Paso 1: Vamos a Blogger>> Diseño>> Añadir un gadget>> HTML/Javascript.
  • Paso 2: Dentro de nuestro gadget pegamos el siguiente codigo HTML.
<div id="iconoshoverfade">
<ul>
<a href="http://www.facebook.com" target="_blank"> <img height="50" src="http://3.bp.blogspot.com/-YFvMg3ZTCoU/UWYlsclm9dI/AAAAAAAAEjE/VbECKsRvusc/s1600/Scribble-Facebook.png" title="Síguenos en Facebook" width="50" /></a>
<a href="https://plus.google.com" target="_blank"><img height="50" src="http://3.bp.blogspot.com/-mWT0r0Xe66Q/UWYls9XBgGI/AAAAAAAAEjg/2hXW0-osaOk/s1600/Scribble-google+.png" title="Síguenos en Google+" width="50" /></a>
 <a href="https://www.twitter.com/" target="_blank"><img height="50" src="http://2.bp.blogspot.com/-RINX-CaD8sE/UWYltOJVN4I/AAAAAAAAEjk/-yQn5FMSx-0/s1600/Scribble-twitter.png" title="Siguenos en Twitter" width="50" /></a>
<a href="http://feeds.feedburner.com/" target="_blank"><img height="50" src="http://3.bp.blogspot.com/-dR8k3RGwRqI/UWYlsRncmKI/AAAAAAAAEjI/gUk3lsYAAis/s1600/Scribble-RSS.png" title="Subscribete " width="50" /></a>
<script src=" http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
    $('#iconoshoverfade a').hover(function() {
        $('#iconoshoverfade a img').not($('img', this)).stop().fadeTo(250, '0.1');
    }, function() {
        $('#iconoshoverfade a img').stop().fadeTo(250, '1.0');
    });
});
</script>
<style>
#iconoshoverfade {float:center;margin: 0 auto;}
#iconoshoverfade ul li {list-style-type: none;float:left;margin-left:5px;:}
#iconoshoverfade ul li:hover{-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;}
</style>
</ul>
</div>
  • Paso 3: Guardamos nuestro gadget y listo
Nota:-  Solo debemos cambiar lo que esta en Rojo por URL de tus Redes Sociales
- - 7 Comentarios
Tag

Comentarios (7)

  1. no los tienes en el color original o seria mucho pedir :s

    ResponderEliminar
    Respuestas
    1. Son imágenes buscadas en una pagina de imágenes, no son creadas por mi, yo solo agrego los códigos CSS y HTML.
      Las imágenes son de uso gratuitas o también puedes comprarlas para tener derechos sobre ella.

      Te dejo la URL para que busques las imágenes que tu quieras

      Icon Search

      Eliminar
  2. wow gracias, estuve buscando esto por todo lado, graciasss

    ResponderEliminar
  3. ¿Se podrá tener el link de Instagram en lugar del de Twitter?

    ResponderEliminar
    Respuestas
    1. Te comento que no recuerdo de que sitio de imágenes saque estas imagenes, son de uso gratuito,

      Solo te puedo ayudar dándote el siguiente link, donde se encuentran imágenes similares, solo debes de cambiar la URL de las imágenes por las que tu quieras
      Icon Search
      Espero que te halla podido ayudar

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