Create printer friendly blog pages

You’ve probably seen this “Print this article” feature numerous times, on news websites, those free articles websites and even cooking/recipes websites.

When you click the printer button or link, the print output would most likely be of a printer friendly version. This printer friendly thing, what is it anyway? Well it is a trimmed down version of your web page –usually excluding the unnecessary stuff like the header, navigation, sidebars, footer and the ads. That way your readers do not waste papers and ink. If your blog is about recipes, then I would say this feature is a must, because your reader will probably want to print out the recipe and take it to the kitchen.

The printer friendly version we are going to make is strictly for printer. There is no additional page created, so you will not be able to view it like a normal page. However you can still view the content before they print out, via Print Preview.

 

Step 1: Identify elements to be excluded

By default, if you were to print your blog, all items on the screen will be printed out. To create a trimmed down version, firstly you need to identify the contents or elements you want to exclude from printing. The elements come in form of  ids (the ones that begin with #) and classes (the ones that begin with a dot).

To identify the elements, you have to go through your blog template code. To do that:

1. Login to your to your Blogger account.
2. Go to Dashboard > Design > Edit HTML.

Go through your template CSS and HTML and come up with a list element to be excluded. For example, if you want to exclude you blog title, look for #header-wrapper or #header, if you want to exclude sidebars then look for #sidebar-wrapper or #sidebar etc.

 

Step 2: Adding the code

1. Back up your template first.
2. Look for <b:skin><![CDATA[ line in your HTML code:
3. Add the following code immediately before that line.

<style media='print' type='text/css'> 
#linkbar-wrapper, #header-wrapper, #header, .header, #middleads-wrapper, #sidebar-wrapper, .sidebar, #lower-wrapper, #footer-wrapper, #footer, #credit, .comment-form, .post-footer, #blog-pager, .post-feeds, #backlinks-container, #navbar-section, #lowerbar-wrapper, #lowerads-wrapper, footer {display: none;} 
#content-wrapper, #main-wrapper, #main { width: auto !important; overflow: visible !important; float: none !important; color: black; font-size: 12pt; background: white; border: none; }
#main a { text-decoration: underline; color: blue; } 
</style>

The main thing the code does is to exclude the selected contents from printing, using display: none property. Place the ids and classes identified in Step 1 in front of {display: none;}. The ones shown above is just a guide, I use it for Blogger Sentral. Your template is most probably different from mine, so you may need to replace or add elements to suit your template. Separate each element with a comma.

That’s it, you’ve created a printer friendly version of your blog. To check the result, do a print preview, if you find something that doesn’t belong there, find the corresponding id or class in your template HTML, and add it to the exclusion list in line 2.

Note: If you are using Firefox and when you do a print preview only one page came out, the cause probably there are overflow: hidden in your CSS. What you want to do is to identify the containing elements (e.g. #main-wrapper) and add them into line 3.

 

Step 3: Adding a print button (optional)

You may want to add a “Print this page” link or button just like in the picture. This code will invoke printing when the button is clicked.

To install the button, follow the instructions in Adding a Twitter “Tweet this” button into blog post. Use the code below to replace the tweet-this code.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<a href="javascript:window.print()"><img border="0" style="margin-right:5px" src="YourImageUrl"/>Print this article</a>
</b:if>

where YourImageUrl is the link to your printer icon. If you want to skip the image just delete the <img…../> part.

The button will only appear in post pages (where it should be).

That’s all to it. Enjoy!

 

Technorati Tags: printer friendly