How to Create a Print This Post Button on Blogger

You may have noticed the “Print this post” link at the end of single page posts on BPWebNews. I thought it would help readers who need to follow one of my (often) long tutorials. With this feature, you print only post text, filling the width of the paper — no header, sidebars, ads, footer, etc.

There are many who have problems with this hack as published on sites like BloggerBuster. You can easily hit a pitfall due to the variety of templates used on Blogspot blogs. What works for the tutorial author, may need some adjustments for your blog, even if you have the same template! Why? Because chances are you’ve installed other html changes that make it hard to follow the instructions. This post attempts to negotiate the stumbling blocks (which I hit already). With some patience you can get a working version of the hack on your blog.

The basic process for the feature is on BloggerBuster, print your Blogger posts. There are two steps for adding this function to Blogger:

1. Add a few lines of CSS/HTML code to your template (to make printed pages appear in this way.)

2. Add one line of JavaScript beneath your posts (which creates a link for readers to print the page without extras.) Icon/link shows only on the post, not the homepage.

I was all set to go until I saw over 90 comments, many of them having trouble implementing the code. Even the author had problems with the print feature when she changed templates. There was one glimmer of hope from a ‘genius’ reader but even that needed tweaking for my template. So this post attempts to give enough information so you can pick and choose the parts that you need. You’ll probably want to print this post and allow yourself uninterrupted time! Remember to open the post by clicking the title if you arrived here on the homepage.

This whole adventure reminded me of the trek I took to build on another genius and create my beautiful table of contents (TOC). After reading Han’s post — a “simpler” version of his first post on installing a TOC widget, I said “bless him, he’s too smart for us! ” I was able to break it down for you and myself, the regular guys and dolls. It was worth it and many readers have used the tutorial for their own TOC. Enough of that. Let’s get back to the print feature.

The Genius Commentators on BloggerBuster’s Post

One person hailed another commentator named C. August as “clearly the genius of the group.” This was based on August’s reply to one of the key problems with the Firefox browser.

C. August said… on July 16, 2008 — OK, I solved it! This is a bug in Firefox, where it can’t print a DIV or a Table that spans multiple pages. This happens whether or not you use Amanda’s print CSS code. It’s just more obvious when you try to print just the body of a post. IE7 works fine. The fix is to edit the following line of CSS code, adding the “overflow” bit: … etc.

Unfortunately, that was only a partial solution. Problems continued for nine months more, when another inspired reader said:

Ben Udell said… on April 11, 2009 — Even better: Instead of removing “overflow:hidden” from under “#main-wrapper”, leave it there,
but under your section style media=’print’ type=’text/css’ make it: …. etc.

Sounds confusing, eh? Enough to make us give up. However people are still leaving frustrated comments as of a few days ago. I decided to sniff around the C.August’s site to see how he got it to work. At that point his solution on TitanicDeckChairs was different. Using my CSS background and Amanda’s post, including C.August and B.Udell’s comments I was able to get the right code for my blog.
Back to Basics
———————–
To customize the print post feature you need to understand some basic concepts about template structure. The template has a CSS portion with styling for unique element names like #header-wrapper. The HTML portion makes use of those styles to divide your blog into sections or wrappers, containing elements like post title and comments. Any section within another section can override the ‘parent’ styling. e.g. the header title and description can have different font colors.

Style.css: This is the default styling for font, color, etc. as it displays on the monitor. Screen style sheets are housed on your host server (in your template) or theme folder. These are the most common blocks of elements/sections:

#header
#content
#comments
#sidebar
#footer

Print.css: This CSS uses the same element names as defined in the Style.css, but lets you to exclude or override regular screen elements.

  • exclude a block from printing you use the “display:none” modifier after the element name. e.g.
    #sidebar { display:none }
  • change styling just for printing, use the element name and type only the overrides, e.g.
    body{ background:white; color:black; margin:0 }

If you don’t list a block then it prints (with any changed styling you specify). If you exclude an outer block then all elements inside are excluded — e.g. exclude header and you don’t get title & description.

In this tutorial I put each element on a separate line for clarity and to let you substitute your element name or decide to include or not. However, you may string several elements with one modifier e.g

#sidebar, #footer { display:none }

