Well, I wanted to make it easy for a website visitor to be able to print the text area in Blogger posted articles and information found at my “According to Jim” website.
Print button script
Have you ever visited a website and wanted to print the main article of a web page, but you ended up having to print the whole page which might have been heavy in the graphics, advertisements, menu systems, links, and other extra body text that you really didn’t want to waste your printer ink on? I certainly have been in that situation. Well, it took a bit of work, much online research, and exploring various CSS and JavaScript options for printing a selected section of text from a website. I think I have found a good solution.
The solution for the print problem was a little more problematic when doing it with a blog, than just printing a static web page. One of the things about a blog is you can have one post, multiple posts, archive posts, and “Label” posts, on display within the home page area. While this is a really cool feature for blogs, from the standpoint of being able to select how many posts you wish to show up on the first page (home page), it presents a dilemma for printing automatically one posting of information at a time.
The printing criteria for selecting a printing solution included the requirements to remove any background and special text decorations, but still retain the majority of the links, headings, and key graphics intact. I also did not want to have the visitor to have to navigate off the page to a completely brand new web page of the website.
So, I found this cool Printing JavaScript from Huntingground website.
Printing Script Overview
The first part of the printing solution is to create a division area on the web page that is structured as the “print area.” Basically for those that are new to HTML coding, you place a <DIV id=”print_div1″> in between the text that you want to print, and end with the </DIV> end tag. By creating an “id” for that print division, you have segregated the text between the <DIV> tags, so that when the JavaScript, “Click to Print” is clicked, the script builds a new web page on the fly, with the selected text, but removes most of the Cascade Style Sheet, CSS features from decorating the page with style background images, and allows the text to wrap on the new page. You can add inline CSS to the JavaScript if you wish to add some extra font styles and/or other style classes too.
As I stated at the beginning, setting the print area is relatively easy with a static web page. However, I needed to make some changes to the code in order for it to function on the blog. First off, I had to make sure I placed the <DIV id=”print_div1″>Print This Text Area</DIV> within the <Item></Item> Blogger page template tags. The reason for placing the print area in the following format:
<ItemPage>
<DIV id=”print_div1″>
Print this area.
</DIV>
</Item Page>
is if a blog has more than one posting on the first page, the script gets lost of which ID to print if the <DIV id=”print_div1″> tag is placed in the main or archive section, and in most cases simply will not function. So, I made sure that the person navigates to the permanent link of the article posting before the “Click to Print” button is activated.
The next item I did was change the following code to print out the actual title of the page, instead of just “Print Page.”
Original code:
newwin.document.write(‘<TITLE>Print Page</TITLE>\n’)
Modified code:
newwin.document.write(‘<TITLE><Blogger><$BlogItemTitle$></Blogger> – <$BlogTitle$></TITLE>\n’)
What that code change does is grabs the posted item title and blog title, and automatically places it in the header of the printed page. So, if a person has print header section title turned on via the “Page Setup” menu setting from the browser File menu, the printer will print out that actual item title and blog title of the Blogger posted page for reference.
I also wanted to make a button instead of just an html link. So, I changed the following code from:
<a href=”#null” onclick=”printContent(‘print_div1’)”>Click to print div 1</a>
and changed to:
<ItemPage><div style=”text-align: right; margin: 0px; font-size: 10px;” class=”button”><button onclick=”printContent(‘print_div1’)”>Click to Print</button></div></ItemPage>
I also placed this button outside the <DIV id=”print_div1″> </DIV> tags because I did not want the print button to show up in the printed page at the top of the posting.
Also, I placed this button html code inside the (<ItemPage> button installed here </ItemPage>) because I wanted the Click to Print button to be only on display when the visitor was on the permanent linked page for a particular blog posting.
Additional notes: I place a second print button html code at the bottom of the posting and added an additional <DIV id=”print_div2″> Print Comments </DIV> area to allow the visitor to print the comments too.
Then I placed a button for printing the comments like this:
<div style=”text-align: right; margin: 0px 20px 0 0;” class=”button”><button onclick=”printContent(‘print_div2’)”>Print Comments</button></div>
By-the-way, Though not required, I used some inline css style in order to align the button exactly where I wanted it to be. I also have a class button which references back to a CSS style sheet for other styling parameters.
Another interesting finding, was Google Language translation works with the print option too. I decided to take advantage of the way the Google translation program functions. When a web page is translated, it displays the translation in whatever language you have selected, but when you hover over the translated text, Google also provides an original language displayed reference with a hover-over mouse affect to the actual untranslated version for that particular sentence or paragraph. So, once I found out what the “CSS class” Google was using for the section of translated text, I took advantage of that and placed that original English text in a different color and/or italicized font format when printing. To view this, simply click on any translation of a permanent link, and then click to print button and see what happens. If you don’t want this text to be on display for printing, you can use a CSS hide display, style=”display: none.” My feeling though is, it is better to have it on display rather than hidden, since the automated language translations are not perfect, and if a visitor can read at least a little English, they would have a much easier time of figuring out what it says when comparing it to their native language translation.
To make the Google translation text display in a different color, font style, and font size required placing an additional line of JavaScript code in to the main script.
So just after:
newwin.document.write(‘<TITLE><$BlogPageTitle$></TITLE>\n’)
I added the following:
newwin.document.write(‘<style type=”text/css”> .google-src-text { color: #F56F09; font-style: italic; font-size: 80%; } </style>\n’)
One other important note:
Install the the full code at the bottom of the template area, just before the </body> tag. Place it in between a <ItemPage> and </ItemPage> tags. That way, the script only loads when on the permanent link pages. Also, by installing it at the end of the Blogger classic template area, you will be sure to load the rest of the page prior to this script being loaded. I had the script at the beginning to begin with, and there were error messages being displayed in Internet Explorer. I think this issue had to to with how the Blogger page is constituted by grabbing items from both the Blogger server and my web server, since I am using FTP publishing. I have not attempted, as of yet, to use this script in a non FTP published Classic Blogger template or new XML Blogger Templates by itself. I guess I’ll have to try that sometime and let you folks know how that works.
Well, that’s all for now folks. Good luck on your printing. Need help with your website? Contact us today. Marketing your business today. Get your business found online the right way. Earn more sales today.