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:
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:
7. Now replace that line with the following code block:
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
Change printer icon to this alternative printer icon
So to change the printer image to another printer image the code would look like:
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
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
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 How Blog Works Tutorials for Blogger Blogs
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:
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://howblogworks.blogspot.com/-->
<span class='noprint'><p><data:post.body/></p></span>
<b:if cond='data:blog.pageType == "item"'>
<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://howblogworks.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
<!-- Add Printer Button by http://howblogworks.blogspot.com/-->
<span class='noprint'><p><data:post.body/></p></span>
<b:if cond='data:blog.pageType == "item"'>
<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://howblogworks.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://howblogworks.blogspot.com/-->
<p><span class='noprint'><data:post.body/></p></span>
<b:if cond='data:blog.pageType == "item"'>
<a href='javascript:window.print()'>Print this post</a>
</b:if>
<!-- End Add Printer Link by http://howblogworks.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://howblogworks.blogspot.com/-->
<span class='noprint'><p><data:post.body/></p></span>
<b:if cond='data:blog.pageType == "item"'>
<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://howblogworks.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 How Blog Works Tutorials for Blogger Blogs
No comments:
Post a Comment