27 de febrero de 2007

Useful blogger design tools - part 3

How to nicely print out blog posts


It is sometimes annoying that when you print out a blog entry, the whole header and menus print with it and result in a big loss of paper which even doesn't look good. So the aim is to have a print function which prints out "clean", the single blog entry only, without header, side-bars, etc. I wanted to have a button under each post, similar to the "post blog" or "edit blog" button which are standardized in blogger. Awaiting a blogger routine, this is what I did:

Adapting a printing style-sheet

I base myself mainly on this nice article. Read also the classic article here. On the basis of this, create a separate css print style-sheet, with a few adaptations for your blog. Use wordpad to do this. (You can also refer to the print.css i made for my blog: here. Change the portions of elements to hide, if necessary, and the http address.

Now upload the css file to the web. I used googlepages.com (if you have a gmail account, you automatically have a googlepage).

Next you link to the style-sheet to your blog by inserting in the html header section:

<link rel="stylesheet" type="text/css" href="http://www.yourdomain.com/print.css" media="print" />

That's it, it should work. When you print, it should come out fine and economical. (it doesn't run perfectly smooth for mine, some longer documents don't print correctly, but I hope I can resolve that - any hints?).

Print button

You can however further add a print button, or simply a linked "print", to your page. If you want to place this below your post, in one line with the "comments" and "post to" symbol, you need to edit a widget in the html template. It is probably best to put it in the "post-footer-line-1". For this, expand the widget template (click small box on right top of html). Write this just before the last </p>

right above the first line of "post-footer-line-2":

<a href='#' onclick='window.print();return false;'>print>

Good luck!