Según en qué tipo de blogs puede tener mucho sentido un botón de imprimir asociado a cada entrada. Imagínate un blog de recetas de cocina o un blog de manualidades. A parte de imprimir también podremos descargar el post en PDF.
De todos los servicios evaluados te recomiendo PrintFriendly (haz clic para ver el botón de impresión estándar del servicio). Puedes personalizar el botón y obtienes un código para Web, Blogger y WordPress. Una vez puesto, al hacer clic se abre una nueva ventana de PrintFriendly como si de una vista previa se tratara. El usuario puede elegir entre imprimir, exportar a PDF o enviar por email. Puedes incluso quitar texto. También te explican como ponerlo en el blog (paso 7 en adelante en este tutorial).
Una vez visto, si el resultado es el que esperas ya has terminado. Si por el contrario quieres mejorar el código o personalizar el icono con otro gráfico sigue leyendo.
Pasos para mejorar el código de PrintFriendly y agregar un icono personalizado
- Conseguir el icono de impresión. Te recomiendo el servicio www.iconfinder.net
- Elige bien el tamaño del icono, el que yo seleccione es de 24px*24px
- Descarga en formato PNG hasta tu ordenador
- Ahora debemos alojar el PNG. Te recomiendo Google Sites (ya lo vimos cuando hablamos de los iconos sociales en el blog), el cual te permite crear un sitio web y también alojar archivos para luego acceder a ellos desde el blog, sigue estos pasos:
- Entra en Google Sites
- Abre tu sitio o crear uno nuevo (recuerda que el sitio que tengas debe ser público)
- Ve a la opción Administrar Sitio desde el que podrás subir archivos adjuntos.
- Sube el icono de impresión que has elegido.
- Ahora fíjate en el código HTML Mejorado de PrintFriendly (un simple enlace):
- Copia el fragmento de HTML hasta un bloc de notas para personalizarlo.
- Cuando lo tengas, cópialo y ve a la Pestaña Plantilla y luego a Editor HTML
- Por seguridad haz una copia de la plantilla "Descargar plantilla completa".
- Busca <b:include data='post' name='shareButtons'/> (usa el buscador del navagador).
- Pega el código que copiaste justo debajo de la linea que has encontrado.
- Guarda la plantilla y visualiza el Blog.
<a expr:href='"http://www.printfriendly.com/print?url=" + data:post.canonicalUrl' target='_blank'><img alt='Imprimir o exportar PDF' src='https://sites.google.com/site/iniciablog/PDF24.png'/> </a>
En lo seleccionado en rojo desde indicar la dirección url de tu sitio y el archivo PNG
El mi caso el sentido que tiene este botón es que te sirva a ti y puedas aplicarlo con éxito. Deja tus comentarios. Gracias.
Extensión de PrintFriendly para Google Chrome
Si usas Google Chrome, quizás te interese valorar la extensión correspondiente a PrintFriendly para agregarla a tu navegador.
Actualizado el 08 de Enero de 2013
Muchas gracias por esta información. La acabo de instalar en mi blog, y funciona.
ResponderEliminarSaludos.
Hola Yolanda,
ResponderEliminar¡Muuuchas gracias por tu comentario!. Han pasado varias semanas desde que publiqué esta entrada y pensé que nadie estaría interesado.
He visto tu blog y me ha gustado mucho ¡felicidades!
Te recomiendo valores tambien poner el botón de me gusta y el de twittear en cada entrada. Mira el indice de contenidos de iniciablog
Hola iniciablog!!! Enhorabuena por el premio.
ResponderEliminarTe escribo, porque no me reconoce el dibujo el Señor Blogger, cuando lo inserto en la plantilla. He escogido el tamaño de 24px, como tú, pero nada... ¿se te ocurre alguna solución? Muchas gracias!!!
Hola trasteando,
ResponderEliminarmuy fácil, envíame el enlace hasta el gráfico que quieres insertar. Recuerda que si lo has subido hasta GoogleSite, éste debe ser público. Cuando lo subas hazlo al directorio raiz.
Comentame
He probado de instalar la impresora en mi blog pero no he podido. Los preparativos han ido bien, pero a la hora de buscar la frase: , el buscador no la ha encotrado. Me puedes ayudar?
ResponderEliminarHola Angels,
ResponderEliminarPrueba con esta otra cadena.
<div class='post-footer-line post-footer-line-1'
Pega el código debajo. Esto se debe al tipo de plantilla que usa (mas antigua), por ello no encontraste el código anterior.
Gracias por tu comentario,.
Comentame si resolvistes, así como un link a tu blog para verlo.
Hola, Me sabe mal, pero la máquina tampoco ha encontrado esta cadena. Te digo el blog: angels-eljardidelesfades.blogspot.com
ResponderEliminarHola Angels,
ResponderEliminarNo te preocupes que no paramos hasta no ver ese botón. Comentarte que he buscado la segunda cadena de codigo que te dí y si lo encuentro en el código fuente de tu blog.
Haz una cosa, antes de buscar en Diseño>Editor de HTML haz clic en expandir plantilla de artilugios.
y vuelve a buscar, toda la cadena o parte de ella. tiene que estar Angels, inténtalo y me dices.
Suerte!
Lo he conseguido!!
ResponderEliminarMuchas gracias!!
Bien!!!! que alegría Angels
ResponderEliminarYa lo he visto en tu blog
Perfecta la explicacion, no sabia como hacerlo y va de maravilla.MUCHAS GRACIAS.
ResponderEliminarGracias Yeti por tu comentario.
ResponderEliminarUn abrazo! oye que buena pinta "La cocina de paco"
http://yeti-lacocinadepaco.blogspot.com/
Lo he intentado mil veces y no lo consigo pero me guardo este pdf de tu entrada a ver si asi lo consigo esta vez. Desde el primer dia quiero tener este boton
ResponderEliminar¿Que significa expandir plantilla de artilugios?¿qué consecuencia trae?.
Hola BeatriZ,
ResponderEliminarSe me habia pasado tu comentario, disculpa. Lo has podido hacer?....puedo ayudarte?
Coméntame..
Como prueba lo coloque en 3 entradas de mi blog, pero al final lo que manda a imprimir es una receta en la que no esta instalado
ResponderEliminarHola Luis Mathieu,
ResponderEliminarPodrías indicarme la dirección de tu blog para verlo y tratar de averiguar qué está pasando.
Muuuchas gracias por tu comentario.
Un saludo, Jesús
Dios llevo toda la tarde y no entiendo nada.....esos códigos y tanto lio para poder imprimir, por favor explicalo para novatos!!!!!!
ResponderEliminarEn este rincón....
ResponderEliminarsi no lo has podido aplicar es porque no esta bien explicado...asi que tomo nota para hacer más sencilla la explicación. Vuelvo a avistarte cuando lo tenga actualizado...
Muchas gracias por comentármelo.
Un saludo, Jesús.
hace 1 mes que tengo un blog (bueno, 2) y no tengo ni idea de informatica ni de artilugios ni de codigos fuente ni na, pero he conseguido poner la impresora en mi blog http://cucharitaytenedor.blogspot.com/
ResponderEliminargracias!!!
Fantástico, me ha sido de mucha utilidad. Y creo que muy bien explicado. Gracias
ResponderEliminarGracias, lo he visto en tu blog funciona a las mil maravillas. Gracias por el comentario.
EliminarJesús González
Gracias, tocayo, me han sido muy útiles tus consejos. Te seguiré visitando y recogiendo soluciones a las dudas que se van presentando, a medida que profundizo en la estructura del blog y sus artilugios en esta plataforma de Blogger.
ResponderEliminarUn saludo afectuoso.
Gracias,hay que seguir aprendiendo...:-))
ResponderEliminarGenial, ahora puedo tener mis entradas en pdf y mis lectores también.
ResponderEliminarAl igual que los demas botones, lo he insertado en la caja flotante y queda chulo, jeje
Mil gracias Jesús
Que haría yo sin este blog.
Prometo escribir una entrada sobre el.
Saludos
Gracias Jose Antonio, por tu visita y por el comentario!
EliminarMe alegra mucho que lo tutoriales te estén sirviendo para tu blog.
Un verdadero placer!
Seguimos conversando, ok.
Jesús González
Que bien queda! Muchas gracias por compartir tus magníficas ideas!
ResponderEliminarUn saludo
Genial!
EliminarAdemás tu blog está guapísimo, gracias por comentar y darme la oportunidad de verlo.
Graciasp or comentar en esta entrada.
Hola, andaba buscando una manera de poner un botón de imprimir, para que imprima las entradas individualmente, porque el que tengo imprime todas las entradas seguidas y he intentado poner tu botón pero no hay forma, ¿me podrías explicar como lo hago en Wordpress.es?, no tengo ni idea. Perdona las molestias. Saludos.
ResponderEliminarHola Mª Carmen,
EliminarRealmente me pones en un aprieto con Wordpress ya que no lo conozco. Estoy fundamentalmente especializado en Blogger.
Por favor revisa este enlace que te lleva a una especie de asistente donde puedes indicarle que tienes Wordpress y debe instalarlo automáticamente, es lo menos que puedo hacer.
Muchas gracias por tu visita y por este estupendo comentario.
Jesús González
Muchas gracias. Lo he instalado en mi blog y funciona perfectamente. Llevaba tiempo queriendo poner este recurso. Un saludo desde mi mejana
ResponderEliminarPerfecto Felipe!,
EliminarHe visto tu blog y he visto el botón. Efectivamente funciona perfectamente. Gracias por comentar y compartir tu blog con nosotros.
Te sigo a través de Google+
Jesús González
Hola, estoy intentado incorporar este boton a mi blog, pero me sale este mensaje "Error al analizar XML, línea 1247, columna 764: The content of elements must consist of well-formed character data or markup."
ResponderEliminarSEguro q hago algo mal, pero no se en q momento y el q.
Podrias echarme una mano, x favor?
Un saludo y muchas gracias por currartelo tanto.
Por cierto, el editor HTML, me sale en la pestaña de plantilla y no en la de diseño. Por lo demás, encuentro todos los pasos, inserto el codigo (q es enorme) y cuando guardo plantilla me sale el mensaje ese.
ResponderEliminarGracias de nuevo.
Hola Boga,
EliminarLlevas razón la pestaña es la de "Plantilla" no la de diseño, acabo de actualizar el post.
Con respecto al error me temo que hay algo mal en la url del archivo que estas copiando. Puedes darte la url del icono que le quieres poner y yo te digo donde está el problema.
Gracias por comentar.
Hola Jesus, intento pegarte el codigo y me dice...
ResponderEliminar"Su HTML no es aceptable: Etiqueta no permitida: SCRIPT"
Así q no puedo copiartela.
Los pasos q hago son:
1. voy al enlace q tienes puesto de http://www.printfriendly.com/button
2. marco lo deseado q es:
Blogger/ icono segundo (impresora/Pdf encuadradas)/ Install Blogger Widget
3. en el siguiente paso ya me da el codigo, pero ya no consigo pasar de aqui.
:(
Gracias por tu ayuda de antemano.
Un saludo :)
Ya he conseguido solucionarlo.
ResponderEliminarUn saludo y gracias
Perfecto, Gracias!
EliminarLo acabo de añadir a mi blog y me he quedado alucinada de lo fácil que ha sido, sólo elegir las opciones de la impresora y listo, muchas gracias. Aquí sigo cotilleando por tu blog para ver que puedo mejorar en el mío teniendo en cuenta que no soy muy amiga de las nuevas tecnologías... jeje. Gracias a tu blog seguro que aprendo muchas más cosas. Por cierto,¿ por casualidad no tendrás algún tutorial de como mejorar las entradas en el blog con cuadros de separación?, por ejemplo, si hago una receta y quiero poner los ingredientes en una especie de cuadro y la elaboración en otro. No sé si me he explicado. Un saludo.
ResponderEliminarHola Merce,
EliminarMuchas gracias por tu comentario, no sabes lo mucho que me alegra que lo consiguieras.
Con respecto a tu segunda pregunta, no tengo nada en iniciaBlog que pueda ayudarte en ese sentido. Si ves algún blog que lo tenga, escribe y vemos cómo lo ha hecho.
Te recuerdo que también puedes presentar tu blog en Todo Blogger en Español, es una comunidad de usuario que he creado en Google+.
Un abrazo