Monday, June 25, 2007

Adding a "Print this" option for your blog.

Here is a hack to enable your blog visitors to be able to print your blog, HP has provided a hack. This is what you need to do. As usual, BACKUP your template before you make any changes to the template. See Backing up and changing New Blogger template.

In your template, paste this script just below the <head> tag: (actually, it can be anywhere between the <head> and </head> tags, but pasting it immediately after the <head> tag is the easiest and the easiest to explain):

<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>

Preview, and if everything seems OK, click "Save Template"

Then in one of your post (or all your posts if you want) put this at the bottom of the post in the post editor window:

<a href="javascript:window.print()">Print Page</a>

If you want the "Print Page" to appear in all your post, go to SETTINGS > FORMATTING and paste the above into the post template window.

To see an example, go to My Photo Store. I have only put "Print Page" in the first post (sticky post) "Picassa - Google Photo software". Don't try clicking on this button if you have your printer connected and switched on. You are going to waste a lot of paper. Install CutePDF writer (search for that in the search box above for the site to install this). You will have to install 2 things, the free CutePDF writer and the free GPL Ghostscript 8.15 converter. An extra option will be added to your choice of printers. If you have that installed, click "Print Page" and select "CutePDF Writer" as the printer and the page will be printed to a PDF file, saving you lots of paper and ink/toner.

22 comments:

  1. that's a great tip, but what if I just want to be able to print one post, not the whole page? even when I do this in one post it prints the whole page...

    ReplyDelete
  2. Hi Rafi,

    That is all I can manage. For printing one post at a time, for the moment I don't think it is possible, but HP solution for this is still beta and who knows what they will eventually comes up with.

    Peter (Blog*Star 2006 and 2007)
    Generating Revenue from your Website

    ReplyDelete
  3. Thanks for dropping by the Profile Directory. I was happy to list both your profile pages.

    ReplyDelete
  4. Thanks Peter. i tested it and while it printed the post, what would be really good would be if it could format it for printing, meaning adjust the margins, cut out the side stuff... etc...

    ReplyDelete
  5. Thanks for this post!

    To print to pdf, you can also use Primopdf. Free and painless...

    ReplyDelete
  6. Hi Steven&co,

    Thanks for the extra useful information. However, I have been quite happy with CutePDF printer and am a bit reluctant to download new similar programs. However, there is something that attracts me, that is, Primopdf is supported by the new Vista. Perhaps one day I may be tempted enough to download it and test.

    Peter (Blog*Star 2006 and 2007)
    Generating Revenue from your Website

    ReplyDelete
  7. Hi Peter!

    Interesting post, maybe I'll put this hack in my blog ;)

    My post about add a new section in the blogger sidebar, help you? I wish did it!

    Well... I keep reading your blog, I'm thinking to add more adsense in my blog, but I don't know which kind.
    Take care!

    ReplyDelete
  8. Hi Ignasi,

    That is useful info which I hope to try one day. Only trouble is I have so many things waiting for me to do. As soon as I am finished, I think I will test it out on a different template from yours, and if things go smoothly, I will do a post on the test and link to your post.

    BTW, you used http://pastebin.ca/525643
    to put your codes in. I tried copy-pasting this into Notepad and ended up with

    1.
    .sidebar2 .widget {
    2.
    margin:.5em 13px 1.25em;
    3.
    padding:0 0px;

    This I believe will mean that a lot of editing will need to be done before the code can be used plus the possibility of errors. May I suggest using a scroll box instead. See
    Make scroll box

    Peter (Blog*Star 2006 and 2007)
    Generating Revenue from your Website

    ReplyDelete
  9. This comment has been removed by the author.

    ReplyDelete
  10. Any idea how to embed HP Websmart priting in a blog? TechCrunch.com has done that.

    Tech Thoughts

    ReplyDelete
  11. Hi Peter!

    In your post have a small error in the code.

    I've writen a post how to add this function in blogger.

    Here you can read it!

    Bye!

    ReplyDelete
  12. Hi Gopinath,

    Thanks for the information about HP Websmart priting. Sounds interesting as it could save printing cost. I have installed it, but it work only on Internet Explorer. Haven't have time to experiment with it yet, but will make a note of this and try to come back to it later. If I find it useful to bloggers, I may make 2 posts, one here and one (different one) in Enviroman Says, an environmental blog. If I do that, I will like to acknowledge your contribution. But I really don't know when I will be able to come back to this.

    Peter (Blog*Star 2006 and 2007)
    Testing Blogger Beta (now New Blogger)

    ReplyDelete
  13. Hi Ignasi,

    Thanks for pointing out the error, if any. I will have to note it and check later. I have been receiving a lot of mails and comments.

    Peter (Blog*Star 2006 and 2007)
    Testing Blogger Beta (now New Blogger)

    ReplyDelete
  14. Thanks this prints the page or pages ok. If you just click on one of the pages or articles in your blog and put the print command in the side bar it prints one page otherwise it will print all. I really want to know how to remove or include the side bar on the same page as currently it prints two pages is this because the page area is to small? or is there another reason its seperated

    ReplyDelete
  15. Hi there,
    I tried to use your trick but poor me I could not seem to use the noprint tag sucessfully. However I am sure that this works. But for poor guys like me who cant/dont want to edit there template, I have come up with a different code which does simillar trick but gets installed as a gadget. I have the whole code and instructions at http://blog.sumitcbrty.com/2010/04/widgetcode-for-printing-printer.html . I am just expecting some suggestions on this and hoping that you guys would like it.

    ReplyDelete
  16. very helpful, thank you for this post.

    ReplyDelete
  17. Is there a way to only have a section of my blog to print with this "print page" hack? I would only like my recipes to print, not the whole page.

    ReplyDelete
  18. Not sure but perhaps one possibility to consider is to upload to Scribd and embed pdf into your post and allow visitors to print the pdf document

    ReplyDelete
  19. Thank you for the advice, I'll try that.

    ReplyDelete
  20. I will surely add this option. the way you describe the whole thing looks very easy and implementable. great valuable post. Ink cartridges

    ReplyDelete

Find help, info, instructions, tips, tricks

Tip: Use search box below or this box, labels in the first right sidebar, archive, ctrl+F for this page or sitemap to find topics