How to Make your Page Printer-Friendly in Blogger

You’ve probably experienced printing you page and then unnecessary images and text like your header, footer, ads, etc. appear on your page, which is kinda annoying.
Thanks to Martin Gajurel this problem is solved. In this tutorial, we’ll see how Gajurel was able to print without the previously mentioned problems appearing. He added CSS and that did the trick to remove them.

Here’s how to do it.
1. Go to Blogger Dashboard > Template > Edit HTML
2. Search for <b:include data=’blog’ name=’all-head-content’/>
3. Add this code just below <b:include data=’blog’ name=’all-head-content’/>

<style media='print' type='text/css'> #header-wrapper, #header, .header, #sidebar-wrapper, .sidebar, #lower-wrapper, #footer-wrapper, #footer, #credit, .comment-form, .post-footer, #blog-pager, .post-feeds, #backlinks-container, #navbar-section, 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> 

4. In Lines 1,2,3, Gajurel has added codes that are exclude in Print paper. For Line 3, you’re going to make content width automatic to a printing paper and Line 4, you’re making a link to be underlined.
Note: You may also add Print this Button wherein users can click that button and they can print the page. Here’s how:
1. Dashboard>Template>Edit HTML.
2. Click Expand widget. It is located at the top right part of code window.
3. Search for the spot where you want to add Printer Button then add 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>

4. Save.