Skip to main content

Blogger Hacks: How to Enable Printer Friendly Pages in your Blog

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">
#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>
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:

Lets say our HTML is something like:
<h1>Our story</h1>
<p>this is a para element one</p>
<img src="abc.jpg" />
<p>this is another para</p><br />
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:
<span class="noprint"><h1>Our story</h1></span>
<p>this is a para element one</p>
<span class="noprint"><img src="abc.jpg" /></span>
<p>this is another para</p><br />
This is just an example, you can enlose the entire div elements to hide big blocks of content.

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

Popular posts from this blog

How to Download Contacts from Facebook To Outlook Address Book

Facebook users are not too pleased with the "walled garden" approach of Facebook. The reason is simple - while you can easily import your Outlook address book and GMail contacts into Facebook, the reverse path is closed. There's no "official" way to export your Facebook friends email addresses or contact phone numbers out as a CSV file so that you can sync the contacts data with Outlook, GMail or your BlackBerry. Some third-party Facebook hacks like "Facebook Sync" (for Mac) and "Facebook Downloader" (for Windows) did allow you to download your Facebook friends' names, emails, mobile phone number and profile photo to the desktop but they were quickly removed for violation of Facebook Terms of Use. How to Download Contacts from Facebook There are still some options to take Friends data outside the walls of Facebook wall. Facebook offers the Takeout option allowing you to download all Facebook data locally to the disk (include

PhishTank Detects Phishing Websites by Digg Style Voting

OpenDNS, a free service that helps anyone surf the Internet faster with a simple DNS tweak , will announce PhishTank today. PhishTank is a free public database of phishing URLs where anyone can submit their phishes via email or through the website. The submissions are verified by the other community members who then vote for the suspected site. This is such a neat idea as sites can be categorized just based on user feedback without even having to manually verify each and every submission. PhishTank employs the "feedback loop" mechanism where users will be kept updated with the status' of the phish they submit either via email alerts or a personal RSS feed . Naturally, once the PhishTank databases grows, other sites can harness the data using open APIs which will remain free. OpenDNS would also use this data to improve their existing phishing detection algorithms which are already very impressive and efficient. PhishTank | PhishTank Blog [Thanks Allison] Related: Google

Digital Inspiration

Digital Inspiration is a popular tech blog by  Amit Agarwal . Our popular Google Scripts include  Gmail Mail Merge  (send personalized emails with Gmail ),  Document Studio (generate PDFs from Google Forms ) and   File Upload Forms ( receive files  in Google Drive). Also see  Reverse Image Mobile Search , Online Speech Recognition and Website Screenshots , the most useful websites on the Internet.