What should you exclude?
—————————————–
You want to print only what the reader can use from the printed page. Some of this is personal taste but these are the common exclusions for printer friendly pages:

  • Navigation menu/search box – these are useless for reading the post text.
  • Side bar(s) – readers are not interested in printing lists, widgets, etc.
  • Ads – these are sometimes sprinkled around your posts. Who needs to print them.
  • Comments – if your posts contain extra information in the comments then you may not want to exclude, but generally readers just want the post. My tutorial shows you how to start comments on a new printed page, so reader can simply not print them.
  • Footer – another one generally not needed.
  • Header – generally not necessary since you print the post title and the browser adds the the url of the page.

A quick visual example
—————————————–
We already know that the Print.css must use the correct element names. So let’s say I want to exclude the entire section that follows a post. One way is to look at the template style section and search for #post or .post and see what seems to be named post-footer or something of the sort. Mine is called “.postfooter”, so I added this to my Print.css:

.post-footer {display: none;}

An easier way is to use a very handy tool called CSS Property Viewer . It’s worth installing Firefox just for this add-on. Turn on the feature, view your blog post (not homepage). As you hover over different sections,they are outlined in red and the name pops up. It’s a little quirky sometimes, but does the trick!

This image is a visual composite of those steps which we’ll use in the real tutorial [coming soon.. lol]
————-

The screen view is a preview of the homepage which Blogger generates (press ‘preview’ button when editing the template.) Using the preview version, verify the element is excluded by selecting File, Print Preview in the browser menu. Like magic the post footer disappeared.

