When you print a post or just go to a blog in Typepad or WordPress and choose Print or Print Review; TypePad and WordPress isolate the post area only and remove the sidebars from being printed. Very cool!!!!
However, Blogger does not and privately hosted WordPress blogs may not either. One of Michelle's clients (Michelle Laycock, my design partner), Susan Amante, has a WordPress blog and she prompted Michelle and I to research this.
Michelle worked on Susan's newly redesigned WordPress blog (it's beautiful – nice job Michelle!), and got this version working (click to view tutorial). It involved modifying some CSS code.
I worked on the Blogger end, since I have a personal Blogger blog, and implemented this script and tutorial (click to view). Similarly, this involved adding CSS code as well as HTML code in several areas of your Blogger blog's design template.
Here is what my blog looks like, www.HandStampedByHeather.com and before these changes if you were to hit Print, you would have seen everything being printed but the background. It may save paper and ink and just be neater, if you could simply isolate the posting area for print.
So after making the changes that will be described below, here is what the Print Preview now looks like – no header, no sidebars, no footer; just the post area. You will see that you will be able to control what you "hide" from printing…maybe you prefer to have your banner show? If so, then you wouldn't hide that section and hide just the sidebars for printing.
Let's begin.
- In Blogger, from the Dashboard, click Design.
- Then Edit HTML.
- It's always a good idea to backup your template just in case….
- So click Download Full Template and save it to your computer.
- Let's continue…
- Scroll down or use the find to get to the end of the </head> tag.
- You will insert the code highlighted below.
- Next, you need to insert the <span class='noprint'> and </span> tags around the sections of your blog that you do not wish to print.
- In this sample below, notice the highlighted areas; hiding the header-wrapper (banner) and the sidebar-wrapper (one of the sidebars).
- You would then continue to use the set of <span> tags to hide the other sidebar-wrapper if using a 3-column layout, and the footer area if desired.
- Then click Save Template.
- You're done!
That wasn't so bad right?
One last final thought is that some people like using a button like you see at the top of my post; where it actually links to a PDF of the current post or tutorial. Additionally, the image may simply click to a javascript print command that opens your Print dialog box.
Anyway, some people just like using images to make it clear to their readers that the post or blog is printer-friendly 😀
You can click my Printer Friendly button at the top of this post to get a PDF version of this post, just a test so you can see what I mean.
Happy blogging!
Heather 😀
Heather Wright-Porto
www.BlogsByHeather.com