Digital Inspiration

about    faq    contact

Create Printer Friendly Blog Pages with Simple CSS

eco printer friendly blog

Jay White of DumbLittleMan.com writes - “Have you found a good way to allow readers to print individual post content without all of the sidebars, ads and headings messing up the print format?”

Extra stuff like logos, forms, navigation links, advertising, blogrolls, flash widgets, etc may look good when your blog page is viewed inside the web browser but these elements are almost useless for people who want to print out web pages on paper.

How to Create Printer Friendly Web Pages with a Print Style Sheet

With little effort, you can turn your blog into a printer friendly and environment friendly website (since readers will consume less ink and paper when printing your articles).

Step 1: Create a new CSS File (print.css) and add the following lines:

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} // This will do the magic

Step 2: Open the HTML source of your main blog template and enclose everything other than the content (like the sidebars, ad blocks, header logo, footers, etc) inside the following <span> tag

<span class=”noprint”> ….. </span>

You are instructing the browser not to print anything that appears inside the above tag.

Step 3: Add the following line inside the <HEAD> tag of your blog template

<link rel=”stylesheet” media=”handheld,print” href=”print.css” />

That’s it. To see how this works, click here and go to File->Print Preview.

This technique is not just effective for printed version of your web pages but even for PDFs - if someone prints your blog as a PDF document, they’ll see a clean version of the article without the extra bells-n-whistles. See - “Print to PDF Button for Blogs

Previous: How to Enable Printer Friendly Blog Pages

Email This   Print Article   Save as PDF   Subscribe   Translate 

Published on January 18, 2008 under Internet, Web Design
Tags: , , , , , ,

Recommended Google Software:

You may also like to read ..

 · Make a Mobile Friendly Version of your Blog with Google Reader
 · Live Q&A With Google Webmaster Team - Summary
 · Use CSS For Better Organic Search Rankings
 · How to Completely Test Your Website
 · CSS Text Painting of George W. Bush - No Images, Only HTML

Reader Comments

#1 Debashish 01.18.08

Very nice tip indeed and it arrived at a point when I needed it really :) Thanks.

#2 anonymous 01.18.08

Astonishingly, your blog does not have a separate print view!

#3 Veerasundar 01.18.08

Good tip.

#4 Vineet 01.18.08

Thanks for ur great explanation. This is really something great for me as i m also a blogger as well as a reader

#5 Michael 01.18.08

Thanks - Just learning css. Will try to adopt the code…

#6 Chanky 01.19.08

Ha ha ha ha… lol… Look like a CSS class is going on…

It’s a tip for small kids.

#7 Nascar 01.20.08

Thanks for the tip. Separating CSS for screen and print is a very useful feature. A lot of web dev teams should apply this feature to make websites more friendly for printers.

#8 Manpreet Singh 01.20.08

Good CSS class by you..Amit :)..Thanks for sharing

#9 Mr. Quotes 01.21.08

Excellent! This will definitely help alot for creating user friendly blogs.

#10 Gopal Aggarwal 03.03.08

you are a genius! why? because what you are creating is not rocket-science, just using the basic stuff to create things that are so useful

keep up :)

Add a Comment

If you have a question that is not related to the above discussion, please post your question in the message board for quick answers. All comments are moderated.



 

Joing the Facebook Group

Visit Help Central

 

© 2008 Digital Inspiration - Technology, à la Carte | Mobile Edition | Videos | Terms

The articles are copyrighted to Amit Agarwal and can only be reproduced given the author's permission.

My Google  Netvibes  My Yahoo!  Windows Live  Bloglines  Newsgator  

Skip to top of the page ^^