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:

Imprimir el artículo