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 Blogger 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:

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%; } }