Based on reader feedback, we have now added a "Print this Document" button (or hyperlink) to all our blog pages that converts the current webpage into a printer friendly format and sends it to your printer for printing. To see an example of how the final print version of the page would look like, either click this link [Print Page] or select File->Print Preview from your browser menu bar. You will notice that the print version of the page is stripped of all the bells-n-whistles like the header graphics, sidebar text, footer information, language translation flags, search box and the comments saving your expensive printer ink and pages. Only web images that are part of the blog post are printed in the final document and rest all the fancy items of the page are omitted.
Now if you are looking to add a similar feature in your blog, here's a simple step-by-step tutorial on how to do it. The trick involves some bit of CSS/Javascript and should work across all blogging platforms (Wordpress, Blogger) and personal homepages (like Geocities or Googlepages) where the owner has access to the website layout template.
Step 1: Add the following line to your blog template inside the <head> tag (copy-paste should work)
<style type="text/css" media="print">Step 2: Identify all the areas (or HTML elements) in your blog template that you want to hide in the printer friendly version, ie the sections that you don't want to appear in the print copy. Enclose them under <span class="noprint">..</span> tags. I will show you an example below:
#noprint {display: none;}
// Hide unwanted elements
body {background:fff; color:000;}
// Black text on White background
a {text-decoration: underline; color:00f;}
//Underline Hyperlinks in blue
}
</style>
Lets say our HTML is something like:
<h1>Our story</h1>Now in the print version, suppose you want to hide the H1 header and the image. So we will just enclose them inside the span tags like below:
<p>this is a para element one</p>
<img src="abc.jpg" />
<p>this is another para</p><br />
<span class="noprint"><h1>Our story</h1></span>This is just an example, you can enlose the entire div elements to hide big blocks of content.
<p>this is a para element one</p>
<span class="noprint"><img src="abc.jpg" /></span>
<p>this is another para</p><br />
Step 3: We are almost done, your site visitors won't see the extra luggage when they print your blog posts. If you also want to add a "Print this page" button your blog, add the following HTML snippent anywhere on the page.
<a href="javascript:window.print()">Print Page</a>Remember that the above creates a printer friendly version only in memory and directly submits it to the printer. The user is not able to see the electronic version of the print version unless he prints it to PDF using Acrobat or other PDF creation tools.
If you want to build a functionality like The New York Times or Wall Street Journal paper where readers have an option to convert any HTML page into a text only version which can then either be printed or saved an HTML text file for offline reading, stay tuned for the next part of this tutorial. It involves HTML forms and query parameters.
Related Hacks: How to Reduce Printing Cost of Web Pages, Handling CSS Images in Blogger Templates
Find this article at: http://labnol.blogspot.com/2006/08/blogger-hacks-how-to-enable-printer.html
web: http://www.labnol.org/ email: amit@labnol.org
Reader Comments
Hello:
Your blog is very interesting.
I will return more times.
I wait for your comments in EG.
You can translate the posts with the Babel translator.
Greetings
Written by
José Alberto Mostardinha on 17/8/06 9:26 PM
#noprint {display: none;} should be .noprint {display: none;} as long as you use "noprint" as a class not an ID name.
Written by
TomekK on 19/10/06 8:53 PM
I tried this and it didn't work. It still printed the sidebar, and since I have 1,000+ links that leads to a waste of paper...
Do you mind looking at my blog and making a suggestion on how I could better effect this great idea?
Thank you.
Written by
Richard Layman on 21/12/06 6:43 AM
I have a Blogger site that uses some frames. When I try to print I am asked if I want to print each frame individually or as laid out on the screen.
No matter what I select I am only able to print the top portion of the site.
Have you seen this before? Would you mind sharing your experience to help me fix the problem in short order?*-
Written by
Tommie Carter on 3/3/07 2:46 PM
If you use '#noprint', you can only use it once because it is an id name. '.noprint' is a class name and goes with 'class=noprint'
Written by
Trend Breaker on 1/7/07 8:42 PM
Hello Amit!
Thank you for this post, I'm searching to "plug-in" this hack in my blogger blog, like your blog.
I try it but it doesn't run, I'm sure that is for my fault but is a lot codes to add "noprint" :(
It's possible to made it the oposite way:
For example, now I have to add noprint in all area that I don't want to show in the print; Is posible to say all area not show all less "yesprint"?
Because in this case, only we need it to add "yesprint" only in the area code in the data post.
Is possible?
Thank you very much! By bye
Written by
Ignasi on 12/7/07 4:02 PM
As suggested above, you could theoretically do a .printYes class. The only way I can think of doing this is to first set everything to not display with :
*
{
display:none;
}
.printYes
{
display:block;
}
I have not tested this so I can't verify whether or not this works. The user can also preview the results of the print without printing by using Print Preview.
Written by
Sensa on 16/8/07 2:00 AM
What about Beta blogs, how can we implement the span class in the XML template of the New(Beta) Blogger. Have you explained it in some other post on your blog regarding the same topic?
Written by
Ashok Kumar on 15/10/07 4:04 PM
Perfect man, I can now understand why your blog is so successful :) good one keep going
Written by
Atul Kumar on 20/10/07 12:51 AM