Header Ads

Iconos Sociales con efecto Cambiante en Blogger

Iconos Sociales con efecto Cambiante en Blogger
Fuente: http://www.creativasfera.com/

Las redes sociales son una gran fuente de trafico para el blog y que mejor de hacer representativos a estas mediante iconos atractivos y con efectos llamativos, en esta entrada veremos un estilo bastante peculiar y muy llamativo de los Iconos sociales los cuales están basados en el estilo de http://www.creativasfera.com/, me tome el atrevimiento de tomar prestado el estilo de sus iconos sociales para esta entrada.

Iconos Sociales con efecto Cambiante en Blogger:





Si se tomaron la molestia de pasar el Mouse sobre esos iconos se habrán dado cuenta que tiene un efecto cambiante para cada icono, haciéndolo muy atractivo. En esta entrada aprenderemos como poner este Tipo de iconos en nuestro Blog obviamente ustedes pueden usar diseños propios, a manea de ejemplo usaremos este diseño el cual como ya dije es de http://www.creativasfera.com/.

Código HTML de los Iconos Sociales:

Estos iconos están diseñados en forma de Lista, cada uno con su dirección de enlace correspondiente:


<ul class="socialButtons">
             
                <li class="facebook">
                    <a href="URL de tu Facebook"> </a>
                </li>
             
                <li class="twitter">
                    <a  href=" URL de tu Twitter"> </a>;
                </li>
             
                <li class="google">
                    <a  href=" URL de tu Google+"> </a>;
                </li>
             
                <li class="rss">
                    <a  href=" URL de tu RSS"> </a>;
                </li>
 </ul>

Ahora solo pegamos este código donde queremos que aparezcan los iconos normalmente se los usa como un Gadget social así que vamos a Diseño y añadimos un Gadget de HTML/JavaScript y pegamos el código.

Código CSS de los Iconos Sociales:

Ahora para que tengan el diseño igual al del ejemplo tenemos que añadir los estilos CSS respectivos, ademas de usar las imágenes que le dan el aspecto que tiene:


.socialButtons
 {
  list-style: none;
  width:240px;
  padding:0;
  margin:0;
  clear:right;
}

.socialButtons li
 {
  float: left;
  margin-left:10px;
  padding:0px;
}
.socialButtons a
{
  display: block;
  background: url(https://lh4.googleusercontent.com/-_r9d0QOmcOg/UfdK-ieKuuI/AAAAAAAABbw/0sqLdsD-hNo/s229/socialButtons.png);
  height: 50px;
}
.facebook a
{
  width: 45px;
  background-position: 0 0px;
}
.twitter a
 {
  width: 45px;
  background-position: -60px 0px;
}
.google a
 {
  width: 45px;
  background-position: -122px 0px;
}
.rss a
{
  width: 45px;
  background-position: -185px 0px;
}

.facebook a:hover
 {
  width: 45px;
  background-position: 0 -50px;
}
.twitter a:hover
{
  width: 45px;
  background-position: -60px -50px;
}
.google a:hover
{
  width: 45px;
  background-position: -122px -50px;
}
.rss a:hover
 {
  width: 45px;
  background-position: -185px -50px;
}


Los estilos CSS lo pegamos en la opción añadir CSS de la herramienta Plantilla personalizada de Blogger.

Si habrán analizado el código los iconos están basados en una solo imagen, la imagen es la que tenemos al inicio del Post, en las letras rojas esta la URL donde esta almacenada la imagen si desean pueden usarla, o si no pueden descargar la imagen y subirla a sus propio servidor, no habrá ningún problema.

Explicación detallada del código CSS:

Ponemos una imagen general a todos los <li> de la lista, si se habrán dado cuenta se nota como si fueran muchas imágenes el truco esta en que cuando seleccionamos un clase por ejemplo la de Facebook, solo se muestra la imagen en una respectiva posición con el atributo position, es así como solo se muestra el icono de Facebook. Así sucesivamente se basa para las demás clases que identifican a Twitter, Google, Rss.

Ahora para dar el efecto cambiante se usa la propiedad Hover. la cual también cambia a una posición diferente de la imagen con el atributo position, y hace que parezca como si se tratara de otra imagen. Cuando en realidad lo único que se cambia es las posiciones en las que se muestran las imágenes.

Ahora ya podemos personalizar nuestros propios iconos en una sola imagen y emplear este mismo método para darla forma cambiante y que los iconos sociales tengan un estilo mas atractivo.

Cualquier duda o Aporte Hacerlo por Comentarios. Gracias por su tiempo.

Este Post fue echo a manera de ejemplo, ya que esta idea no es mía y mucho menos los iconos mostrados. Espero sus comprensión!





3 comentarios:

  1. disculpa como los pongo, como los tienes tu en tu blog pero al lado izquierdo.
    desde ya gracias.

    ResponderEliminar
    Respuestas
    1. hola anonimo la solucion para que sea igual al mio es que: lo pongas dentro de un div con un identificador cualquiera y luego aplica este css:
      #id{
      z-index:999999;
      position:fixed;
      bottom:0;
      left:0;
      }
      donde #id es el nombre del identificador que le pusiste a tu div, luego dentro de este copia el código que esta en el post. Espero te sirva gracias por comentar.

      Eliminar
  2. Neytor, saludos hermano, desde que descubrí tu blog,me he fascinado con lo que haces, te felicito y espero ir aprendiendo de ti. un abrazo, brother.
    Raciel

    ResponderEliminar