Iconos Sociales estáticos en la Parte Inferior del Blog

Las Redes Sociales un gran empuje de trafico para nuestros Blogs, sin duda alguna las redes sociales son una de las vías directas de los visitantes hacia nuestro contenido, Asi que es muy importante que estos sean resaltantes en nuestro Blog, no confundir con resaltantes a contenido molesto que interrumpe la lectura de los contenidos, sino algo que sea visto a simple vista y a cada momento pero que no sea molesto. En esta entrada aprenderemos a colocar nuestros iconos sociales de forma estática en nuestro Blog, Pueden apreciar el ejemplo en la parte inferior de este Blog si usan el Scroll de la pagina notaran que los iconos se mantienen estáticos.

Iconos Sociales estáticos en la Parte Inferior del Blog:

Para este ejemplo usaremos un diseño de Iconos que ya vimos anteriormente en una entrada la cual es Iconos sociales con efecto cambiante. Para empezar añadiremos un Gadget Html/JavaScript y añadiremos el siguiente código HTML:

Código HTML:

<div class="barra-social">

    <ul class="socialButtons">

            <li class="facebook">

               <a href="Tu Pagina de facebook"> </a>

           </li>

           <li class="twitter">

               <a href="Tu pagina de Twitter"> </a>

          </li>

          <li class="google">

                <a href="Tu pagina de Google"> </a>

          </li>

          <li class="rss">

                <a href="Tu Feed"> </a>

          </li>

    </ul>

</div>

Ahora en las letras rojas ponemos la dirección de nuestras redes Sociales correspondientes. Caso de no tener alguna de estas mencionadas simplemente la quitamos, o de tener alguna mas solo tenemos que aumentar otro <li>, pero a manera de ejemplo solo trabajaremos con estas 4.

Ahora para que nuestros Iconos tengan el estilo que notamos en este Blog agregamos el siguiente código CSS:

Código CSS:

.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;
}

Una ves puesto estos estilos CSS ya tendremos nuestro iconos sociales cambiantes al igual como los tengo yo en el Blog pero aun no están estáticos para hacer que siempre permanezcan en el inferior de nuestro Blog usamos el siguiente Código:

Código para hacer estáticos los Iconos:

.barra-social
{
z-index: 99999999;
position: fixed;
bottom: 0;
right: 0;
}

Ahora una ves colocado el Código los Iconos Sociales aparecerán estáticos en nuestro Blog así como observamos en la parte inferior de este Blog. Ustedes pueden usar los iconos Sociales que deseen y el estilo que deseen pero para que estos estén Estáticos en el Blog y se muevan entorno al Scroll de la pagina solo tenemos que añadir el ultimo Código obviamente en el código HTML debe existir la clase .barra-social Como en el ejemplo.

Espero que este post les sea de mucha utilidad. cualquier duda o Aporte Hacerlo por Comentarios. Gracias por su tiempo!

¿Tienes alguna otra idea de como resaltar tus iconos Sociales?. Compártela!!