Blogger ya facilita unos botones para compartir el contenido de tu blog, y para que aparezcan en cada entrada, tienes que ir a los elementos de la página o Diseño (en la nueva interfaz, ahora disponible en Blogger in Draft) , luego, haces click en "editar" en la sección de "Entradas del blog", y marcas la casilla correspondiente.
Si esos botones no se ajustan a tu diseño, o quieres poner botones personalizados lo puedes hacer libremente, y hoy te tengo una imagen que contiene todos los iconos que puedes ver a continuación y que puedes usar, si así lo quieres:
Imagen con fondo blanco
Para hacer funcionar los botones, vamos a usar una técnica llamada sprites, de ese modo, estamos usando sólo una imagen para todos los botones, en lugar de las 16 imágenes que necesitaríamos para lograr poner los 8 botones + los del evento hover, (al poner el puntero del ratón encima del botón) y ésto se traduce en menos tiempo de carga para tu blog.
La imagen incluye:
- Botón de Twitter
- Botón de Facebook
Botón de Google Buzz(leer actualización abajo)- Boton de Orkut
- Boton de Stumbleupon
- Botón de Delicious
- Botón de Bitácoras
- Botón para compartir entradas por email.
Si estás convencido y quieres probarlos, entonces, veamos como ponerlos...
Cómo poner los botones paso a paso:
Paso 1: Estando en tu escritorio, ve a Plantilla ► Personalizar ►Avanzado► Añadir CSS, y ahí en el campo grande, a tu derecha, pega el siguiente código:
/* Botones para compartir entradas*/
ul#m-soc{
margin: 10px 0 0 10px;
padding: 0;
width: 400px;
height: 84px;
background: none;
}
ul#m-soc h4 {
padding: 5px;
margin: 0;
}
ul#m-soc li {
list-style: none;
margin: 0;
padding: 0;
float: left;
border: none !important;
}
ul#m-soc li a {
background: url(URL_DE_LA_IMAGEN) no-repeat 0 0;
margin: 0;
padding: 0;
display: block;
width: 50px;
height: 42px;
overflow: hidden;
text-indent: -9999px;
}
ul#m-soc li a.twitter{
background-position: 0 0;
}
ul#m-soc li a.facebook{
background-position: -50px 0;
}
ul#m-soc li a.g-buzz {
background-position: -100px 0;
}
ul#m-soc li a.orkut {
background-position: -150px 0;
}
ul#m-soc li a.stumb {
background-position: -200px 0;
}
ul#m-soc li a.deli {
background-position: -250px 0;
}
ul#m-soc li a.bitacoras {
background-position: -300px 0;
}
ul#m-soc li a.correo {
background-position: -350px 0;
}
ul#m-soc li a.twitter:hover{
background-position: 0 -42px;
}
ul#m-soc li a.facebook:hover{
background-position: -50px -42px;
}
ul#m-soc li a.orkut:hover {
background-position: -150px -42px;
}
ul#m-soc li a.stumb:hover {
background-position: -200px -42px;
}
ul#m-soc li a.deli:hover {
background-position: -250px -42px;
}
ul#m-soc li a.bitacoras:hover {
background-position: -300px -42px;
}
ul#m-soc li a.correo:hover {
background-position: -350px -42px;
}
Importante: Necesitas poner la URL de la imagen con los iconos.
Con el código anterior, estamos declarando la imagen que vamos a usar, estamos creando una clase para cada botón para definir la posición de cada uno, su tamaño, etc.
Para guardar lo que has agregado, haces click en APLICAR AL BLOG.
Paso 2: Vas a la edición de HTML de la plantilla y luego, marcamos la casilla de: expandir plantillas de artilugios, y con la ayuda de ctrl F, buscamos:
<data:post.body/>
O bien, cualquier linea del post-footer, en donde solo afectaremos la posición de los botones dentro de la entrada:
<div class='post-footer-line post-footer-line-1'>
Inmediatamente después pegas esto:
<b:if cond='data:blog.pageType == "item"'><ul id='m-soc'><h4>¡Si te gusto, compártelo!</h4><li><a class='twitter' expr:href='"https://twitter.com/home?status=" + data:post.title + ": " + data:post.url' target='_blank' title='Twittear'> Twitter</a></li><li><a class='facebook' expr:href='" http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title' expr:onclick='"window.open(this.href, \"_blank\", \"height=430,width=640\"); return false;"' target='_blank' title='Compartir en Facebook'>Facebook</a></li><li><a class='orkut' expr:href='"http://promote.orkut.com/preview?nt=orkut.com&du=" + data:post.url + "&tt=" + data:post.title' target='_blank' title='Compartir en Orkut'>Orkut</a></li><li><a class='stumb' expr:href='"https://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Compartir en Stumbleupon'>Stumbleupon</a></li><li><a class='deli' expr:href='"http://del.icio.us/post?url="+ data:post.url + "&title=" + data:post.title' target='_blank' title='Compartir en Delicious'>Delicious</a></li><li> <a class='bitacoras' expr:href='"http://bitacoras.com/anotaciones/" + data:post.url' target='_blank' title='Compartir en bitácoras'>Bitacoras</a> </li> <li><!-- email post links --><b:if cond='data:post.emailPostUrl'> <span class='item-action'><a class='correo' expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'> </a></span></b:if></li></ul></b:if>
Todo lo que está marcado de rojo, lo puedes personalizar; donde dice: ¡Si te gusto compártelo! ,es el texto que aparecerá antes de los botones, y todo lo demás son los textos del tooltip (el texto que aparece al poner el puntero sobre el botón) para cada botón.
Paso 3: Checa en vista previa y si todo luce bien guarda los cambios. Los botones no los verás hasta que entres a cada entrada.
Importante: el código marcado de azul, sirve para que se puedan compartir las entradas por correo electrónico, a través del formulario que ofrece Blogger, y ésto sólo funcionará si lo habilitamos, y para hacerlo, tenemos que ir a la pestaña "Diseno", y hacer click en "Editar" de la sección de las entradas, y luego activar la casilla que dice: Mostrar enlaces de envío de entradas, como puede apreciarse en la siguiente imagen:
Si no lo haces, simplemente el botón de sobre en el sprite no se verá.
Ese código viene en la plantilla, para que no se repita esta función y salga el icono de Blogger para envío de entradas, que es este:
necesitas buscarlo y eliminarlo, y ese código lo encuentras al expandir plantillas de artilugios, en la edición de HTML de la plantilla:<!-- email post links -->
<b:if cond='data:post.emailPostUrl'>
<span class='item-action'>
<a class='correo' expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
</a>
</span>
</b:if>
Para que se entienda, lo estamos "moviendo de lugar" y agregando la clase para que se vea la imagen de sobre de la imagen con los iconos, por eso lo eliminamos. Algunas plantillas editadas o nuevas no lo trae.
Cómo Agregar el botón de Google +1
Si quieres agregar el botón de Google +1, y ya tienes el script de éste añadido, entonces, sólo necesitas agregar antes de </ul> esto :
<li><div class='google1'><g:plusone size='medium'/></div></li>
...también modificar el ancho de: ul#m-soc, de 400px a: 450px; y agregar esta linea al código del paso 1:
.google1{
margin: 12px 0 0 0;
}
Así de fácil y rápido.
Imágenes con otros fondos
Fondo transparente:
Fondo Negro:
Puedes ver el demo en este blog, y en mi blog funcionando, ahora sin el botón de Bitacoras. Esto funciona en todos los navegadores incluyendo IE6.
ACTUALIZACIÓN: Octubre/20/2011. He eliminado las lineas de código que corresponden al botón de Google Buzz, ya que ese servicio de Google será retirado próximamente. También cambiado la opción para acceder a la configuración de envío de entradas considerando que ya tenemos nueva interfaz.
Crédito por lo botones:
Iconos
No hay comentarios:
Publicar un comentario