Create Printer Friendly Blog Pages with Simple CSS

Create Printer Friendly Blog Pages with Simple CSS

This CSS trick shows how to optimize your blog printer. When readers print your web articles, they will get a clean version of the story without any sidebar, Google ads, logos, navigation links and other additional elements.

Create Printer Friendly Blog Pages with Simple CSS
Create Printer Friendly Blog Pages with Simple CSS

You may read – Increase Your Blog’s RSS Subscriber Count with Bloglines Tool

Jay White writes – “Have you got a good way to allow readers to print individual post content without all the sidebar, ads and headers that are messing up the print format?”

You may read – Podcasting Vs Broadcasting: Which is the Best for Your Blog?

Additional stuff like logo, forms, navigation links, ads, blogrolls, flash widgets, etc. can look good on your blog page, but these elements are almost useless for those people who want to print web pages on paper Are there.

How To Create Printer Friendly Web Pages With Print Style Sheets

With less effort, you can turn your blog into a printer friendly and eco-friendly website (because the readers will consume less ink paper while printing your articles).

Step 1: Create a new CSS file (let’s call it print.css) and add the following lines:

// black text on white background

Body {

Font- family: aerial, helvetica, sans;

Font -size: 13px;

Background: fff;

Color: 000;


// Do not underline links

a, a: visited, a: link {

Color: # 000;

Text-decoration: none


.noprint {

display none


Step 2: Open the HTML source of your main blog template and attach everything other than the content (such as sidebar, ad block, header logo, footer, etc.) within the following <span> tags

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

You are directing the browser to not print anything that appears inside the above tags.

Step 3: Add the following line to your blog template under the <HEAD> tag

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

Bus. To see how it works, choose File-> Print Preview from your browser’s menu or press Ctrl + P.

You may read – Provide Visitors with an Easy Way to Promote Your blog on the Web

This technique is not only effective for the printed version of your web pages, but also for PDF – If someone prints your blog as a PDF document, then a clean version of the article without the extra bell-n-whistle will see. See – “Print to PDF button for blog”

Shares 0

Leave a Reply

Your email address will not be published. Required fields are marked *