Add Print and PDF buttons to your posts

I see more and more blogs with articles containing an invitation to print it. If implemented properly this can be a significant convenience for the reader and as such it is worth exploring.

Let us a look at a few ways of adding this button for Blogger / Blogspot blogs. These tricks involve logging in to the Dashboard, clicking the Design button for your blog, then Edit Html and checking the Expand Widget Templates box. You can then click inside the box and make modifications there. Prior to doing so you should click Download Full Template and save a backup copy somewhere so that you can backtrack in case you make a mistake. Before committing any changes to the template, you might want to click Preview (though this is not always accurate). If something’s wrong, you can revert to the last saved template with Clear Edits.

1. js only

The easiest trick performs no modification of the page and is the equivalent of the user choosing Print from his browser’s File menu or pressing Ctrl + P. Go into your template and substitute the following code for <p><data:post.body/></p> :

<span class='noprint'><data:post.body/></span> <b:if cond='data:blog.pageType == &quot;item&quot;'> <a href='javascript:window.print()'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKaT2sifhMQs-syYwEvf_21-5Snf_Pi0IUdwPkAViLb01VdGwmzutSdgDiHORL0w19zel3qWp3mWJZzTwFSOSS-rlxXUfs6H4MCQi3WbvcKIAkhzXzhnn-Es9-W49yxcYLK7vZZVDXAVxd/s400/printButton1.png'/></a></b:if>

<span class='noprint'><data:post.body/></span> <b:if cond='data:blog.pageType == &quot;item&quot;'> <a href='javascript:window.print()'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi86DzUp_xqm4qGRVTZsb2jwIaNB2pLIOMLuG2a8C8G2ov1SBtZ3TNhYSjqvZW5IH5oQwQCJJYM25wDoc904Gd6ZnffKXf43uHPNfv257_BrBwy3HkaaVfC3p1SjopQxUPLWrOd4J4sGSRT/s400/printButton1.png'/></a></b:if>

<span class='noprint'><data:post.body/></span>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<a href='javascript:window.print()'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJoAXlncrkxnjLV2Yh2NQcwrkPSjhw5NvHzjw3YKb3GYliNak8hKfH-T8l92e_vzf-u3Ubqo1AAkwJlOT-virDiBFID8fhrS0NMSYNealrLoDLOEzAjDGgi3TLUHLt9hN1uSwzqTGfiM_c/s400/printButton1.png'/></a></b:if>

As it is very simple, this trick does very little in terms of removing images, the sidebar, etc.

2. friendly

A Web 2.0 service allows some formatting of the page to be printed. Here’s my favourite:

Copy and paste the following code snippet into the template, right after the <div class='post-footer'> tag.

<!-- BEGIN PrintFriendly Code --><b:if cond='data:blog.pageType == "item"'><div class='pfButton'><link href='http://cdn.printfriendly.com/printfriendly.css' rel='stylesheet' type='text/css'/><script src='http://cdn.printfriendly.com/printfriendly.js' type='text/javascript'/><a href='http://www.printfriendly.com' class='pfLink' onclick='window.print(); return false;' style='text-decoration: none;' title='Print an optimized version of this web page or generate PDF'><img alt='Print' class='printfriendly' src='http://cdn.printfriendly.com/pf-print-icon.gif' style='border:none; padding:0;'/><span style='font-size: 12px; color:'#55750c;'>Print <img class='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><b:else/><div class='pfButton'><a expr:href='data:post.url + "?pfstyle=wp"' style='text-decoration: none;' title='Print an optimized version of this blog post or generate PDF'><img alt='Print' class='printfriendly' src='http://cdn.printfriendly.com/pf-print-icon.gif' style='border:none; padding:0;'/><span style='font-size: 12px; color: #55750c;'>Print <img class='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></b:if><!-- END PrintFriendly Code -->

The downside of using this code is that you become dependent on an outside service which may either shutdown or choose to insert ads or even malware into your page.

3. localized

If you want to get the advantages of superior formatting as above but but avoid using an external Javascript consider the following modification to our first solution, as presented in 2008 by Amanda at Bloggerbuster. The trick is to add the following media=’print’ style to the head of your template.

Firstly, add just above </head> the following CSS code:

<!--Print-Button-BEGIN-->
<style media='print' type='text/css'>
#header-wrapper, #header, .header, #sidebar-wrapper, .sidebar, #footer-wrapper, #footer, .date-header, .post-meta-data, .comment-link, .comment-footer, #blog-pager, #backlinks-container, #navbar-section, .subscribe_notice, .noprint {display: none;}
#main-wrapper {width: 95%}
</style>
<!--Print-Button-END—http://3w.blogidol.ro>

Secondly, place one of the following 3 options immediately after <data:post.body/>:

• simple link Print this post:

  <b:if cond='data:blog.pageType == &quot;item&quot;'>
  <a href='javascript:window.print()'>Print this post</a>
  </b:if>

• button link (it may look different on your blog as you can CSS-style it):

  <b:if cond='data:blog.pageType == &quot;item&quot;'>
  <form> <input type="button" value="Print This Page" onClick="window.print()" /> </form>
  </b:if>

• Printer icon (you may use any other self-hosted image or an image from the first solution): Print this post

  <b:if cond='data:blog.pageType == &quot;item&quot;'>
  <span style='background: url(http://cdn.printfriendly.com/pf-pdf-icon.gif) left no-repeat; padding-left: 20px;'><a href='javascript:window.print()'>Print this post</a></span>
  </b:if>

4. desktop

Though not about blogging, we feel compelled to let our readers know that one can easily print his own documents to PDF from any application, using the easy to install and free PDF printer, without the expensive and clunky Adobe Acrobat. Alternatively, you may also use a free application such as Open Office Portable, which you can install to your hard drive or even on a USB stick and allows you to save documents directly in PDF format. The advantage of PDFCreator is that you can “print” to PDF from any Windows application.

Many people consider OpenOffice to be an application superior to Microsoft Office. The reason why it is not embraced by corporations has probably more to do with the excellent and successful FUD marketing campaigns and the fact that Ms Office comes with better workgroup features – i.e., it takes some power away from the user and hands it over to the network administrator for a significant fee.

Sources / More info: bh-addprint, blogfuel, printfriendly, bloggerbuster, pdfforge

Blog Idol, print, pdf, addon, add-on, button