How Can I Add a Print Button JavaScript on a Web Page or Blog

An According to Jim reader Asks, “Can you please provide an automatic print button.”

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:

<DIV id=”print_div1″>
Print this area.
</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:

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.

Blogger Dashboard – Hide Show All Problems – Missing Blogs

Open Letter to Google And Blogger,

Reference: Blogger Buzz: Updates and Bug Fixes for August 14th

Blogger Update

12/06/08 Just want to let the Google Guys and Gals know that as of this date I still had a bug with my According to Jim blog not displayed in my Blogger dashboard no matter what I did, (though it showed up in my Jim’s Blogger Profile). I’ll let everyone know when it gets there or I hear from the Google Crew. It’s not hidden, it’s just “gone missing” from the dash, but still accessible backwards through the post quick edits when I’m logged in to my Blogger account.

12/14/08 The Blogger Dashboard missing blog DIY fix and repair is quite involved, but cool if I do say so my self. More to follow in new a post with details of how I did it. Read addendum below and My Blogger Update Posting.

Please Email me.

According to this posting from Blogger the new feature was to provide more functionality. “There’s a new look for the Blogger Dashboard, which we think you’ll find more attractive and functional. If you have a ton of blogs (as we do) try out the “hide” and “show all” links to help manage the list.”

Well I tried it, and here is the hidden scoop.

Missing Blogs in The Blogger Dashboard

I am having a problem of the missing blogs in the Blogger Dashboard area ever since the Blogger dashboard update. Some readers have suggested that it is a case of not clearing the cache and cookies in the browser. I can assure everyone out in Internet land that it is not the clearing the cache and cookies problem in my browser(s) and computer(s) that is causing the problem.

What happens is that when “Show all” is clicked, it shows all and then when I click the “Always show” button next to the blog itself, it toggles to “Hide” except I still have one blog that is hidden permanently from the dashboard. However, the number count of the blogs shown is never updated. When I do a refresh again, the blogs are hidden again no matter what I do.

When Blogger added the “Show all” and “Hide” blogs Javascript from the dashboard, this is when my blogs started disappearing from the dashboard.

To check out some other blogs in my account, I tried hiding other blogs from the dashboard. This did indeed hide them, but now they stay hidden permanently. “Show All” works temporarily but does not latch to “always” when clicking the “Always show.” Now, only a few of the blogs “Always show.”

I tried several other computers (both Mac and PC) to verify that the problem is not the cache.

I tried four different browsers. (Internet Explorer, Firefox, Safari, and Google Chrome)

Nothing I have tried makes any difference what so ever.

Note: I have blogs that are both FTP setup with blogs hosted on other servers, plus

Also note that this “According to Jim” blog that you are actually reading which completely disappeared from the dashboard, (except I can still get to it with the edit tool from a posting, at the actual url address) was setup with ftp publishing to begin with, and did not assign a blogspot address when originally created. I tried changing it to a blogspot url address but it still would not show up in the dashboard area. I subsequently switched back to my own custom domain name. I also added the blog to another Blogger account (see link below), but it will not show up at that dashboard either.

However, this blog does show up in the Blogger profiles pages of both though. This is really strange that it will show in the profile but will not display in the dashboard.

It really seems that the new javascript is the main problem.

I’m at my wits end.

Blogger used to have a contact form for problems, however they have discontinued that service. It’s frustrating not being able to contact Blogger anymore. Note: I have posted this on the Blogger Help Groups too, with no response.

Blogger please help.

Thank you


PS To post this posting I had to do the end-around link (through the quick edit link on a blog post, when logged into my Blogger account) to the Posting, Settings, and Template area of this blog, and then create a new posting.


12/14/08 I took matters into my own hands. The hidden blog in the Blogger Dashboard fix is quite involved and there are some precautions that must be taken into account before tackling the problem.

12/16/08 For those in Internet land, I have now documented the procedure online of how to do it, with the complete details. This detailed how-to procedure for Blogger is posted at My Blogger Update. Hint, importing and exporting blogs are the keys to technical success.


Get your business found on the Internet today. Don’t wait till it’s too late. Professional Internet marketing services.

My Blogger Wish List

BloggerI like Blogger

I just wish Blogger had a simple way of creating static pages, that did not necessarily show up as a blog posted page.

Anyone that has been blogging for sometime will tell you, that there is certain information that a person or company would like to have readily available through a link on the blog itself to a separate page with the same branded template image as the main home page. Other times, it would really be cool if a person could have a unique page or pages that have a different template style. For example: maybe all the blogs posted under a particular label; a person would like to have a different image at the top of the page header to separate and visually identify the postings. There are Blogger workarounds and hacks that place in different pictures or images depending on certain parameters, but it would be nice to have maybe a different customizable template area for the static pages and/or labeled categories.

