35 How to Print your Blogger Posts Effectively Wednesday, May 28, 2008 /

As many of the posts here are tutorials, I thought it would be useful for readers to print off individual blog posts for future reference. Sure, it would be possible for a reader to choose the "print" option from their web browser window, but this would have printed the header, sidebars and other irrelevant sections of the blog, wasting paper and ink and time.

Using a combination of CSS and JavaScript, I've developed a simple yet effective method of printing only the blog post (and comments) from each blog page.

In this post, I'll explain how you can also add effective print functionality to your Blogger posts in just two simple steps.

To get an idea of what this post would appear like when printed, use the "Print Preview" function in your web browser. Whereas the current page appears colorful and includes the header, sidebars and other elements of this template, printed pages from this blog will appear like this instead:

As you can see in this example:

• The header and sidebar sections do not appear


• Text is black printed against a plain white background


• The post spans the width of the printed page


• The post retains images and formatting


• Only the necessary areas will be printed!

How to install effective printing format for your Blogger posts

Although it took me a few attempts to ensure my posts would print in this way, I have created this tutorial to make it simple and fast for you to install in your own blogs.

There are only two steps to add this functionality to your own Blogger template:

1. Add a few lines of CSS code (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 post)

There are a few different options for the style of the print link, as I'll explain below.

Add CSS Style Code to your Blogger Template

To add the print styling code to your Blogger template, simply go to Layout>Edit HTML in your Blogger dashboard, and search for the closing </head> tag.

Immedietly before this line, add the following lines of code (copy and paste this directly to your Blogger template):

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

#header-wrapper, #header, .header, #sidebar-wrapper, .sidebar, #footer-wrapper, #footer, .date-header, .post-meta-data, .comment-link, .comment-footer, #blog-pager, #backlinks-container, #navbar-section, .subscribe_notice, .noprint {display: none;}

#main-wrapper {width: 95%}

</style>


If you like, you can preview your blog before saving. On this preview page, you'll be able to see the print preview displays only your blog posts (not the sidebar or other unwanted areas).

Finally, save your template.

Add a "Print this post" link

To notify your readers that your posts can be printed effectively, you'll probably want to add a "Print" link beneath each of your Blogger posts.

I've created three different styles for the print link, so you can choose the option which works best for your overall design.

To add the print link, go to the "Edit HTML" page again, and this time ensure that you've ticked the "expand widget templates" box.

Now search for this line:

<p><data:post.body/></p>

Immediately after this line, paste one of these three sections of code:

For a simple text link:

Print this post

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<a href='javascript:window.print()'>Print this post</a>
</b:if>

For a button link

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<form>
<input type="button" value="Print This Page" onClick="window.print()" />
</form>
</b:if>

For a snazzy link with printer icon

Print this post

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<span style='background: url(http://bloggerbuster.com/images/print.gif) left no-repeat; padding-left: 20px;'><a href='javascript:window.print()'>Print this post</a></span>
</b:if>

Once you have added this code, save your template. These links will only be visible on post pages (to enable visitors to print the full post and any comments which appear beneath the post), so visit one of your post pages to see the link in action.

You can see an example of the print link near the bottom of this post. If you click on this link, you will be prompted to print this entire post (and comments) using your default printer.

Why it may be useful to enable printing for your Blogger posts

If you publish tutorials or lengthy content, your readers may benefit greatly from being able to print and read your posts offline.

Using the methods outlined here, readers can print only the content of your posts, and not the unnecessary distractions of the sidebar, footer and header sections (which saves on paper and printer ink too!).

You may also want to print off your blog posts for your own benefit, such as to back up your posts in print format, or to demonstrate your abilities in a print portfolio.

Unlike other plugins I have come across, this method also allows you to print any comments under your post too. Comments can add a great deal of value to blog posts, and may contain reader insights which are not included in the body of the post itself.

I hope this tutorial has been useful for you! Please feel free to print this off for future reference ;) and as always your comments are most welcomed.