Create printer friendly blog pages

print1You’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; } 

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>

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:

47 comments to "Create printer friendly blog pages"

iren June 20, 2009 at 8:51 PM    

Hi! Your blog is simply super. you have create a differentiate. Thanks for the sharing this
website. it is very useful professional knowledge. Great idea you know about company
background. Customized application development

Greenlava June 20, 2009 at 10:18 PM    

Hi iren, thanks.

Aimee Tay July 26, 2009 at 10:25 PM    

This article is really useful.


Greenlava July 27, 2009 at 1:07 AM    

Thanks Aimee.
For more articles you can use Lijit search or click All Posts tab on the menu bar.

Miss Kayla November 6, 2009 at 2:41 PM    

Thanks for sharing on how to make our blogs printer-friendly. I actually copied and pasted your code which got rid of most unnecessary stuff except for my Google Ads underneath the header and at the footers. I did notice that the comments printed out when printing one post though. I have a print button through AddThis. One wish: To keep the header with my logo at the top when printing. Thanks again.

Greenlava November 6, 2009 at 9:49 PM    

Miss Kayla,
To include your header in the printout, just delete #header-wrapper, #header and .header from the code.
To remove comments, add in #comments.

Rebecca December 7, 2009 at 12:10 PM    

Hi Greenlava!

I inserted the print code and it works beautifully! Just one thing...I have a text widget directly under the title of my blog and before the rest of the content of my blog. I can't seem to find the correct code in my CSS/HTML to add into your code to exclude that widget from printing.

I need your guidance again! Thanks!

Greenlava December 7, 2009 at 9:13 PM    

To find the widget id, go to Layout>Edit HTML. Use Ctrl+F to search for "widget id". You'll find many "widget id"s. You can guess which is which by their relative positioning inside the code.
BTW the text widget id is "Text4".

Rebecca December 8, 2009 at 1:57 AM    

I did it! This is what I added:

#navibar, #text4,

So does what I added look right? I printed and it looks great, but I just want to be sure.

You're a great teacher! Thank you.

Greenlava December 8, 2009 at 12:39 PM    

Yep, that's right.

Zalmy January 26, 2010 at 4:04 PM    

Thanks for this article! Works great. But I want to put the print button on the top of each post on the same line as the post title instead of the footer. Do you know where I could put the code to do that? (I was able to get it under the title on its own line but not alongside it on the right.) Thanks!

Greenlava January 27, 2010 at 8:56 AM    

Go to Layout>Edit HTML, click the Expand Widget Templates checkbox and find this code (replace [] with <>):
[h3 class='post-title entry-title']
put the button code (enclosed in span tags) right before that line, like this:
[span style='float:right;'][button code here][/span][h3 class='post-title entry-title']

Zalmy January 27, 2010 at 11:50 AM    

Perfect! Button is in the top right corner. Thanks!

Zalmy January 28, 2010 at 11:21 PM    

I want to remove the "post a comment" hyperlink and the print button we just added from the print version but I can't identify the corresponding element or class code to be able to include it in the list of items not to print.
The "post a comment" link especially since it often causes an extra blank page on the printout.

Zalmy January 28, 2010 at 11:24 PM    

To be clear, I am using the pop out comments which has a "post a comment" hyperlink at the end of each post.

Greenlava January 29, 2010 at 12:37 PM    

I don't have your blog url, so I'm guessing here.
Maybe you can try .comment-footer.

Zalmy February 2, 2010 at 12:10 AM    

.comment-footer it is. Blog post print versions now look neat and clean without all the extra clutter. Great article, simple easy to follow instructions. Thanks again!

SCCC Garden Club February 26, 2010 at 1:26 AM    

I have pasted the codes correctly with no success at all. Any suggestions?

SCCC Garden Club February 26, 2010 at 1:27 AM    

Let me add to above. When you click on print preview all the things I don't want to print, don't show up. Great news. BUT, I don't have a print this article where it will print only the one article and not all of them.

SCCC Garden Club February 26, 2010 at 1:50 AM    

I do have another question. Sorry for all this. The reason I said I didn't see the printer button is because you have to physically click on the article and its at the end of it and prints fine.

1st question. I would like for the printer button on the home page of each article. Can this be done?

2nd question. When it does print, it prints the little headers under the main header and all I am seeing different is #header-inner. Should I be looking for something different to add to the code so it won't print?

Greenlava February 27, 2010 at 9:38 AM    

@SCCC Garden Club
1. This code prints the content of current window. That's why I show it only on post pages. If we show it on homepage then the button (make it every button) will print multiple posts.
I understand what you are trying to do, I've tried it but got stuck (at integrating Blogger post url with Javascript).
2. Adding #crosscol-wrapper in code line 2 will remove it, together with the navigation bar.

SCCC Garden Club February 28, 2010 at 1:24 AM    

I put #crosscol-wrapper in the coding and it worked but when you do a print preview of the post, there is a blank page with the date, the next page has the post and then the 3rd page is blank. Is that suppose to happen?

Greenlava February 28, 2010 at 10:16 PM    