Additionally it would be cool if a person could easily blog to a different subdirectory area of the website when using Custom Domain Name Blogger publishing on another hosted account. While FTP publishing does allow multiple separate blogs under one domain name, custom domain name publishing does not provide the ability to create separate blogs under the main area of the website. Which means you can not have and as a place to blog directly about coolwidgets. This would be a very handy feature to be able to easily add another subdirectory area under the current blog as a person would have with a unique category area and static pages on a regular website. You can however have other sub domain names with the same custom domain name using Blogger Custom Domain Name option. For example: is the domain where I post short snippets using Tumblr as the free online publisher engine. But I use as the custom domain name publishing option with Blogger to the sub domain marketingstrategies, for information about marketing strategies. Keep in mind that subdomains are typically viewed as separate websites and it is important to note from a search standpoint (see note below about having different websites).

Static Page Workaround for Blogger

Probably the simplest static page workaround for Blogger at this time is to go to the earliest blog posting date and post a new page with backdating it to this earliest time. Turn off comments and backlinks under post options for this posting if you want, and set the date to the oldest date. Then simply link to it.

The Strength of the Free Blogger Service

The strength of the free Blogger service is the ability to customize the html and css (cascading style sheets) code in order to create your own unique branded image. Other blog hosting services that offer free hosting such as WordPress, provide some of the features such as static pages but have severe limitations on what can be altered and customized with the css and the html.

The ability to use hundreds, if not thousands of free templates set up for the Blogger service is one of the features that I have come to love. Just about any webpage or website template can be converted to a Blogger template with having an understanding of the Blogger drive engine and placing the proper coding from Blogger into the template design area. This feature really makes it much easier to brand the blog to the current site design. Read about Blogging with Professional Web Services.

Additional Blogger Wishes

I love the new Blogger with XML. I wish we could use the XML features on the non Google hosting services. For example: currently one of the Blogger options is in the classic design template mode for ftp publishing to a paid hosted provider with full customization. We have our website at for Internet marketing services. We publish a blog using Blogger at: about the Internet marketing industry, in which we write about various aspects of Internet marketing. Currently we are using ftp publishing for the blog, and a customized classic template design. There are some pretty cool features that XML has, as compared to the standard ftp classic design template. If the XML new Blogger templates could be used for other than the free Blogspot account hosting or the Custom Domain option (see below), then it would make it much easier to customize and manage the information for publishing.

I know I said this before but it bares repeating. Blogger currently allows you to use the Custom Domain name option, but hosting still takes place on Blogger servers, and only allows one blog per main domain name without subdirectories as compared to ftp publishing (see above). A person can create Sub Domains for different blogs using the custom domain name option, but these are considered separate websites, and if information was substantially the same between these Sub Domains, the Search Engines would more than likely not look too favorably to having created additional subdomains. For example: could have a subdomain as with unique information at both areas and this would be OK. This is no different than Blogger hosted services with millions of subdomains at, such as and

One of the reasons I have come to really like using the Blogger service is because Google allows you to use javascripts in the templates themselves. WordPress free blog hosting restricts javascript from being added for additional features. WordPress states it’s because of security issues. I am not convinced that javascript is the problem as opposed to simply WordPress engineers taking the time to allow javascript to be used securely in the first place. Listen, I am not bashing WordPress, because I too have a WordPress blog with Jim West as the blog name, and I like posting there from time to time, but I am simply stating the main differences that I see between Blogger and WordPress.

One reason to choose Custom Domain Name Blogger publishing over FTP publishing is the speed at which a page publishes using the custom domain name option. Whereas on an ftp account, hosted somewhere else, it can involve quite a delay with ftp publishing timeouts on very large blogs. Custom Domain Name publishing is also easier to add widgets and other items for the novice blogger. Expert bloggers can also customize the templates quite extensively.

In this world, nothing is ever perfect as it is. Everything man-made can always be improved. Not everyone will have everything they want. What are some of your thoughts on the Blogger wish list? What features would you like to see added? One last thing that I forgot to mention is I would like the labels to be able to automatically show up when using classic template de
signs for ftp publishing, just like in the XML template designs provides the sidebar widget to display the labels. Currently for classic templates you have to create the list manually for the sidebar areas.

Internet Marketing Strategies and Services for businesses on the web.