3 may. 2013

Cómo hacer que Blogger pueda imprimir tus entradas


Cuando escribimos un blog, normalmente pensamos en escribir el contenido, publicarlo y ofrecérselo así a todos nuestros usuarios. Pero, ¿qué sucede cuando el usuario necesita llevarse la información que proporcionamos fuera de la pantalla del ordenador?.

Hoy día la mayor parte de nuestros consumidores cuenta tablets, smartphones y mútiples dispositivos que pueden ahorrarle la necesidad de utilizar su ordenador de sobre mesa para ver nuestras entradas de Blogger.

Pero ¿y el clásico papel?, llevarnos por ejemplo la receta de cocina impresa o los pasos para realizar una cosa u otra, el texto de un poema o un escrito...

En general, la necesidad de imprimir ciertos datos es algo que deberíamos ofrecer a nuestros clientes en ciertas circunstancias. Si quieres aprender cómo incorporar un botón de impresión de los datos de tu entrada, este artículo te interesa.



Vamos a explicar cómo aprovecharnos de la potencia de Javascript para imprimir, evitando tener que utilizar "plugins" o accesos a otras web para realizar los trabajos de impresión, que en primer lugar consumen muchos recursos en el cliente y en segundo lugar retardan en exceso la carga de la página.

Os expondré dos formas de hacerlo, una que imprime todo lo que hay en pantalla y otra que sólo imprime la entrada que el usuario está visualizando en pantalla.

Para Imprimir todo lo que se presenta en pantalla a parte de la entrada seleccionada por el usuario:


1) Accedemos a la entrada en la cual deseamos añadir la posibilidad de realizar una impresión. Pulsamos sobre el botón "HTML" a la derecha del de "Redactar".



2) Escribimos el siguiente código que a continuación explico:
<br />
<br />
<a href="javascript:window.print()"><img border="0" src="http://icons.iconarchive.com/icons/artua/dragon-soft/32/Printer-icon.png" /> Imprimir entrada </a>
  • Recordad no dejar retornos de carro o espacios en blanco incorrectos en el texto que copieis y peguéis en vuestro blog. Se trata de código, no de texto puro y eso hace que no funcione si se ponen caracteres incorrectos que no comprenda el navegador.
  • Cada etiqueta "<br />" le indica al navegador que cuando dibuje nuestra página meta un retorno de carro (un "enter") antes del texto que le siga.
  • La etiqueta "<a href="javascript:window.print()">" referncia un enlace a la función .print de javascript que al referenciar directamente al imprimir del navegador, no penalizará la carga de nuestra página al dibujarse.
  • < img border="0 establece que entre el icono que he puesto para la impresora y el texto "Imprimir entrada" no hay ningún borde.
  • El fuente src="http://icons.iconarchive.com/icons/artua/dragon-soft/32/Printer-icon.png indica la URL a la imagen del icono de impresora que deseemos utilizar. Hay miles de iconos, podemos bajarlo como imagen y utilizarlo directamente desde nuetro blog o referenciar la URL al que más nos guste que veamos en las imágenes de Google
Os dejo un ejemplo de cómo quedaría:

Imprimir el artículo

Para imprimir sólo la entrada que el usuario ha seleccionado:

1) Es un poco más complejo, pues sólo funcionará correctamente si estás utilizando los .css de Blogger y las clases de Blogger.

2) En primer lugar nos vamos a la edición de la plantilla en HTML. Es decir, dentro de Blogger nos dirigimos a la opción plantilla y pulsamos "Editar HTML".



3) Antes del cierre de la etiqueta </head> metemos este código:

<style media='print' type='text/css'>#header-wrapper,
#header, .header, #sidebar-wrapper, .sidebar, .post-footer, #footer-wrapper,
#footer, .date-header, #comments, .post-meta-data, .comment-link,
.comment-footer, #backlinks-container, #blog-pager,#navbar-section, .navbar,
.subscribe_notice, .noprint {display: none;}#main-wrapper {width:
95%; overflow: visible !important;}</style>
hemos introducido en la plantilla general de nuestro blog un "estilo" que le indica a la impresora lo que NO queremos que aparezca en la impresión. Cada una de las clases que llevan "#" son los gadgets que no queremos que se muestren al imprimir.


4) Accedemos a la entrada en la cual deseamos añadir la posibilidad de realizar una impresión.

3) Pulsamos sobre el botón "HTML" a la derecha del de "Redactar".

4) Escribimos el siguiente código que a continuación explico:

