Botones para Compartir las Entradas en las Redes Sociales debajo de cada post
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
La imagen incluye:
- Botón de Twitter
- Botón de Facebook
Botón de Google Buzz(leer actualización abajo)Boton de Orkut(leer actualización abajo)- Boton de Stumbleupon
- Botón de Delicious
- Botón de Bitácoras
- Botón para compartir entradas por email.
Cómo poner los botones paso a paso:
#m-soc{margin:10px 0 0 10px;padding:0;width:400px;height:84px;background:none}#m-soc h4{padding:6px 0;margin:0}#m-soc li{list-style:none;margin:0;padding:0;float:left;border:none!important}#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:100%;white-space:nowrap}#m-soc li a.twitter{background-position:0 0}#m-soc li a.facebook{background-position:-50px 0}#m-soc li a.g-buzz{background-position:-100px 0}#m-soc li a.stumb{background-position:-200px 0}#m-soc li a.deli{background-position:-250px 0}#m-soc li a.bitacoras{background-position:-300px 0}#m-soc li a.correo{background-position:-350px 0}#m-soc li a.twitter:hover{background-position:0 -42px}#m-soc li a.facebook:hover{background-position:-50px -42px}#m-soc li a.orkut:hover{background-position:-150px -42px}#m-soc li a.stumb:hover{background-position:-200px -42px}#m-soc li a.deli:hover{background-position:-250px -42px}#m-soc li a.bitacoras:hover{background-position:-300px -42px}#m-soc li a.correo:hover{background-position:-350px -42px}
Nota: He comprimido el CSS anterior.
Importante: Necesitas poner la URL de la imagen con los iconos, donde dice URL de la imagen. Si no sabes cómo obtener la URL de una imagen que almacenas desde Blogger, échale un vistazo a esta entrada.
Para guardar lo que has agregado, haces click en APLICAR AL BLOG.
Paso 2: Vas Plantilla > editar HTML, y luego haz click dentro del editor, luego , pulsa Ctrl + F, y en el campo de búsqueda pones: <data:post.body/>O bien, podemos ponerlos en cualquier linea de la sección del post-footer, en donde solo afectaremos la posición de los botones dentro de la entrada, y para ello en lugar de la linea anterior buscamos esta otra linea:
<div class='post-footer-line post-footer-line-1'>Pulsas Enter, y una vez que te envíe a la linea de código, inmediatamente después pegas esto:
<b:if cond='data:blog.pageType == "item"'><div id="m-soc"><h4>¡Si te gusta, compártelo!</h4><ul><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='" https://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='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></div></b:if>
Todos los textos que están resaltados de azul, los puedes personalizar; donde dice: ¡Si te gusta 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: Verifica 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 con el icono de sobre no va a aparecer.
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
.google1{margin: 12px 0 0 0}
Los valores del margen se puedes editar, y los usamos para alinear el botón. 12 pixeles es el margen de arriba y lo que hace es bajar hacia abajo el botón. Los cuatro valores se leen así, de izquierda a derecha: [12px arriba] [0 pixeles a la derecha][0 pixeles abajo] [0 pixeles a la izquierda].
Imágenes con otros fondos
Fondo transparente:
Fondo Negro:
Puedes ver la demostración en este blog, y en mi blog funcionando, ahora sin el botón de Bitácoras. 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.
He eliminado también el código del botón de orkut ya que el servicio fue retirado.
Crédito por lo botones:
Iconos
Iconos
Etiquetas:Facebook,Iconos,Redes Sociales,Twitter,Widgets