Tuesday, June 23, 2009

Add Printer Button or Link to Blogger Blogspot

Today's article will show you how to add a print button or printer link to your Blogger Blogspot blog. The facility to print a hard copy of a post may be important to some visitors especially if you are like me and publish lengthy posts. Adding a printer button or link will add to your blog's functionality and user friendliness.

The reason I am writing this article is in response to a reader who asked me how to print out posts without the sidebar showing up. All the suggested buttons and links print out the post only and not the sidebar, header or footer.

This tutorial involves changing the template code but is not difficult as long as you follow these step by step instructions.

How to Add a Custom Print Button to Your Blogger Blogspot Blog
The following instructions will place a printer button on each individual page of your blog below the post. Only the blog article itself will be printed along with any comments. The sidebar will not be printed.

Example of the printer button to be added: icons

1. Log in to Blogger if not already logged in

2. Navigate to Layout > Edit HTML

3. Back up your template by downloading full template to your computer

4. Check Expand Widgets Template

5. Bring up the search toolbar by using CTRL + F

6. Find this line by typing it into the search box:

<p><data:post.body/></p>

7. Now replace that line with the following code block:


<!-- Add Printer Button by http://blogknowhow.blogspot.com/-->
<span class='noprint'><p><data:post.body/></p></span>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<a href='javascript:window.print()'>
<img src='http://i1020.photobucket.com/albums/af326/bookwise77/printer-button.gif'/></a></b:if>
<!-- End Add Printer Button by http://blogknowhow.blogspot.com/-->


8. Click on Save Template to save changes

9. Click View Blog to see your button in action

Note: If you want to change the printer icon to your own icon upload your image to a photo storage service like Photobucket and note the URL address of the icon. Now substitute the URL address of the existing image for your image by changing the line beginning with <img src='
Change printer icon to this alternative printer icon icons

So to change the printer image to another printer image the code would look like:

<!-- Add Printer Button by http://blogknowhow.blogspot.com/-->
<span class='noprint'><p><data:post.body/></p></span>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<a href='javascript:window.print()'><img src='http://i1020.photobucket.com/albums/af326/bookwise77/printer-button-2.gif'/></a></b:if>
<!-- End Add Printer Button by http://blogknowhow.blogspot.com/-->


How to Add a Printer Link to a Blogger Blogspot Blog
You may not want a button and prefer to add a printer link instead. To do this you would follow steps 1 to 6 and then insert the following code instead of the code contained in step 7


<!-- Add Printer Link by http://blogknowhow.blogspot.com/-->
<p><span class='noprint'><data:post.body/></p></span>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<a href='javascript:window.print()'>Print this post</a>
</b:if>
<!-- End Add Printer Link by http://blogknowhow.blogspot.com/-->

Save the changes to your template and then navigate to an individual post to see your link at the bottom of the post.


How To Add a Combination of Printer Button and Link
If you would like to display a printer button along with a link follow steps 1 to 6 and then insert the following code instead of the code contained in step 7


<!-- Add Combined Printer Button and link by http://blogknowhow.blogspot.com/-->
<span class='noprint'><p><data:post.body/></p></span>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<span style='background: url(http://i1020.photobucket.com/albums/af326/bookwise77/printer-button.gif) left no-repeat; padding-left: 28px;'>
<a href='javascript:window.print()'>Print this post</a></span>
</b:if>
<!-- End Add Combined Printer Button and link by http://blogknowhow.blogspot.com/-->


In this article I have shown you how to add a print button, a print link and a combined button and link to the bottom of your Blogger Blogspot posts. Enjoy!


Related Articles
List of Blog Know How Tutorials for Blogger Blogs



Subscribe to Blog Know How by Email

9 comments:

arevamirpal::laprimavera said...

I tried the last option (both printer button and link) and here's the error message I got from Blogger:

Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly. XML error message: The element type "span" must be terminated by the matching end-tag "".

Help, please...

The Wizz said...

Sorry arevamirpal::laprimavera. I had left off the closing span tag in the code by mistake. Fixed now should all be working. Enjoy! Also please note that if you find the button and the link are too far apart or too close together depending on the image you use you can adjust this by increasing or reducing 28px; to suit your needs. Good luck!

Inkjet Cartridges said...

Thanks for sharing the information, i will use the code as soon as possible for adding printer button and link.
Printer Cartridges

The Wizz said...

Inkjet Cartridges glad to help. Any problems with this printer code come back to me

Sunny said...

Hi, wasn't able to make it work. My template is designed by a 3rd party designer that i downloaded for free, and maybe there's something within the design that is preventing the code from working. Any ideas?

The Wizz said...

Hi Sunny. Not sure which blog you were trying to add the printer button to but if it is the Scribe template can't see any particular reason why it wouldn't work. If you join my email list or leave your email here I could take a quick look at your template

mandy said...

I've tried to follow the directions found here and on many other blogs, but when I search my html (including expanded widgets) I can't find the following code referred to.

any ideas what i can do? something else i can look for?

The Wizz said...

Hi Mandy. Looks like you are using Tic Tac as your template. Look for the lines:


div class='post-header-line-1'/
div class='post-body entry-content'
data:post.body/

replace data:post.body/

with the code above

Please note that each line is enclosed in < > brackets but the comments section here does not allow them to be used

Any more hassles please come back to me

canonink123 said...

Canon Printer Cartridges
I can now understand why your blog is so successful :) good one... keep going

Post a Comment