BP Web News and Tips: 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.

Go to Blogger Dashboard, Select Layout, Edit Html.
Create a backup of your template by pressing "download full template."
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


<style media='print' type='text/css'>

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



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.
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;}
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.


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


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


#comments, .comments { page-break-before: always; }


div#main p a:after {content: " ("attr(href)") "; font-size: 8pt; }


a:link, a:visited {color: #0000ff; background: transparent; text-decoration: underline;}
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.

As in Part 1, go to Blogger Dashboard, Select Layout, Edit Html.
Create a backup of your template by pressing "download full template."
Check Expand Widget box so we can place the code properly. You will not find the correct section if you don't do this!
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>
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.
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!