Cómo personalizar el botón de imprimir de PrintFriendly

En esta entrada veremos Cómo personalizar y Cómo poner un botón distinto al que que ofrece PrintFriendly; ya que puede ser que no te guste ninguno de los botones de imprimir que te ofrece PrintFriendly, o quieres crear uno que se adapte mejor al diseño de tu plantilla.

A- Cómo personalizar PrintFriendly

Cuando creamos del gadget, encontramos una serie de campos en el apartado "Features". Estos parámetros nos permitirán personalizar algunas de las funcionalidades de PrintFriendly. 

1. Page header: Cabecera del documento, por defecto toma el icono del blog (favicon) y la URL del blog, podemos subir un icono y modificar el texto de visualización.
2. Click-to-delete: Activa/Desactiva la posibilidad de permitir eliminar texto del documento haciendo click (por defecto se permite).
3. Images: Indica si se mostrarán imágenes en el documento PrintFriendly (por defecto se muestran).
4. Image style: Permitir mostrar imágenes, aquí hay que optar por el tipo de alineación que tendrá: derecha, izquierda, ninguna o centrado en bloque.
5. Email: Activa/Desactiva la posibilidad de enviar por correo electrónico.
6. PDF: Activa/Desactiva la funcionalidad de generación de PDF.
7. Print: Activa/Desactiva la opción de imprimir.
8. Custom css url: URL que apunta hacia una hoja de estilos personalizada, donde podremos sobrescribir el comportamiento por defecto de los estilos de PrintFriendly.
9. Website protocol: Protocolo Web a utilizar: HTTP/HTTPS. En el caso de Blogger, la opción por defecto es la correcta: HTTP.

Custom css url:
Para ver como funciona este campo. Supongamos que queremos mostrar todas las cabeceras en #76a5af, cuando el lector opta por imprimir, hay que seguir los siguientes pasos :

• Abrimos cualquier editor de textos (Notepad)
• Copiamos el código CSS siguiente:

#printfriendly h1, #printfriendly h2, #printfriendly h3, #printfriendly h4 {
 color: #76a5af;
}

• Guardamos el archivo con el nombre "printfriendly.css"
• Subimos el archivo a cualquier servicio de alojamiento: Drive, hosting propio, etc. 
• Colocamos en el campo "Custom css url" la URL de donde subimos nuestro archivo.

Cuando realizamos este proceso y generamos el gadget, al pulsar el botón de imprimir aparecerán todas las cabeceras del color que hallamos elegido. Para ver todos los estilos CSS que puedes sobrescribir, puedes ir a la página de soporte de PrintFriendly.

B- Cómo poner un botón distinto al que ofrece PrintFriendly

• Buscamos un icono, para esto te recomiendo Iconfinder, una herramienta estupenda, donde podrás buscar prácticamente cualquier icono. Intenta buscarlos pequeños (24, 48, ...), puesto que si los eliges grandes pueden salirse de los márgenes máximos.
• Obtenemos la URL del nuevo icono. Para hacer esto debemos subir el icono a cualquier servicio de alojamiento y copiar la dirección (URL) en el que esté ubicado.
• Modificamos la URL del botón de PrintFriendly. Para persolnalizar el boton de PrintFriendly, vamos a Blogger > Diseño > localizamos y editamos el gadget de PrintFriendly, en el que aparecerá un texto como este:

<script>var pfHeaderImgUrl = '';var pfHeaderTagline = '';var pfdisableClickToDel = 0;var pfHideImages = 0;var pfImageDisplayStyle = 'right';var pfDisablePDF = 0;var pfDisableEmail = 0;var pfDisablePrint = 0;var pfCustomCSS = '';var pfBtVersion='1';(function(){var js, pf;pf = document.createElement('script');pf.type = 'text/javascript';if('https:' == document.location.protocol){js='https://pf-cdn.printfriendly.com/ssl/main.js'}else{js='http://cdn.printfriendly.com/printfriendly.js'}pf.src=js;document.getElementsByTagName('head')[0].appendChild(pf)})();</script><script type="text/javascript">var pfButtonHTML = '<a href="http://www.printfriendly.com" style="margin-top:0.5em; float:left;display:block; margin-right: 0.5em; color:#6D9F00; text-decoration:none;" class="printfriendly" onclick="window.print(); return false;" title="Printer Friendly and PDF"><img style="border:none;-webkit-box-shadow:none;box-shadow:none;" src="http://cdn.printfriendly.com/pf-button-both.gif" alt="Print Friendly and PDF"/></a>'; var pfBloggerJs; pfBloggerJs = document.createElement("script"); pfBloggerJs.type ="text/javascript"; js= "http://cdn.printfriendly.com/blogger.js"; pfBloggerJs.src=js; document.getElementsByTagName("head")[0].appendChild(pfBloggerJs);</script><span id="pf_locator"></span><script type="text/javascript">var f = document.getElementById("pf_locator");var c = f.parentNode.parentNode.childNodes;for (i=0;i<c.length;i++) { try { c[i].style.display = "none"; } catch (err) {}}</script>

• Localizamos el texto que aparece en color rojo y lo sustituimos por la URL que has obtenido anteriormente (Obtenemos la URL).
• Guarda el gadget y visualiza el blog, ya tienes el nuevo icono funcionando.

Como hemos visto si se quiere añadir un botón de imprimir al blog, PrintFriendly es una de las mejores opciones ya que es personalizable y practico, sin tener que editar el HTML de nuestra plantilla del blog en Blogger.