Header Ads

Iconos Sociales estáticos en la Parte Inferior del Blog

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!!




2 comentarios:

  1. La página es muy buena en información. Tengo una consulta: a más de la página principal con la cual se inicia el blog, cree otra página con el objeto de no mezclar los temas que quiero publicar, pero en esta nueva página no puedo publicar otra entrada sino que pide crear otra página. ¿Hay forma de crear nuevas entradas en esta página? Le agradezco de antemano cualquier ayuda. Bendiciones

    ResponderEliminar
    Respuestas
    1. Nos podrías proporcionar mas información sobre lo que quieres hacer, pero algo que te entiendo es que quieres crear entradas en una página, esto resulta un tanto contradictorio ya que puedes muy bien utilizar varias páginas y no entradas en una pagína.

      Eliminar