How to Add Print Friendly Button to Blogger

The post explains how to add print friendly button to Blogger(Blogspot) blog


PrintFriendly
How to Add Print Friendly Button to Blog
What is PrintFriendly?
It is simple web application which makes makes printing on the web better.

Why should we make webpage or blog post  PrintFriendly?
We make webpage or blog post print friendly to save paper and ink.

How to make blog post or webpage PrintFriendly?
It is very simple, just use PrintFriendly button.




Advantages:

  • Their algorithm removes ads and all the junk.  
  • Cusotmization is possible before printing webpage or blog post.
  • Save Money & the Environment and 
  • It also creates PDF file from your webpage or blog post.

                
How to add print friendly button to blog:

Step 1: Sign into Blogger account.

Step 2: Choose a blog  from your blogger dashboard to make print friendly.

Step 3: Go to Design> Edit HTML>Edit Template and select or checkmake the expand widget templates and   do as shown below

If you are using Google Chrome press f3 key and search for the below line
If you are using Mozilla Firefox or Internet Explore then press Ctrl + F keys and search for the below line

<div class='post-footer'> 

Copy below code and paste it after the above line in your template

<!-- BEGIN PrintFriendly Code -->
<b:if cond='data:blog.pageType == "item"'>
<div id='pfButton'>
<link href='http://cdn.printfriendly.com/printfriendly.css' rel='stylesheet' type='text/css'/>
<script src='http://cdn.printfriendly.com/printfriendly.js' type='text/javascript'/>
<a href='http://www.printfriendly.com' id='pfLink' onclick='window.print(); return false;' style='text-decoration: none;' title='Print an optimized version of this web page or generate PDF'>
<img alt='Print' id='printfriendly' src='http://cdn.printfriendly.com/pf-print-icon.gif' style='border:none; padding:0;'/>
<span style='font-size: 12px; color: #55750c;'>Print <img id='printfriendly' src='http://cdn.printfriendly.com/pf-pdf-icon.gif' alt='Get a PDF version of this webpage' style='border:none; padding: 0;' /> PDF</span></a>
</div>
<b:else/>
<div id='pfButton'><a expr:href='data:post.url + "?pfstyle=wp"' style='text-decoration: none;' title='Print an optimized version of this blog post or generate PDF'>
<img alt='Print' id='printfriendly' src='http://cdn.printfriendly.com/pf-print-icon.gif' style='border:none; padding:0;'/><span style='font-size: 12px; color: #55750c;'>Print <img id='printfriendly' src='http://cdn.printfriendly.com/pf-pdf-icon.gif' alt='Get a PDF version of this webpage' style='border:none; padding: 0;' /> PDF</span></a>
</div>
</b:if>
<!-- END PrintFriendly Code -->
Step 4: Click Save Template, and test the result.

That's it! You successfully completed adding print friendly button to blogger(blogspot) blog.

If you have any doubts about "How to add print friendly button to blog", please don't hesitate to comme


Comments