Sunday, April 27, 2008

How to Make Your Blogger Blog Printer Friendly

I like this blogger blog: free, easy to use and manage, tied to my existing Google account and adequate for my purposes. However not everything is exactly as I would like. For example, when I or a reader of my blog prints a blog post, I don't want the print-out to have

1. the top navigation bar that includes the search box and other buttons.
2. the right sidebar with links to my profile and other posts.

Also I want the content of the post to occupy the full width of the page, and not waste the space on the right side.

If your Browser is IE and you take a print out of this post or just look at the print preview, you will notice that the print-out doesn't have the top navigation bar and the right sidebar and the full width of the page is utilized, even though the screen shows something very different.

How did I do this? The trick is know that Blogger uses CSS to specify presentation characteristics and CSS allows separate specification for "screen" and "print" media and you can specify the CSS for "print" media by editing the layout HTML. For this blog, I simply added the following lines within the <head> element:

<style media="'print'" type="'text/css'">
#navbar {display:none;}
#main {width:100%;}
#sidebar-wrapper {display:none;}
</style>

These lines may or may not work for you, depending upon the template you have chosen. However, if you know a little bit of HTML and CSS it should be trivial to figure out what will work.

No comments: