La taza de café

La opción de imprimir el blog es algo que puede hacerse fácilmente desde una computadora bien configurada, pero siempre es una ventaja brindar al visitante de tu blog un botón bien visible que le permite y le invite a un tiempo a imprimir la página si esta es de su interés.

Coloco a continuación cinco maneras sencillas de colocar la opción Imprimir y/o Guardar la página como PDF en tu blog:



1) Agregar la opción como link, con el texto "Imprimir página", "Imprimir blog" o lo que quieras poner en su lugar
2) Agregar la opción como un botón con texto
3) Agregar la opción con una imagen de impresora u otra (aquí puedes escoger si colocas la imagen más el texto o sólo la imagen como un link)
4) Agregar la opción como un botón que permite guardar la página en PDF
5) Agregar cualquiera de las opciones anteriores pero al final de cada entrada o post

Aquí vamos:

1) Agregar la opción como link, con el texto "Imprimir página", "Imprimir blog" o lo que quieras poner en su lugar

PRIMER PASO: agregamos JUSTO ANTES de la frase /head (ve a Diseño, luego a la pestaña Edición de html):

(PARA COPIAR EL TEXTO HAZ CLICK DENTRO DEL CUADRO Y CON EL COMANDO Ctrl+A, SELECCIONA TODO EL CÓDIGO, LUEGO USA Ctrl+C PARA COPIAR)

<style media='print' type='text/css'><br />#navbar-iframe {display: none; height: 0px; visibility: hidden;}<br />.noprint {display: none;}<br />body {background:#FFF; color:#000;}<br />a {text-decoration: underline; color:#00F;}<br />}<br /></style>

SEGUNDO PASO: ahora debemos decidir en qué lugar de la página vamos a colocar la opción. Debemos tener en cuenta que mientras más visible sea más posibilidades tendrá de ser utilizado. Puedes colocarlo al inicio del sidebar o fijo al inicio del blog, justo antes de las entradas (recuerda que en Blogger sólo tienes que arrastrar el nuevo elemento agregado al lugar de la página que mejor te convenga).

A continuación el código que debes pegar en Diseño, pestaña "Elementos de página"; una vez allí pinchar el link "Agregar un nuevo elemento". Cuando se abra la ventana emergente seleccionar HTML/Javascprit, es aquí donde debes pegar este código (sustituye el texto en mayúsculas por el texto que deseas aparezca como link):

(PARA COPIAR EL TEXTO HAZ CLICK DENTRO DEL CUADRO Y CON EL COMANDO Ctrl+A, SELECCIONA TODO EL CÓDIGO, LUEGO USA Ctrl+C PARA COPIAR)

<a href="javascript:window.print()">IMPRIMIR PAGINA</a>

2) Agregar la opción como un botón con texto

PRIMER PASO: agregamos JUSTO ANTES de la frase /head (ve a Diseño, luego a la pestaña Edición de html):

(PARA COPIAR EL TEXTO HAZ CLICK DENTRO DEL CUADRO Y CON EL COMANDO Ctrl+A, SELECCIONA TODO EL CÓDIGO, LUEGO USA Ctrl+C PARA COPIAR)

<style media='print' type='text/css'><br />#navbar-iframe {display: none; height: 0px; visibility: hidden;}<br />.noprint {display: none;}<br />body {background:#FFF; color:#000;}<br />a {text-decoration: underline; color:#00F;}<br />}<br /></style>

SEGUNDO PASO: ahora debemos decidir en qué lugar de la página vamos a colocar la opción. Debemos tener en cuenta que mientras más visible sea más posibilidades tendrá de ser utilizado. Puedes colocarlo al inicio del sidebar o fijo al inicio del blog, justo antes de las entradas (recuerda que en Blogger sólo tienes que arrastrar el nuevo elemento agregado al lugar de la página que mejor te convenga).

A continuación el código que debes pegar en Diseño, pestaña "Elementos de página"; una vez allí pinchar el link "Agregar un nuevo elemento". Cuando se abra la ventana emergente seleccionar HTML/Javascprit, es aquí donde debes pegar este código (sustituye el texto en mayúsculas por el texto que deseas aparezca como link; puedes personalizar el tamaño del botón aumentando o disminuyendo el valor de la etiqueta "tabindex", que yo coloco en 6):

