Tips to Create Printer Friendly Web Pages
Trying to create great looking web page we add various logos, navigation links, forms, flash widgets, blogrolls, etc. However, the things that look cool inside the web browser are useless for people who want to print out your web pages on paper. Here is a decision to turn your blog into a printer friendly website and to allow your readers to consume less ink to print your articles.
Step 1
Create a new CSS file with the following:
body {font-family: arial,helvetica,sans; font-size: 13px; background:fff; color:000;}
// Black Text on White Background
a,a:visited,a:link {color:#000; text-decoration:none}
// Do no underline links
.noprint {display:none} //
Step 2
Then, open the HTML source of your main blog template and enclose sidebars, ad blocks, header logo, footers, etc (except the content) inside the following <span> tag to instruct the browser not to print anything that appears inside this tag:
<span class=”noprint”> ….. </span>
Step 3
The last thing to do is to add the following line inside the <HEAD> tag of your blog template:
<link rel=”stylesheet” media=”handheld,print” href=”print.css” />
That’s all. Such technique can also be used if your readers want to print your blog as a PDF document.
Reference: www.labnol.org/internet/design/create-printer-friendly-blog-css-trick/2109/