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:
- Add a few lines of CSS code (to make printed pages appear in this way)
- 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.
