28 March 2010

How to Enable Printer Friendly Pages in Blogger

As I was going through and reading the blogs I follow, I noticed that one of them had a pretty nifty (I know, dated saying), button on their site; it was a "Print this Page" button. Basically, what this does is when you press the button, only the blog post and the comments will print out. The rest of the site, including the sidebars, header, and the footer are not printed. This allows the reader to print out an article that interests them, without having the entire blog printed.

So, since several of my articles are recipes and how-to's, I decided that it would be nice to enable this feature on my site. With this in mind, I went in search of some code and then began tweaking it on my test blog. After I got the actual button positioned and the code in place, I started to run tests in Firefox to see if it actually worked. I hit print preview and I noticed that whatever I did, only one page of my article would appear. No page two, no comments.

After several hours of trying to figure this thing out, I eventually ran across a posting in a forum which stated that this is a known issue in Firefox, but in IE or Chrome, it prints the entire post w/ comments. I switched over to IE and sure enough, it worked just fine. So, I now needed to search for a fix and after about thirty minutes of searching, I found one. Although this feature is not yet available on this site, I have incorporated it on the new template I am working on and I am hopeful to be able to transfer my blog to that template within the next few days.
If you're interested, here is the code I used WITH the fix (overflow:visible;) and the IE fix in bold and enlarged...

<style type='text/css'>
@media print{
body{margin: 10px; background-color:#FFFFFF; background-image:none;
font:color:#000000 }
p{font:14pt Arial;}
#main-wrapper{ overflow:visible;width:100%;}
.post
#header{ display:none;}
#left-sidebar-wrapper{ display:none;}
#right-sidebar-wrapper{ display:none;}
<!--[if !IE]>
#footer-wrapper{ display:none;}
.fineprint{ display:none;}
.comment-footer{ display:none;}
.feed-links{ display:none;}
#backlinks-container{ display:none;}
#blog-pager-newer-link{ display:none;}
#blog-pager-older-link{ display:none;}
#blog-pager{ display:none;}
<![endif]-->


This should be placed directly before the </head> tag.

I still need to add additional formatting to this code, but it works.

Oh, here's the code for the button, which will look
like this (minus the blue part) picture of a print article button

<form><input onclick='window.print();return false;'
type='button' value=' Print this Article '/></form>

If you are currently having this same problem, here is the link to the site where I found the fix... forums.cnet.com

Can't you tell that this post was thrown together at the last minute??

7 comments:

  1. You are one persistent fellow! Spending two hours to get that button to work would drive me nuts! I just highlight what I want to print and use the print selection which usually works. You are one determined blogger (and very helpful too!) I do appreciate the time you spent on helping me solve my computer problems.

    ReplyDelete
  2. I have been wanting to print my blog or parts of it, but I use Typepad. Wish I used Blogger now!

    Thanks for your kind words for Coco!

    ReplyDelete
  3. unfortuately, the Grateful Dead Tshirt image you sent isn't the right one. More lips, big grin.

    ReplyDelete
  4. Bravo! Nifty job. (I like the word nifty) I would never be able to figure that out. I haven't the first clue about html and codes and all that stuff. I have a heck of a time just following directions on adding code to my template. I avoid changing things for that reason

    ReplyDelete
  5. Karen & Gerard Zemek: I know, I just had WAY too much time on my hands the other night.
    You are very welcome, I hope I was able to help.

    Michelle: She will always be in our hearts.

    Lola: Rats, I was so sure, I looked a little more and it seems that I can find every other sort of shirt, except that one. I'm looking forward to seeing what it looks like.

    Ann: Thank you. I know just enough html and css to get me in trouble :)

    ReplyDelete
  6. Mrs Mecomber: Thank you. I'm including it in my new template.

    ReplyDelete

Related Posts Plugin for WordPress, Blogger...

Google Analytics