(PARA COPIAR EL TEXTO HAZ CLICK DENTRO DEL CUADRO Y CON EL COMANDO Ctrl+A, SELECCIONA TODO EL CÓDIGO, LUEGO USA Ctrl+C PARA COPIAR)

<a href="javascript:window.print()"><button id="printbutton" disabled="disabled" tabindex="6">IMPRIMIR PAGINA</button></a>

3) Agregar la opción con una imagen de impresora u otra (aquí puedes escoger si colocas la imagen más el texto o sólo la imagen como un link)

PRIMER PASO: agregamos JUSTO ANTES de la frase /head (ve a Diseño, luego a la pestaña Edición de html):

(PARA COPIAR EL TEXTO HAZ CLICK DENTRO DEL CUADRO Y CON EL COMANDO Ctrl+A, SELECCIONA TODO EL CÓDIGO, LUEGO USA Ctrl+C PARA COPIAR)

<style media='print' type='text/css'><br />#navbar-iframe {display: none; height: 0px; visibility: hidden;}<br />.noprint {display: none;}<br />body {background:#FFF; color:#000;}<br />a {text-decoration: underline; color:#00F;}<br />}<br /></style>

SEGUNDO PASO: ahora debemos decidir en qué lugar de la página vamos a colocar la opción. Debemos tener en cuenta que mientras más visible sea más posibilidades tendrá de ser utilizado. Puedes colocarlo al inicio del sidebar o fijo al inicio del blog, justo antes de las entradas (recuerda que en Blogger sólo tienes que arrastrar el nuevo elemento agregado al lugar de la página que mejor te convenga).

A continuación el código que debes pegar en Diseño, pestaña "Elementos de página"; una vez allí pinchar el link "Agregar un nuevo elemento". Cuando se abra la ventana emergente seleccionar HTML/Javascprit, es aquí donde debes pegar este código (sustituye el texto en mayúsculas por el texto que deseas aparezca o elimínalo si sólo quieres la imagen como link; he puesto una imagen animada que me resultó atractiva, tú puedes probarla a ver si también te gusta o cambiarla por otra que encuentres en la web o que subas a un servicio de alojamiento de imágenes, como Flirck o Image Shack, una vez que tengas la dirección de tu propia imagen sustitúyela por la mía):

(PARA COPIAR EL TEXTO HAZ CLICK DENTRO DEL CUADRO Y CON EL COMANDO Ctrl+A, SELECCIONA TODO EL CÓDIGO, LUEGO USA Ctrl+C PARA COPIAR)

<a href='javascript:window.print()'><img border='0' src='http://img31.imageshack.us/img31/9265/impresora07.gif<br />'/><b>IMPRIMIR PAGINA</b></a>

4) Agregar la opción como un botón que permite guardar la página en PDF

ÚNICO PASO: Decide en qué lugar de la página vamos a colocar la opción. Debes tener en cuenta que mientras más visible sea más posibilidades tendrá de ser utilizado. Puedes colocarlo al inicio del sidebar o fijo al inicio del blog, justo antes de las entradas (recuerda que en Blogger sólo tienes que arrastrar el nuevo elemento agregado al lugar de la página que mejor te convenga).

A continuación el código que debes pegar en Diseño, pestaña "Elementos de página"; una vez allí pinchar el link "Agregar un nuevo elemento". Cuando se abra la ventana emergente seleccionar HTML/Javascprit, es aquí donde debes pegar este código:

(PARA COPIAR EL TEXTO HAZ CLICK DENTRO DEL CUADRO Y CON EL COMANDO Ctrl+A, SELECCIONA TODO EL CÓDIGO, LUEGO USA Ctrl+C PARA COPIAR)

<!--Start: PDF On Line Script--><br /><br /><script type="text/javascript"><br /><br />var authorId="1213B011-D26C-425F-8B81-D6E798E05769";<br /><br />var pageOrientation="1";<br /><br />var topMargin="0.5";<br /><br />var bottomMargin="0.5";<br /><br />var leftMargin="0.5";<br /><br />var rightMargin="0.5";<br /><br /></script><br /><br /><script type="text/javascript" src="http://web2.pdfonline.com/pdfonline/pdfonline.js"><br /><br /></script><br /><br /><!--End: PDF On Line Script-->

5) Agregar cualquiera de las opciones anteriores pero al final de cada entrada o post

PRIMER PASO: agregamos JUSTO ANTES de la frase /head (ve a Diseño, luego a la pestaña Edición de html):

(PARA COPIAR EL TEXTO HAZ CLICK DENTRO DEL CUADRO Y CON EL COMANDO Ctrl+A, SELECCIONA TODO EL CÓDIGO, LUEGO USA Ctrl+C PARA COPIAR)

<style media='print' type='text/css'><br />#navbar-iframe {display: none; height: 0px; visibility: hidden;}<br />.noprint {display: none;}<br />body {background:#FFF; color:#000;}<br />a {text-decoration: underline; color:#00F;}<br />}<br /></style>

SEGUNDO PASO: Ve a Diseño, luego a la pestaña "Edición de HTML". Busca (ayúdate con el comando Ctrl+F) la siguiente línea dentro de tu plantilla:

'post-footer-line post-footer-line-3'

Cuando la encuentres coloca justo después de ella el código que prefieras de los siguientes:

PARA Agregar la opción como link, con el texto "Imprimir página", "Imprimir blog" o lo que quieras poner en su lugar (cambia el texto en mayúsculas por el texto que desees)

(PARA COPIAR EL TEXTO HAZ CLICK DENTRO DEL CUADRO Y CON EL COMANDO Ctrl+A, SELECCIONA TODO EL CÓDIGO, LUEGO USA Ctrl+C PARA COPIAR)

<a href="javascript:window.print()">IMPRIMIR PAGINA</a>

PARA Agregar la opción como un botón con texto (sustituye el texto en mayúsculas por el texto que deseas aparezca como link; puedes personalizar el tamaño del botón aumentando o disminuyendo el valor de la etiqueta "tabindex", que yo coloco en 6):

(PARA COPIAR EL TEXTO HAZ CLICK DENTRO DEL CUADRO Y CON EL COMANDO Ctrl+A, SELECCIONA TODO EL CÓDIGO, LUEGO USA Ctrl+C PARA COPIAR)

<a href="javascript:window.print()"><button id="printbutton" disabled="disabled" tabindex="6">IMPRIMIR PAGINA</button></a>

PARA Agregar la opción con una imagen de impresora u otra (sustituye el texto en mayúsculas por el texto que deseas aparezca o elimínalo si sólo quieres la imagen como link; he puesto una imagen animada que me resultó atractiva, tú puedes probarla a ver si también te gusta o cambiarla por otra que encuentres en la web o que subas a un servicio de alojamiento de imágenes, como Flirck o Image Shack, una vez que tengas la dirección de tu propia imagen sustitúyela por la mía):

(PARA COPIAR EL TEXTO HAZ CLICK DENTRO DEL CUADRO Y CON EL COMANDO Ctrl+A, SELECCIONA TODO EL CÓDIGO, LUEGO USA Ctrl+C PARA COPIAR)

<a href='javascript:window.print()'><img border='0' src='http://img31.imageshack.us/img31/9265/impresora07.gif<br />'/><b>IMPRIMIR PAGINA</b></a>

PARA Agregar la opción como un botón que permite guardar la página en PDF:

(PARA COPIAR EL TEXTO HAZ CLICK DENTRO DEL CUADRO Y CON EL COMANDO Ctrl+A, SELECCIONA TODO EL CÓDIGO, LUEGO USA Ctrl+C PARA COPIAR)

<!--Start: PDF On Line Script--><br /><br /><script type="text/javascript"><br /><br />var authorId="1213B011-D26C-425F-8B81-D6E798E05769";<br /><br />var pageOrientation="1";<br /><br />var topMargin="0.5";<br /><br />var bottomMargin="0.5";<br /><br />var leftMargin="0.5";<br /><br />var rightMargin="0.5";<br /><br /></script><br /><br /><script type="text/javascript" src="http://web2.pdfonline.com/pdfonline/pdfonline.js"><br /><br /></script><br /><br /><!--End: PDF On Line Script-->