La taza de café

Image via Wikipedia

Hace poco dediqué un post de La taza de café al cómo hacer para que los nevagantes impriman y guarden los posts de nuestro weblog en pdf. En ese post expliqué varias maneras de implementar esta funcionalidad en el blog.
Ahora les dejo otra que hace poco hallé en la red y que tiene la particularidad de ser un botón que funciona para ambas cosas, tanto para imprimir como para guardar nuestras entradas en pdf.

Les dejo varios diseños de este botón que al pincharse lleva a la página del servicio Print Friendly, que permite escoger entre las dos opciones (imprimir o guardar el blog en pdf) e incluso hacer las dos cosas si queremos.

Cada uno de estos botones puede colocarse en la barra lateral o justo antes de las entradas, para que salga siempre a loa cabecera de nuestra última publicación. Para colocarlo en uno de estos dos lugares sólo se tiene que llevar el código a un nuevo elemento de página (Diseño, luego "Elementos de la página", luego "Agregar nuevo elemento"; escoger "HTML/Javascrpt") y una vez agregado a los elementos de nuestro blog colocarlo en el lugar donde querramos aparezca.

Si por el contrario se desea que el código salga al final de cada entrada debe pincharse la pestaña de Diseño "Edición de HTML", y allí buscar dentro de nuestra plantilla (ayudándonos con Ctrl+F) la frase post-footer-line-3'> ; justo después de la comilla que cierra debe colocarse el código de nuestro botón.

Estos son los diferentes íconos de Print friendly de los que pueden escoger el que más les convenga:


Botón pequeño, "print / pdf":


<div id="pfButton"><link rel="stylesheet" href="http://cdn.printfriendly.com/printfriendly.css" type="text/css" /><script src="http://cdn.printfriendly.com/printfriendly.js" type="text/javascript"></script><a href="http://www.printfriendly.com" id="pfLink" onclick="window.print(); return false;" title="Print an optimized version of this web page or generate PDF" style="text-decoration: none;"><img id="printfriendly" style="border:none; padding:0;" src="http://cdn.printfriendly.com/pf-print-icon.gif" alt="Print"/><span style="font-size: 12px; color: #55750c;">Print <img id="printfriendly" src="http://cdn.printfriendly.com/pf-pdf-icon.gif" alt="Get a PDF version of this webpage" style="border:none; padding: 0;" /> PDF</span></a></div>


Botón mediano "Print friendly"


<div id="pfButton"><link rel="stylesheet" href="http://cdn.printfriendly.com/printfriendly.css" type="text/css" /><script src="http://cdn.printfriendly.com/printfriendly.js" type="text/javascript"></script><a href="http://www.printfriendly.com" id="pfLink" onclick="window.print(); return false;" title="Print an optimized version of this web page"><img id="printfriendly" style="border:none; padding:0;" src="http://cdn.printfriendly.com/pf-button-big.gif" alt="Print"/></a></div>



Botón más pequeño "print / pdf"


<div id="pfButton"><link rel="stylesheet" href="http://cdn.printfriendly.com/printfriendly.css" type="text/css" /><script src="http://cdn.printfriendly.com/printfriendly.js" type="text/javascript"></script><a href="http://www.printfriendly.com" id="pfLink" onclick="window.print(); return false;" title="Print an optimized version of this web page"><img id="printfriendly" style="border:none; padding:0;" src="http://cdn.printfriendly.com/pf-button-both.gif" alt="Print"/></a></div>



Otro donde se lee "Print friendly", más el icono convencional de imprimir:


<div id="pfButton"><link rel="stylesheet" href="http://cdn.printfriendly.com/printfriendly.css" type="text/css" /><script src="http://cdn.printfriendly.com/printfriendly.js" type="text/javascript"></script><a href="http://www.printfriendly.com" id="pfLink" onclick="window.print(); return false;" title="Print an optimized version of this web page" style="text-decoration: none;"><img id="printfriendly" style="border:none; padding:0;" src="http://cdn.printfriendly.com/pf-icon.gif" alt="Print"/><span style="font-size: 15px; color: rgb(85, 117, 12);">Print Friendly</span></a></div>





Última opción, por si se desea sólo colocar un texto como link o si se quiere usar una imagen de botón propio (en el caso de sólo texto como link usar este código cambiando la frase que coloco en mayúsculas para que sea más visible al final del código: Print Friendly, por otra que querramos usar/ en el caso de querer colocar una imagen propia a modo de botón esta debe subirse a un servicio de alojamiento de imágenes como Image Shack, y colocarse la dirección dentro del siguiente código, sustutuyendo la que aquí aparece ; después debe colocarse el código anterior completo luego de frase "text-decoration: none;"> del código que sigue):


<div id="pfButton"><link rel="stylesheet" href="http://cdn.printfriendly.com/printfriendly.css" type="text/css" /><script src="http://cdn.printfriendly.com/printfriendly.js" type="text/javascript"></script><a href="http://www.printfriendly.com" id="pfLink" onclick="window.print(); return false;" title="Print an optimized version of this web page" style="text-decoration: none;"><span style="color: rgb(85, 117, 12);">PRINT FRIENDLY</span></a></div>