Mostrando las entradas con la etiqueta printing. Mostrar todas las entradas
Mostrando las entradas con la etiqueta printing. Mostrar todas las entradas

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!