sábado, 7 de abril de 2012

Gadget Redes Sociales para Blogger


Buscando mantener el blog con el diseño actual pero sin tenerlo tan sobrecargado, quise colocar todos los enlaces de las Redes Sociales juntas para que os sea mas fácil a la hora de suscribirse. Encontré un post de un Blog "Vida Bloguera", el cual me hizo la vida menos complicada a la hora de implementarlos.

Los pasos son sencillo y paso a explicar como hacerlo:

1.- En primer lugar tomaremos la imagen de este artículo, es decir:


2.- En segundo lugar vamos a copiar el siguiente código:

.redes {
}
.redes a{
background-image : url(http://2.bp.blogspot.com/-m5z1rlhphq4/T3L4XxX8uuI/AAAAAAAASHk/hL1kM6oTGGk/s1600/redes.png);
background-color : transparent;
background-repeat : no-repeat;
height : 48px;
width : 48px;
float : left;
display : block;
margin : 0 5px 0 0;
}
#feedburner_png {
background-position : 0px -48px;
}
#feedburner_png:hover {
background-position : 0px 0px;
}
#googleplus_png {
background-position : -240px -48px;
}
#googleplus_png:hover {
background-position : -240px 0px;
}
#facebook_png {
background-position : -48px -48px;
}
#facebook_png:hover {
background-position : -48px 0px;
}
#twitter_png {
background-position : -144px -48px;
}
#twitter_png:hover {
background-position : -144px 0px;
}
#youtube_png {
background-position : -96px -48px;
}
#youtube_png:hover {
background-position : -96px 0px;
}
#linkedin_png {
background-position : -192px -48px;
}
#linkedin_png:hover {
background-position : -192px 0px;
}



Una vez copiado vamos a ir a el menú de blogger y hacemos click en el apartado plantilla de vuestro blog. Una vez que veáis vuestro blog, tendréis dos botones (Personalizar y Edición de HTML), seleccionamos "Edición de HTML". Una vez abierto el código HTML de vuestro blog, buscamos el código.

 ]]></b:skin>

Lo podéis buscar manualmente o bien habilitamos la plantilla de artilugios y presionamos CTRL+F para que podamos buscar dicho código. Una vez encontrado copiamos el código antes de el trozo antes dicho, quedando así:

/* Inicio Código Gadget Redes Sociales */
.redes {
}
.redes a{
background-image : url(http://2.bp.blogspot.com/-m5z1rlhphq4/T3L4XxX8uuI/AAAAAAAASHk/hL1kM6oTGGk/s1600/redes.png);
background-color : transparent;
background-repeat : no-repeat;
height : 48px;
width : 48px;
float : left;
display : block;
margin : 0 5px 0 0;
}
#feedburner_png {
background-position : 0px -48px;
}
#feedburner_png:hover {
background-position : 0px 0px;
}
#googleplus_png {
background-position : -240px -48px;
}
#googleplus_png:hover {
background-position : -240px 0px;
}
#facebook_png {
background-position : -48px -48px;
}
#facebook_png:hover {
background-position : -48px 0px;
}
#twitter_png {
background-position : -144px -48px;
}
#twitter_png:hover {
background-position : -144px 0px;
}
#youtube_png {
background-position : -96px -48px;
}
#youtube_png:hover {
background-position : -96px 0px;
}
#linkedin_png {
background-position : -192px -48px;
}
#linkedin_png:hover {
background-position : -192px 0px;
}

/* Fin Gadget Redes Sociales */
]]></b:skin>


He agregado dos lineas al código para que en futuras ocasiones podáis encontrar el código y evitar dañar el HTML de vuestro blog. Esos trozos añadidos son:

/* Inicio Código Gadget Redes Sociales */
/* Fin Gadget Redes Sociales */




Estas dos lineas os permite indicar dentro del HTML donde empieza y donde terminan determinados códigos (Por ejemplo este que estoy explicando). Son solo etiquetas de referencia para saber diferenciar donde empiezan y terminan dichos códigos.

Por otro lado, dentro de este código (Tomado de la fuente en su articulo "Gadget de Redes Sociales") hay una linea que es la siguiente:

background-image:url(http://2.bp.blogspot.com/-m5z1rlhphq4/T3L4XxX8uuI/AAAAAAAASHk/hL1kM6oTGGk/s1600/redes.png);

En esta linea se especifica el enlace para la imagen que antes os comentaba. Dicho enlace lo tendréis activo mientras no sea eliminado dicha imagen. Podéis usarlo sin problema, sin embargo recordar que si dicha imagen es eliminada posteriormente, entonces no os funcionara más.

La otra manera de usarlo es descargando la imagen, luego subirla a una entrada (Como borrador), guardar dicha entrada, y una vez guardada la entrada le damos al botón derecho de la imagen y en el menú que os muestra seleccionamos "Copiar URL de la imagen", hecho esto sustituimos la linea anterior por la URL que acabáis de copiar y así la tendréis siempre que vosotros queráis o hasta cuando decidáis eliminarla.

Recordar que luego de insertar el código completo debéis guardar los cambios hechos.

3.- Por ultimo paso vamos a ir a el menú de blogger y seleccionamos "Diseño" y luego seleccionaremos "Añadir un Gadget" en el lugar que vosotros prefiráis. Una vez abierto la ventana para que seleccionéis el Gadget elegiremos "HTML/Javascript" y pegamos ahí el siguiente código:

<div class='redes'>
<a id='feedburner_png' href='
URL Feedburner' target='_blank' title='Suscribirse'></a>
<a id='googleplus_png' href='
URL Google +' target='_blank' title='Google +'></a>
<a id='facebook_png' href='
URL Facebook' target='_blank' title='Facebook'></a>
<a id='twitter_png' href='
URL Twitter' target='_blank' title='Twitter'></a>
<a id='youtube_png' href='
URL Youtube' target='_blank' title='Youtube'></a>
<a id='linkedin_png' href='
URL Linkedin' target='_blank' title='Linkedin></a>
</div>


Una vez cambiadas las URL's solo queda guardar y a disfrutar del Gadget. Si tenéis algún problema no dudéis en dejar un comentario y os contesto a la brevedad posible.

Por último y no menos importante, antes de hacer todos estos pasos, aconsejo que guardéis una copia de vuestra plantilla de manera que podáis recuperarla si ocurre algún problema y no podéis volver a atrás.

Saludos
Darknesk

No hay comentarios: