I was stumbling through cyberspace and found a page with a recipe I wanted to try. It was obviously hosted by Blogger, like mine, but had some sort of tweak that allowed you to print the pages without the side columns. This made me so excited that I forgot about the recipe and the website! I had to figure out how to do this...
I searched online and found some sites that gave me some ideas, but individually they were coming up short. Some would print just the first page, all of them were leaving on the navigation bar at the top of the page, and others included the comments section in the printed version. I ended up -- through lots of trials and many errors -- with this bit of CSS code that works for me (and should work for anyone else using Blogger/Blogspot):
<style media='print' type='text/css'>
#header-wrapper, #header, .header, #sidebar-wrapper, .sidebar,
#leftsidebar-wrapper, #rightsidebar-wrapper, .date-header,
.post-meta-data, .comment-link, .comment-footer, #blog-pager,
#backlinks-container, #navbar-section, .subscribe_notice,
#navbar, #Navbar1, #comments, #comments-block, .post-footer,
.noprint {display: none !important;}
#main-wrapper, #footer-wrapper {width: 99% !important; text-align: justify;
text-justify: auto; word-wrap: break-word !important;
overflow: visible !important; font-size:70% !important;
line-height: 1.4em !important;},
</style>You simply insert it after the
<head>
tag in your Blogger template HTML and BAM! -- whenever someone wants to print a post, it will automatically include just the text of your post and any footer text (copyright info, etc.) that you have on your page. If they do it from your home page, it will print all entries on that page, but from individual post pages it will print just that singular page.
If you want to toy with it, here's some extra info...everything that comes before the
.noprint line gets excluded from printing, so you can customize what gets printed. For example, to add comments into the printed page, simply remove the correct section labels (#comments, #comment-block). You can also adjust the output text size, line height, and any other attributes you're comfortable editing by changing the settings after
#main-wrapper, #footer-wrapper. Want bigger text? Change the 70% to 85% or even 100%. The more you know, the more you can do, but this will get you started.
Oh, one more thing...
PLEASE BE SURE TO SAVE A BACKUP COPY OF YOUR TEMPLATE BEFORE EDITING!
PS - A lot of people asked for the code to put a "Print This Post" button in their posts. Here it is:
First, you have to "Expand Widget Templates" in the Blogger HTML editor and
add the following code:
<b:if cond='data:blog.pageType == "item"'>
<form> <span class='noprint'> <p align='right'> <input
onClick='window.print()' type='button' value='Print This Post'/>
</p> </span> </form>
</b:if>
after this line:
<p> <data:post.body/> </p>
It should still keep the "noprint" settings from the edits I suggested
in the blog post.
Thanks to David Zetland for pointing out that the printed page might cut words off of the right margin. This was added to make that happen -- text-align: justify; text-justify: auto; word-wrap: break-word !important; and is reflected in the code above.
So here's the situation: I had an unexpected two days off of work due to Tropical Storm Fay and a few overripe bananas sitting atop my refrigerator. Normally, overripe bananas get turned into banana "bread." I chose quotations there because it's really more like a cake even though it is technically a quick-bread. Sweet, sometimes spiced, sometimes with nuts -- old-fashioned banana bread is equally at home on the breakfast table as it is for dessert.
