[tip for bloggers] easy-to-print posts in blogger
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.
8 comments:
Thank you so much! I've spent weeks looking for code that could do this for my blog. Thank you for sharing this and giving tips to customize it! You rock! :)
This is a TOTALLY AWESOME piece of code.
Like you, I've been looking for this "solution"
So how do you add the PRINT button?
Cheers!
Oh, and how do you get a GOOD right margin? my text is rolling off the page..
I got good results with 70% margin and 100% font. Awesome!
An excellent piece of work. Thank you. I wonder why Blogger could not make it so easy for all of us.
I would also like to add a PRINT BUTTON. Please tell is how.
How do I eliminate images (pictures)?
Hi! I inserted the first section of CSS code and that seems to be working. Even after expanding widgets, I don't have the code that marks the spot for the button:
However, I do have it without the paragraph marks.
I tried inserting the print button code after it and nothing happened.
Any ideas? I've looked for answers to this issue online and cannot find. It seems that other people are missing the paragraph marks as well, but I am not finding a solution.
Thanks and blessings,
www.breatheyall.com
Post a Comment