Saturday, September 5, 2009

Add Print Button /Link to Blogger Blog

Print button facilitates visitors to print a hard copy of a post and keep it for feature reference.Print Web site

Printing the whole site along with side bars is disadvantage and inefficient.

So in here I was mainly concern on printing the article along with comments but not including sidebars.
  • Add a Print Button.
  1. In your blogger account goes to "Edit HTML" page and before make any changes take a backup of your template.
  2. Check the box "Expand Widgets Template"
  3. Find the code <p><data:post.body/></p> and replace it with the code given below.

<!-- Start Printer Button -->
<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://img198.imageshack.us/img198/2360/vooprint.png'/></a></b:if>

<!-- End Add Printer Button -->


Note: May you need to change the printer icon to your own icon for doing that upload any preferred icon to blogger or any other image hosting site and replace it with the http://img198.imageshack.us/img198/2360/vooprint.png in above code.

  • Add a Print Link.
This is quite simple, remove the <img src="http://img198.imageshack.us/img198/2360/vooprint.png" /> part of the above code and replace it with any text you need to be appear in your blog.

<!-- Start Printer Button -->
<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 Button -->

  • Adding a Combination of Printer Button and Link:
For displaying a printer icon along with a link you need add <span style='background: url(http://i1020.photobucket.com/albums/af326/bookwise77/printer-button.gif) left no-repeat; padding-left: 25px;'> right before the <a href

Background: url(PRINTER IMAGE URL)
Padding-left: 25px; // seperator space between image and link.

<!-- Start Printer Button -->
<span class='noprint'><p><data:post.body/></p></span>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<span style='background: url(http://img198.imageshack.us/img198/2360/vooprint.png) left no-repeat; padding-left: 25px;'>
<a href='javascript:window.print()'>Print this post</a></span>
</b:if>
<!-- End Printer Button -->

Only the blog article itself will be printed along with any comments. The sidebar will not be printed.

0 comments:

Post a Comment