Let’s do it! Part 1- Set the Print Styling
———————————————————
These are the actual steps and recommended approach for creating your print post feature. Let’s start with the hardest part – Adding the CSS code to your template. Remember before you start you should find the element names you want to exclude or change for printing. My code gives the basic suggestions, but you can pick and choose. I suggest you start with the basics, preview how the homepage looks with File, Print, Preview then save the template. Go back in for the next set of things to add to your print file. Be sure to page down the entire preview document — sometimes only the first page has text if you have an error.

  1. Go to Blogger Dashboard, Select Layout, Edit Html.
    Create a backup of your template by pressing “download full template.” 

  2. First create the basic Print styling section. We’ll add more later. Use CTRL + F to find this closing head tag:
    </head> Copy and paste these lines BEFORE the closing head tag 

     

    <!– 8/8/09 Add Print Styling for blog page Part 1 of 2–>
    <style media=’print’ type=’text/css’> 

    .noprint {display: none;}
    #header-wrapper {display: none;}
    #sidebar {display: none;}
    .sidebar {display: none;}
    #footer-wrapper {display: none;}
    </style>

    <!– 8/8/09 end print blog page Part 1 of 2–>

    Notice the line highlighted in red. More blocks of code will be inserted here later.
    *** substitute your element names which could be #header, #newsidebar, etc.
    *** omit a line if you want the block to print or not be excluded.

  3. This is where you press the blue Preview button to see the effect of the html so far.

    In the preview document, press File, Print Preview on the browser menu. You can see if the header, sidebar and footer were excluded. If so then Save Template. Don’t worry about the width of the printed page YET.If you want more exclusions, insert lines you want before the line in red in step 2. Then repeat the previews. To really see the effect, save template and open a real single post, then use File, Print Preview. 

    .post-meta-data {display: none;}
    .post-footer {display: none;}
    .comment-link {display: none;}
    #blog-pager {display: none;}
    .feed-links {display: none;}
    #backlinks-container {display: none;}
    #google_ads_frame1, #google_ads_frame2,#google_ads_frame3 {display: none;}
  4. Find the line in red again so you can copy and paste this section before that line:
    ***This block puts styling on the elements you want to print. I added zero margins and padding just about everywhere to use all white space. Some lines are optional like the fonts for the printing. 

    <!– Override the screen styling when printing –>
    body {color:black; background-color:white !important; border:0px; padding:0px; margin:0px;} 

    #outer-wrapper {float:none !important; border:0px; margin:0px; padding:0px;}

    #main {width:100%; overflow:visible !important; float:none; border:0px; margin:0px; padding:0px;}

    <!– Optional – style the print font and size –>
    body {font-family: “Times New Roman”, Times, serif; font-size : 10pt; }

    *** properties in red must appear for your post container, my blog div#main is the box I need; yours may be #main-wrapper, .main, .post, etc.

  5. Repeat Step 3, but this time look for the width of the page to be wide and the full post text to appear — at least as much as shows on the homepage. If you want more styling, insert these lines after any of the lines in step 4. Try them one at a time to see if you like it. To really see the effect, save template and open a real single post the use File, Print Preview.
    <!– Optional – if show comments, force a page break –>
    #comments, .comments { page-break-before: always; } 

    <!– Optional – if want to show urls for links –>
    div#main p a:after {content: ” (“attr(href)”) “; font-size: 8pt; }

    <!– Optional – if want links underlined & different color –>
    a:link, a:visited {color: #0000ff; background: transparent; text-decoration: underline;}

     

  6. Save the template when done and start the next part — which is real easy! The reason we repeat previewing and saving is to keep what works and not have to backtrack to far if there is an error — a technique I use when editing html.

NOTE: I use JS-Kit comments so for those who want to exclude some of their icons use this:

.jsk-CommentFormSurface, #jskit-commentRSSpost, #jskit-commentRSSfull {display: none;}

Let’s do it! Part 2 – Add printer icon & link
—————————-
You can use the printer icon that I stored on PhotoBucket or create your own. The code is conditional; the icon is not on the homepage.

  1. As in Part 1, go to Blogger Dashboard, Select Layout, Edit Html.
    Create a backup of your template by pressing “download full template.”

  2. Check Expand Widget box so we can place the code properly. You will not find the correct section if you don’t do this!
  3. Press CTRL + F to find this line of code (type into search box):
    <data:post.body/>
    You’ll see a paragraph tag after that line (</p>). It’s after that end paragraph tag, you then press the Enter key, insert a line so you can copy and paste these lines: 

    <b:if cond=’data:blog.pageType == “item”‘>
    <span style=’border:1px #181A43 solid; padding:5px; margin:3px; width:100%;’>
    <span style=’background: url(http://i282.photobucket.com/albums/kk272/SBA_jpgs/print.gif) left no-repeat; padding-left: 20px;’><a href=’javascript:window.print()’>Print this post</a></span>
    </span>
    <br/> <br/>
    </b:if>
    <!– 8/8/09 end of code to print post Part 2 of 2 –>
  4. As in part 1, this is where you press the blue Preview button to see the effect of the html change. You can not see the individual post page, so if there are no Blogger error messages, press Save Template. If there are errors, just press Clear Edits and review your steps.
  5. View the Blog, open a single post. Press the print icon you just made and see what it looks like. To avoid printing, you can use the browser menu to File, Print Preview instead.

Conclusion:

This post took way longer than I expected, but I hope a lot of people can use it. I need your feedback on any areas where I can adjust the tutorial.

You will probably have some problems but remember only Part 1 can not cause any real damage since it’s a print view only. I’ll also help where I can. Be sure to use the CSS Viewer if you have a lot of customization. For most the basic exclusions and styling will do!

If this tutorial works, (as measured by your comments here) then I’ll leave a note on the original BloggerBuster post to help those who may still want this!


If you found this post useful, grab the BPWebnews tips button and share the luv with others. Get future posts in your RSS feed or by email.


If you found this post useful, leave a comment and share your thoughts with others.
Get future posts in your RSS feed or by email.


37 Comments

  1. Yes! You are absolutely right! A very long post but I think you have explained things clearly. I would love to see a similar kind of post, where you can save a particular post as a pdf. I see this in few blogs nowadays. If you find out the code, then let me know! I am trying to find one for my blog.

  2. The only way to find out if it's explained well is to have someone try it out… Any volunteers? I'll look out for the pdf save feature…  Is comment luv working? I don't see your last post…?

  3. Thanks for this very detailed post.

    I have discovered a quirk between IE and firefox that perhaps you can clear up.

    On Firefox, the solution works perfectly.

    In IE8 (in "compatbility view," i.e., earlier versions), it also works fine.

    But in native IE8, the text is not formatted properly and actually gets cut off the right side of the page.It also loads very slowly in IE.

    Is there something going on with the way IE8 handles the print syling? Is there a fix?

    Thanks,
    Adam

  4. I hope you can use it. About IE 8, I need to know your blog address so I can see your code [unless you're saying it happens even with my print/preview of this blog?]. My IE 8 looked okay.

  5. I tried yours with IE and you're right nothing prints. I found one suspicious line in your html:
    span.fullpost is set to the not print class– maybe Firefox ignores?
    <pre>span.fullpost {display:none;}
    </pre>

    But first try adding these 2 lines to your print styling section:

    #content-wrapper {float:none !important; border:0px; margin:0px; padding:0px;}

    #main-wrapper {<span style="color: #cc0000; font-weight: bold;">width:95%; overflow:visible !important; float:none;</span> border:0px; margin:0px; padding:0px;}

    IE 8 may need the float:none…

  6. I look again and I see the text takes a long time to generate but I did see the post with words chopped off at the right side. I think you changed the span.fullpost to display:inline but this is not necessary and causes slowdown in IE trying to align elements that are not there. Try display:block instead.

    For the cut off on the right it may be the content wrapper is defined as 900px which is too wide for printing. So try making it the same as the main-wrapper. i.e.

    <span>#content-wrapper {<span style="color: #cc0000; font-weight: bold;">width:95%; overflow:visible !important; float:none;</span> border:0px; margin:0px; padding:0px;}
    </span>

  7. Wow, you rock.

    I changed the #content-wrapper and #main-wrapper settings as you suggested — now everything seems to be formatted properly in IE8 (both with and without compatability.)  I'm not an HTML wizard, so I really appreciate the help.

    FYI, the span.fullpost settings are to implement the "read more" hack — I changed the display:inline to display:block. I found one other instance of display:inline and change that, too.  However, IE8 still take a long time to generate text within print preview, whereas it's almost instant with firefox.  Since it all works (albeit slowly), I think I'll just make my readers live with it.

    Thanks again!

    Adam

  8. "Surprisingly his real solution on TitanicDeckChairs was different."

    You make it sound so insidious! My memory is foggy, but I know I've made many tweaks to my template in the last year and a half. It never even occurred to me to go back to BloggerBuster with an update.

    I haven't tested my blog in IE8 yet, so I'll be interested to see if I have any issues with print preview… I wouldn't have even thought to check.

  9. So much for trying to be humorous. I had no intention of implying you did anything on purpose — already updated post to make that clear. I was surprised that people said the change worked for them, so I went to your site and was genuinely surprised that the current code was different. It's not your job to go back and update what was a helpful comment in the first place.

    Recent blog:=- Keep Your Blogger Gadgets Current

  10. Hi….Thanks for the detailed instructions. The first part was great. But I seem to be having problems with the easier second part!! I see the <data:post.body/> but there is no paragraph tag anywhere! Help!

    Recent blog:=- Laksa Lemak

  11. Oh ok…I figured that I could just cut and paste it after the </div> that comes after the tag. Just that there's no . 🙂 A totally un-HTML person. Thanks for helping me feel like I managed to do this by myself!

    Recent blog:=- Laksa Lemak

  12. Now that's determination and courage! I'll update the post in case others have same situation. Feel free to reply to any other reader's questions 😎

    By the way, I suggest you add the 'about me' gadget since it will copy the nice information into your sidebar — saves us a trip to the old Blogger profile screen. I'm always reluctant to go there since most people add absolutely nothing about themselves.

    Recent blog:=- How to Hide Blogger Widgets on Home Page

  13. I notice the Blogger comment form appears on your page print. Why not try making it 'display: none'. The id should be .comment-form

    Just test it with a post that has a comment (you probably want the comments but not the blank form).

  14. In my layout, the data:post.body is not separated by <p> and </p>, but rather by <div>. Here's how the code reads:
    <div class='post-body entry-content'>
    <data:post.body/>
    <div style='clear: both;'/> <!– clear for photos floats –>
    </div>
    So do I put the Print code after the </div>?

    Recent blog:=- Specialized rolling pins

  15. When I first posted my comment, I couldn't see all the other comments. Curiously enough, the post just before mine answered my question.
    However, here's something that I haven't seen addressed anywhere. If someone stumbles on my blog, and they want to print the most recent post, the Print This Post button doesn't show up unless they have linked to ONLY that one post. In other words, if they're just reading the most recent posts (whatever number that might be; in the case of my blog I believe that 4 posts show up) and they find one they'd like to print, they have to know to click on the headline for that post to isolate it. THEN, the print button shows up.
    If they just go straight to "Print" in their browser, they'll get all the posts that are visible on the Home page.
    Is there any way around this?

    Recent blog:=- Specialized rolling pins

  16. Seems if I wait long enough (1 hr in this case ;)) readers solve their own problems! Great enthusiasm..

    Unfortunately this tweak works around the post data of the single post. The print button tells the browser to print the current page (on home page, that means multiple posts). Possible ideas:

    – put a reminder note at the bottom of each post to view full page to print. If it's really that important I can tell you how to add the note.

    – let readers figure out that they can selectively print pages by doing a print preview first.

    – on the homepage only provide a print to pdf instead of print to paper.

    Recent blog:=- How to Show Blogger Table of Contents by Label Name

  17. The easiest I believe would be to have PDF-Creator installed. Freeware, Open Source and works like a charm up to Win7.
    You just select the virtual printer named PDF-Creator and voila, there is your PDF file. Works for ANYthing you can print from a standard Windows File menu.

  18. Eike, I agree that PDF-Creator is great. The problem is the reader has to install it [not a bad idea for browsing or saving on printer paper]. I think Mukund is looking for a button/link where reader can view the post as an online pdf. The pdf can then be saved without special software.

  19. Hi,
    I'm one of the newer bloggers who's been trying to add Print capability to my blog via the template with no success. I tried your method, but after doing just steps 1-4, I can see only page 1 of my post, the second page is mostly blank. Your instructions are quite detailed, I feel as if I'm so close to success…but any clue as to what I'm doing wrong? I'm using Firefox 3 for Mac.

  20. I have your site address but you need to leave in the code that's not working — that way I can what's going wrong. So I hope you saved it and can put it back in! that's the only way I can diagnose using my web tools.

  21. Hi SBA,
    Thanks so much for trying to help me! I've gone back and changed the template html again, using Steps 1-3 above. My Preview shows 2 pages, but only the first one has text, please let me know what I'm doing wrong, and thanks again.

  22. This is like pulling teeth but we'll get there! I need to see where you placed the step 4 code of part 1 — so please add that. Just get it all out there, pimples and all… lol Those codes need to be added to print all pages. If preview is has no errors just save the template.

  23. I've now entered the code through Step 4, but still no page 2. I saved the template and checked the Preview of a specific post, as you suggested. It's okay, I have my original template downloaded and saved. Thanks again for helping me.

  24. I received your template. Your template uses main-wrapper, so it works if you replace

    #main {width:100%; overflow:visible !important; float:none; border:0px; margin:0px; padding:0px;}

    with

    #main-wrapper {width:100%; overflow:visible !important; float:none; border:0px; margin:0px; padding:0px;}

  25. This Works! I can't tell you how many hours I've spent reading various blogs and not being able to quite get to this point…..thanks so much for your patience with this newbie.

  26. Great.
    I suggest to merge css sections (,,,) + do LinkWithin to non print that's: #lws_0,#lws_1,#lws_2,#lws_3

  27. Great blog!!! Until I found your blog my first page came up but the rest were blank. With your tips all the pages come up great in firefox. Yet in IE the first page is blank and the rest come up fine. I was wondering if you had any advice.

  28. Thanks Rick! It's good to hear this helped you. As for IE I can only suggest you try some of things I suggested to other readers (be sure to leave notes to back them out if it affects Firefox! lol).
    1) in another blog I found one suspicious line in the html:
    span.fullpost is set to the not print class– maybe Firefox ignores?

    span.fullpost {display:none;}

    But first try adding these 2 lines to your print styling section:

    #content-wrapper {float:none !important; border:0px; margin:0px; padding:0px;}

    #main-wrapper {width:95%; overflow:visible !important; float:none; border:0px; margin:0px; padding:0px;}

    IE 8 may need the float:none…

    2) if this doesn't work I may have time to look at your script next week — very busy as you can see I've done very little posting lately…

  29. Ciao SBA
    I wrote you a few weeks ago thanking you for this code, it worked perfectly and my readers could print my posts hassle-free.
    Suddenly the Print this Post option disappeared from my blog (I didn't mess with Html since I implemented your code), the code appears in the templatem but apparently something's wrong. Now even my thank you comment here is gone…
    Help!

    Ciao
    Eleonora
    Aglio, Olio & Peperoncino (Blogger hosting platform)

Comments are closed.