@SCCC Garden Club
All previews look fine from here, except "New Florida Plants for 2010". Yet turned out okay if I change the the scale (print zoom) to other than 100%.

Gina's Weight Watcher Recipes March 17, 2010 at 2:44 AM    

This has been so helpful!! There are a few things I can't figure out how to remove:
1. Navbar at the top
2. The Linkwithin widget below the post
3. The legal line below that
Thanks in advance!

Greenlava March 17, 2010 at 9:56 AM    

@Gina's Weight Watcher Recipes
Add this to "display:none":
#navbar, #lws_0, #Text3

Gina March 18, 2010 at 3:58 AM    

Excellent!! You are the best!! I'll be subscribing!

Faythe | Unsophisticated Coffee August 28, 2010 at 3:13 AM    

This information seems pretty helpful, and I am having a problem. I was able to put in the style sheet, but not the print button. For some reason, it is not working. Also, it would be great if I could place two buttons - one for print with images, one without. I would appreciate your help.

Greenlava August 28, 2010 at 7:15 PM    

@Faythe | Unsophisticated Coffee
You can't have multiple style tags with media:print attribute. So I guess you're stuck with one button :(

Srlmcb September 3, 2010 at 4:26 AM    

For some reason..mine didn't work..on my recipe blog I would just like the recipes to be able to print out. Thanks for having this site to help us new bloggers out!;)

Greenlava September 4, 2010 at 11:03 AM    

I don't see the code in your template.
I tested the code on your blog. It worked, albeit not perfectly. Anyway try this one (optimized for Template Designer templates):
[style media='print' type='text/css']
#navbar, header, .sidebar, .comment-form, .post-footer, #blog-pager, .post-feeds, #backlinks-container, footer {display: none;}
#main a { text-decoration: underline; color: blue; }
.main-inner .columns {width: 100%;padding-left:0 !important;padding-right:0 !important;}

jess c. January 11, 2011 at 6:56 AM    

Thanks so much for this great site. I am helping a friend to make her recipe blog printer friendly but I can't get her background to completely disappear. She has the code for her background in a Blogger HTML widget. I tried including #HTML1 which is the name of that widget but it still leaves a bar on each side. Here's the site: Thanks!!

Greenlava January 11, 2011 at 11:42 AM    

@jess c.
Try adding
body {background:none;}

Jide Ogunsanya April 24, 2011 at 2:32 AM    

Nice post, but I am really interested in how you removed the sidebar etc from your pages eg the SEO TOOLS page. Will be glad if there is a link to the tutorial. thanks.

Greenlava April 24, 2011 at 1:23 PM    

@Jide Ogunsanya
Welcome to BloggerSentral :)
Here it is: Apply different layout/styling to static pages

karen,  May 7, 2011 at 4:16 AM    

thakns so much for this. i took an html class in middle school and that's pretty much all i ever learned [that was 10 years ago!] i have a question though, what should i put to exclude the comments?

Greenlava May 7, 2011 at 5:44 PM    

Add this ID in line 2: #comments

Retete ilustrate July 8, 2011 at 12:45 PM    

Hello. I have a problem with my blog: I can't rid of the right sidebar. At the end of post you will find the Test Print Page button. Thanks in advance! Have a nice day!

Greenlava July 8, 2011 at 10:54 PM    

@Retete ilustrate
Looks like you've solved the problem, congratulations!

jorden June 6, 2012 at 6:58 AM    

Hello dear.You have written a great post. Going to share with my followers on twitter. Thanks for sharing.


Janiperker July 26, 2012 at 2:56 PM    

This article is very useful for me.How i know more details?

Arifikhin July 26, 2012 at 2:57 PM    

I like this post.I think this is very informative for all.

mithu October 26, 2012 at 2:10 PM    

Hi Greenlava, Thanks for this great post. Is it possible to print only a certain section of the post. When user click print this section should open that in new tab and then if they like allow them to print.
one example site how to do this?

Greenlava October 30, 2012 at 5:24 PM    

That's a WordPress blog, maybe they use a plugin to generate a separate page for printing.
You can try It allows users to choose which parts of a page get printed.

mithu November 2, 2012 at 3:14 PM    

Thanks for the information. But i don't like to add 3rd party widget. so im going to implement your code for the moment. Share with us , if you find any way to do that in blogger.
Thanks in advance

kinkos Chantilly November 26, 2012 at 6:39 PM    

Thank you so much for this blog. I was actually looking for a way how to make our printing services website printing ready and user friendly.

Fairfax Printing December 1, 2012 at 10:44 AM    

Hi Greenlava! Thanks for sharing this blog. It helps me a lot in setting-up our website blog site to make it printer ready/friendly. It actually works!

Suja Md April 5, 2013 at 11:24 PM    

Wow!! excellent!! your answer to Gina...helped me a lot...I could reach your site only with yahoo search.thanks god I landed here..Your are great!

Post a Comment

We love to hear from you! Leave us a comment.

To ensure proper display, HTML/XML/Javascript need to be escaped first using this escape tool.

Click to go to top Click to comment