<b:if cond="data:blog.pageType == &quot;item&quot;">
<a href="javascript:window.print()">
<img alt="Imprimir" border="0" height="30" src="http://icons.iconarchive.com/icons/artua/dragon-soft/32/Printer-icon.png" style="float: left; margin: 0 1em 1em 0;" title="Imprimir" width="30" />
Imprimir el artículo</a>
</b:if>
Este código utiliza Window.print al igual que el anterior, pero está tirando directamente del estilo que hemos introducido en la Plantilla, con lo que cuando intente imprimir, sólo lo hará de aquello que hayas indicado en el estilo que puede imprimir.


Os dejo un ejemplo de cómo quedaría:

ImprimirImprimir el artículo

Escrito por Miguel García Sánchez - Colomer

Dispuesto a ayudarte con tu Blog en todo lo posible, Diarios de la nube es mi medio para llegar hasta ti. El conocimiento es universal, es del mundo, es de todos, esta es mi parte y la comparto contigo.

38comentarios:

  1. Gracias Miguel eres un Crac. Lo copio y voy a probar a ver como me queda.

    ResponderEliminar
  2. A mi me pasa como a Pau, las nuevas tecnológias genial, pero el papel es el papel. Te tenemos frito, :-)))) Muchas gracias por tu visita. Buen fin de semana

    ResponderEliminar
  3. Tú artículo me ha sido super útil, como siempre. ¡Gracias Miguel!

    ResponderEliminar
  4. Cualquier cosa que necesitéis para vuestro blog o sobre hardware o software, aquí me tenéis. Si queréis añadir algo a vuestros blogs, pedidmelo y busco la mejor forma de hacerlo.

    ResponderEliminar
  5. Super util Miguel! voy a ver como lo cambio. Como vas de peticiones aquí va una: poner los botones de compartir en las redes sociales debajo del titulo! que los tengo debajo de la entrada y los quiero cambiar de sitio. Saludos

    ResponderEliminar
  6. Muy util!!Gracias...Como yo te empiece a pedir,con la de arreglillos que quiero hacer!!!:)

    ResponderEliminar
    Respuestas
    1. Tere, sin problemas, será un placer. Comenta lo que necesites. Saludos!

      Eliminar
  7. Es Sencillamente bueno y lo he puesto en practica en un minuto, en otros sitios me lo ponian muy cuesta arriba, pero aquí de lo más sencillo gracias de parte de Sebastián

    ResponderEliminar
    Respuestas
    1. Gracias a ti Sebastián, aqui me tienes si necesitas algo para tu sitio web o blog.

      Eliminar
  8. quiero estar en esta pagina

    ResponderEliminar
  9. Tengo una duda con respecto a esto ¿cada vez que decida que quiero que algo se pueda imprimir tengo que meter los código uno por uno en cada entrada que redacte?.

    ResponderEliminar
    Respuestas
    1. No, puedes meterlo en el "post footer" de tu plantilla. Si te metes en modo edición HTML de tu plantilla (haz copia de seguridad primero), busca "post footer" y ahí van los botones de cada entrada. Al dejar ahí el icono de la impresora, se verá en todas las entradas.

      Eliminar
    2. Busca "post-footer-line" y mételo la última vez que aparezca (en el modo edición de HTML de la plantilla, haciendo "clic" dentro del HTML de la plantilla, si pulsas Control + F te saldrá una cajita de búsqueda y busca ese texto).

      Saludos!,

      Eliminar
    3. Gracias Miguel!, lo intento hacer esta tarde y si me encuentro con problemas ya te preguntaré. Un saludo!

      Eliminar
    4. ¡Sin problemas!, aquí estoy para lo que necesites.

      Eliminar
  10. no me aparece el icono de imprimir ke hago

    ResponderEliminar
    Respuestas
    1. Hola André,
      necesito el código que has puesto para ponerte el icono de imprimir. A ser posible dame la dirección de tu web para poder verlo "in situ" y tratamos de arreglar el problema. Un saludo!,

      Eliminar
  11. Me ha venido de perlas, llevaba intentandolo un montón de tiempo y con tus instrucciones, lo he conseguido a la primera.
    Muchas gracias

    ResponderEliminar
  12. Hola miguel soy Sebastián hoy he arreglado la impresora y he decidido comprobar si funcionaba el imprimir la entrada en que estaba el icono de imprimir, mi sorpresa fue grande cuando vi que imprimía desde el principio del blog y no solo la entrada que yo quería, ¿Qué es lo que me ha pasado si seguí los pasos completo de tu gran entrada para imprimir.

    ResponderEliminar
    Respuestas
    1. Hola Sebastián,
      no te preocupes. Eso es que al tocar la plantilla o similares, has borrado la parte de la edición del código que se encarga de decirle a la impresora lo que puede imprimir y lo que no.

      Vuelve a realizar la guía pero desde el epígrafe:

      "Para imprimir sólo la entrada que el usuario ha seleccionado"

      Cualquier duda me vas preguntando. En cuanto hagas esa parte lo tienes.

      Un saludo!,

      Eliminar
  13. Hola de nuevo miguel acabo de hacer lo que me dices y lo he hecho de nuevo desde donde me dices y no consigo hacer la impresión de la entrada sola sino que me imprime desde el principio del blog ya no se que hacer más mi blog es
    http://clientesdethermomix.blogspot.com.es/
    por si le quieres echar un vistazo.

    Muchísimas gracias por perder tu valioso tiempo con un novato como yo Graciiiiiiiiiiiiiias

    ResponderEliminar
  14. Hola miguel he conseguido imprimir pero tengo que seleccionar ante y en la ventana de impresión coger la opción de selección. Pero ahora me sale la letra muy pequeña y casi no se ve. Me puedes orientar para solucionar el problema.

    ResponderEliminar
    Respuestas
    1. ¿Conseguiste sólo de la zona que te interesaba?. Es que no veo la "impresora" para hacer una prueba. Pero no debería salirte la letra pequeña. Pon el código temporalmente y hago una prueba para ver qué se puede hacer.

      Un saludo Sebastian.

      Eliminar
  15. Hola Miguel por mucho que quiera siempre me sale la letra muy pequeña, por favor dime si tiene solución el problema, Ahora he puesto la impresora que tu me pides. Un saludo muy grande para ti miguel y a todos los que te siguen que son muchos

    ResponderEliminar
    Respuestas
    1. Sebastian,
      no te preocupes que sale. Mete el código y hago una prueba para ver qué está sucediendo. Pon la impresora y lo pruebo. Cuando lo tengas avisa y me conecto para ver qué sucede. No te desesperes que al final sale. Un saludo y ánimo.

      Eliminar
  16. estimado amigo; tengo 65 años, y de capacidad menos 10.mi blog fue hecho por mi hija que es bióloga y tiene su vida y no puedo molestarle
    deseo tener la posibil idad de imprimir ,y no entiendo ni un caramelo
    Recurriré a alguien que me lo haga, te felicito por tu capacidad,nunca entenderàs, que lo que a ti se te hace facil para otros que tenemos capacidades diferentes se nos complica, Soy un poeta, virtud que me tocó en reparto, y los ordenadores, no los puedo manejar facilmente .
    josealicante88@gmail.com

    www.Elrugidodelrato.blogpot.com

    ResponderEliminar
    Respuestas
    1. Jose, en tu caso, si quieres comienza por el paso que prefieras y donde te atasques me vas escribiendo. Lo he hecho ya con otras personas (de todas las edades) y al final ha ido saliendo. Venga anímate y lo sacamos. Un saludo!.

      Eliminar
  17. Hola, me encanto el artículo y ahora trato de optimizar mi blog para satisfacer al lector asiduo.

    Gracias, me encanto y si quiere que nos intercambiemos los enlaces para enriquecer las visitas en ambos blogs, saludos.

    Por sí quieres contactarme: wasterbull@gmail.com

    ResponderEliminar
  18. Gracias Sebastián, cualquier cosa aquí me tienes. Un saluso.

    ResponderEliminar
  19. Respuestas
    1. Gracias Sex Shop!,
      es una alegría que te haya funcionado. Para cualquier cosa aquí estoy. Un saludo!

      Eliminar
  20. Consegui poner el icono de print al final de cada entrada. Lo unico que cuando copio ese enlace para publicarlo en facebook me sale escrito con letras...imprime esta entrada. Como puedo quitarlo???
    te dejo el enlace en face de mi pagina para que lo veas.
    muchas gracias.

    https://www.facebook.com/madridamygusto

    ResponderEliminar
    Respuestas
    1. Hola!,
      prueba a quitar del <a href donde tienes la función window.print el texto que pone "Imprimir el artículo". Creo que te refieres a ese texto, ¿verdad?.

      Eliminar
  21. Hola miguel , no se como empesar ,me podrias indicar paso a paso es que soy muy torpe. Quiero imprimir todas mis recetas de mi blog y no se, gracias.

    ResponderEliminar
    Respuestas
    1. Hola José,
      estoy preparando un tutorial para la semana que viene dedicado a la impresión que sea incluso más sencillo que este. No te preocupes, aquí nadie es torpe, todo el mundo necesita que le expliquen las cosas, nadie nace sabido ;)

      En cuanto lo tenga te aviso.

      Un saludo!

      Eliminar
    2. Hola José, ya tienes tu guía: http://www.diariosdelanube.com/2015/01/como-anadir-un-boton-para-imprimir-en.html

      Un saludo!

      Eliminar

 

© 2015 Por: Miguel García Sánchez - Colomer en Diarios de la nube Todos los derechos reservados.