You may already know that you can print a webpage by going to the browsers File menu and selecting the Print. The universal shortcut key to invoke the Print option is Ctrl AND P, or in the case of Mac OS X, Command AND P. However, not everyone knows this, or cares to dig around for it.
That's why as a webmaster or blogger, it's your job to make sure readers can print your webpage or article when they want without having to mess with their browser or wondering what to do. If you make it convenient for your visitors to navigate and use your website, they'll come back regularly. It's as simple as that.
To improve the user experience on your website, it's always a great idea to create a custom Print button that users can use. Having a Print button on your website means your users won't have to waste their time figuring out how to print this article.
Another reason why you might want to have a custom print button on your site is to define what gets printed and what doesn't. Most of the websites have sidebar, ads, and a lot of other materials that aren't important in the print version of the webpage. By defining the content that gets printed, you will be saving the extra paper and ink that's required to print your webpage. Your users will certainly thank you later for providing them with such functionality.
Ultimately, different people want the print feature on their webpage for different reasons. You may just want to add convenience. When the reader can just click a button to get a printout – it saves a few clicks, and every click counts. Other people want to customize the printed text – in other words, hide certain elements of the page from the printout. In other situations, people prefer creating a carefully customized, printable version of the website.
Today we're going to take a look at some methods how you can add Print buttons to your website.
<form>
<input type="button" value="Print this page" onClick="window.print()">
</form>
When the code is published, your page will show a very simple button that reads Print this page. You can customize the text by modifying the value of the code.
<a href="whatever.htm" onClick="window.print();return false">Print This Page</a>
When this code goes live, your users will see a text, Print This Page, as a link. Clicking this will instantly open up the browser's print dialog and the user can continue to print. Don't worry about the whatever.html href in the tag. Because of the return false in JavaScript, the link will be disregarded.
<a href="whatever.htm" onClick="window.print();return false"><img src="print.gif"></a>
This will put a graphical button on your website that is easier for your users to see and click.
While all of the above mentioned methods will work to invoke the print option on the browser, there is a downside of using the simple JavaScript code. Because what these codes do is just invoke the browser's built-in print option. Meaning it will show and print the entire page.
But what if you wanted to specify an area that will be printed? What if you wanted to provide more value to that simple Print button on your website that will do more than just printing your webpage?
Let's dive deep into PrintFriendly and see what's there.


Don't like any of them? Don't worry; you can use your custom graphics with PrintFriendly as well.
So what are you waiting for? PrintFriendly lets you show a professional-looking print button on your website with robust functionality. It's the best of both world! Head over to PrintFriendly Button to grab your code/plugin and greet your visitors with some awesomeness!
That's why as a webmaster or blogger, it's your job to make sure readers can print your webpage or article when they want without having to mess with their browser or wondering what to do. If you make it convenient for your visitors to navigate and use your website, they'll come back regularly. It's as simple as that.
To improve the user experience on your website, it's always a great idea to create a custom Print button that users can use. Having a Print button on your website means your users won't have to waste their time figuring out how to print this article.
Another reason why you might want to have a custom print button on your site is to define what gets printed and what doesn't. Most of the websites have sidebar, ads, and a lot of other materials that aren't important in the print version of the webpage. By defining the content that gets printed, you will be saving the extra paper and ink that's required to print your webpage. Your users will certainly thank you later for providing them with such functionality.
Ultimately, different people want the print feature on their webpage for different reasons. You may just want to add convenience. When the reader can just click a button to get a printout – it saves a few clicks, and every click counts. Other people want to customize the printed text – in other words, hide certain elements of the page from the printout. In other situations, people prefer creating a carefully customized, printable version of the website.
Today we're going to take a look at some methods how you can add Print buttons to your website.
A Simple JavaScript Print Button
By using a line of simple JavaScript, you can instantly create a print button anywhere on your website. Let's look at three different ways how you can create a simple JavaScript print button on your website.Use a Form/Simple Button
Use the following lines of code and paste it wherever you want the button to appear:<form>
<input type="button" value="Print this page" onClick="window.print()">
</form>
When the code is published, your page will show a very simple button that reads Print this page. You can customize the text by modifying the value of the code.
Use a Link
Use the following html a tag to create a print button on your site that looks like a link.<a href="whatever.htm" onClick="window.print();return false">Print This Page</a>
When this code goes live, your users will see a text, Print This Page, as a link. Clicking this will instantly open up the browser's print dialog and the user can continue to print. Don't worry about the whatever.html href in the tag. Because of the return false in JavaScript, the link will be disregarded.
Use a Graphical Button
The best way to put a simple JavaScript button is to use a custom graphic/image. Let's say you have created an image called print.gif. Upload the image and use the following line of html code. Make sure that the image path in img src tag is correct.<a href="whatever.htm" onClick="window.print();return false"><img src="print.gif"></a>
This will put a graphical button on your website that is easier for your users to see and click.
While all of the above mentioned methods will work to invoke the print option on the browser, there is a downside of using the simple JavaScript code. Because what these codes do is just invoke the browser's built-in print option. Meaning it will show and print the entire page.
But what if you wanted to specify an area that will be printed? What if you wanted to provide more value to that simple Print button on your website that will do more than just printing your webpage?
A PrintFriendly & PDF Print Button
A much better option is to use PrintFriendly & PDF button. The name of the button is pretty self-explanatory. The button automatically formats your webpage in a print-friendly format. It also has a PDF and Email feature. Basically it is a 3-in-1 button.Let's dive deep into PrintFriendly and see what's there.
PrintFriendly Formatting
PrintFriendly automatically gets rid of all the junk/unnecessary parts of your webpage. For example, the sidebar of your website, custom widgets, text, ads, etc. that will only eat up space in the paper and use more ink will automatically be removed every time a user clicks on PrintFriendly button.
The result: A nice, neat and clean page for printing.
Click-to-Delete
Users can even go ahead and remove what's already there from the preview window. A click-to-delete function will get rid of any paragraph that the user doesn't want in print. This is even finer control = more convenience for the users.
Generate PDF
What if your user wanted to create a PDF of the webpage instead? Yep, PrintFriendly got that covered.
Email the Page
Even more interesting feature is the ability to email the page to a friend with a custom message. Think of it as a bonus addition to the Print button. (Bonus tip: If you only want the Email button, InstaEmail is what you want.)
Finer Control
As the webmaster/admin/blogger, you have the option to select which options are active and which aren't. For example, you can turn off the click-to-delete option to disable users from deleting anything. You can turn off PDF or Email function. You can even go beyond the basics and define a custom area with html code which will be in print.
Here's some Free Print Button Graphics You Can Use
PrintFriendly is available in a number of platforms including WordPress.com, WordPress.org (self-hosted WordPress), or any other custom website. PrintFriendly also comes with a set of graphics to use as the print button. Here are some print button graphics you can use with PrintFriendly:

So what are you waiting for? PrintFriendly lets you show a professional-looking print button on your website with robust functionality. It's the best of both world! Head over to PrintFriendly Button to grab your code/plugin and greet your visitors with some awesomeness!
You composed this post amazing about this topic. I got data from your article, it is precious for me and furthermore for other people. Continue sharing this sort of information. photo printing
ReplyDeleteThis is excellent information about Image Resizer Online Tool which is shared by you. This information is meaningful and magnificent for us to increase our knowledge about it. Keep sharing this kind of information. Thank you.
ReplyDeleteThank you for sharing such a nice post about Uti Cropping Tools For Signature Online . I love it so much. Check
ReplyDelete