25 May 2012

Make Blogger more printer-friendly

In the current digital world, printing is probably not a big priority for someone building a site, let alone for small- to medium-sized blogs. Nevertheless, some users might want to keep a PDF- copy of some articles, so it’s nice to offer a dedicated layout for print. Unfortunately, Blogger templates don’t offer native print support, as it’s mostly a niche feature most blog owners wouldn’t ask for. So I set out to build my own print style-sheet using CSS media queries.

The idea is pretty simple: you basically want to reset colors and background images to a more print-safe black & white and hide all page elements that don’t make sense in a static medium as print, namely navigation, sidebars and widgets, sharing buttons, the footer, videos and other interactive content e.g. the comment form. But the task is made harder by the way templates handle sidebars, with a combination of margins and padding, probably to keep the best compatibility with older versions of Internet Explorer.

After some experimenting I managed to put together a simple workable solution. Besides Internet Explorer, who supported media queries only starting with version 9, all other desktop browser are fully compatible with this code, so the results should be pretty consistent. Also, the solution works automatically whenever the user starts the printing process, so there’s no learning curve and no extra buttons to click on the page. The code is all-purpose, designed to work on most blogs as long as they employ the standard Blogger templates – with some small exceptions, namely the last section where I added a couple of classes and ID’s I manually added in my template. You can safely leave that part out, as it’s unlikely you would have the same classes on your blog or that they would serve the same purpose as on my blog. I haven’t tested this with dynamic templates, but since they are mainly rendered in JavaScript I think it’s safe to assume this is not going to work for them.

To add the CSS code, go to ‘Template’ on the new Dashboard, click ‘Customize’, then ‘Advanced’ ► ‘Add CSS’ and paste the code in the box – if you have other CSS customizations saved here, add the print CSS preferably at the bottom, to make this the last thing the browser reads and renders on the page.

@media print {
/* hide Blogger bar */
#navbar-iframe {
display: none; }
/* Reset colors to black text on white background and background images */
.header, .footer-outer, .post-outer {
background-color: white; background-image: none;
color: black; text-shadow: none; }
/* Hide Pages, sidebars, embedded videos & iframes */
.tabs-outer {
display: none; }
.sidebar {
display: none; width: 0%; }
iframe, object {
display: none; }
.blog-pager, .quickedit, .post-feeds, .post-share-buttons, .comment-replybox-thread {
display: none; }
/* Reset post width to fill the entire page */
.main-inner, .columns {
padding-left: 0px !important;
padding-right: 0px !important;
width: 100%; }
.content-outer {
margin: 0px; width: 100%; }
.content-inner {
padding: 0px; width: 100%; }
.post-outer {
border: none; width: 100%; }
/* Specific for my blog */
#footer-2-1, #footer-2-2, #sharenav, .buttonlist, .videocontainer {
display: none; }
}

And the result on the right, compared to the default look for printing:Blogger default print vs modified print layout with CSS queries

This is, of course, only a starting point, as there are many other CSS tweaks that can be applied to make the print experience better. You can get more insight into this technique in this article from “A List Apart”.

Update: A couple of weeks after my article the Blogger team did a hangout on Google+ on the same subject. The solution presented also involves CSS media queries, but the code is a little different and shorter. I didn’t had a chance to test it until now, but I’ll share it below nonetheless:

@media print {
 #header, #sidebar-wrapper, #nrelate_related_placeholder, .e-comment-form, .jumplink, .page-navigator { display: none; }
 #main-wrapper { width: 100%; } }

13 comments:

  1. Hello George. Apollo here from Print Friendly. We have a great blogger-specific solution for cleaning up a web page before printing or saving to a pdf. If you decide to try us, we'd love to get your feedback.

    Thanks!

    printfriendly.com
    facebook.com/printfriendly
    @printfriendly

    ReplyDelete
    Replies
    1. Thanks for the comment and for the suggestion, Apollo! I'll give it a try sometime. I see you didn't have any luck with dynamic templates either...

      Delete
    2. As a matter of fact, our tech is literally tearing his hair out trying to find a solution. I don't envy him. :)

      Delete
    3. Have you found a solution yet on how to get a print friendly button on dynamic templates?

      Delete
    4. No, and to tell you the truth I haven't really searched. I don't plan on using dynamic templates, they are a lot less customizable and slow to load.

      Delete
  2. Hey! Keep it up! Thank you so much for sharing this information. You have such an awesome page. This could help me out with my business. I'll be looking forward for your other posts as well .I'd just like to share this one: Cheques should either be printed with liquid ink or on special cheque paper with toner anchorage. For similar reasons carbon film ribbons for IBM Selectric typewriters bore labels warning against using them to type negotiable instruments such as cheques. The machine-readable lower portion of a cheque, however, must be printed using MICR toner or ink. Banks and other clearing houses employ automation equipment that relies on the magnetic flux from these specially printed characters to function properly. Every print job is important to us and we treat all print jobs as if they were our own.
    Printer Salem MA

    ReplyDelete
  3. I think this is a unique way to tell about our business, and it help in the business.

    ReplyDelete
  4. Great post. Which kind of printer can print the Metal business cards?

    ReplyDelete
  5. Great post, though i altered and added few extra codes for my blog. like:

    @media print {
    .noprint {
    display:none;
    }
    }

    and use class="noprint" for hiding other elements.

    ReplyDelete
  6. thanks for your information i used it on my blog...
    i have one extra question how to add conversion forms to my blog
    http://gisrteam.blogspot.com

    ReplyDelete
    Replies
    1. I'm not sure what a conversion form is, could you elaborate?

      Delete
  7. Is there a code for the NEW Blogger? this code was written 5 years ago? and I cant not get printer friendly button to work on my blogger blog

    ReplyDelete