Custom Button Placement in Current Generation Blogger Template

You can manually add the PrintFriendly button to your blog in four easy steps. If you prefer a simpler way, you can use blogger's built-in add widget tool.
 

---

Step 1: Copy The Print Friendly & PDF Button Code

<!-- BEGIN PrintFriendly Code --> <b:if cond="data:blog.pageType == &quot;item&quot;"><br /> <div class="pfButton" style="margin:18px 18px 0 0; float:left;"><script src='http://cdn.printfriendly.com/printfriendly.js' type='text/javascript'/></script><a class="printfriendly" href="http://www.printfriendly.com" onclick="window.print(); return false;" style=" color:#6D9F00; text-decoration:none;" title="Printer Friendly and PDF"><img alt="Print Friendly and PDF" src="http://cdn.printfriendly.com/pf-button.gif" style="border:none;" /></a></div> ​</b:if><!-- END PrintFriendly Code -->

Step 2: Prepare to edit your blog's HTML template.

• Log in to your blog dashboard. 
• Click Template on the left navigation menu. 
• Click Edit HMTL below your blog thumbnail.
  * If nothing happens, note that PrintFriendly currently works on any of the Classic Blogger/Blogspot templates. We are still working on getting this to work on the new Dynamic View template.
  
   
• A warning message will appear. Click Proceed.
  
   
• An Editor window will appear. Click on the check box next to Expand Widget Templates
  
   

 

---

Step 3: Paste the PrintFriendly button code.

• Find <data:post.body/> in the Editor window.
  * Tip: Press "Control" and "F" on keyboard to search.
• Paste the PrintFriendly button code above <data:post.body/> to make the button appear above your posts. Paste the code below <data:post.body/> to place the button below your posts.
  * Careful: There's two versions of <data:post.body/>. Use the first (web) not the second (mobile).
   

---

Step 4: Preview and save your changes.

• Click Preview. 
• Click Save template. 
• Enjoy!

---

Custom Button Placement In Previous Generation Blogger Template

If you are using the new Blogger interface, please check this article instead.

You can add the Print Friendly & PDF button anywhere in your blogger template.

You'll need to manually add the code to your template.

Step 1:Copy the PrintFriendly Code

<!-- BEGIN PrintFriendly Code --> <b:if cond='data:blog.pageType == &quot;item&quot;'><div class='pfButton' style='margin:18px 18px 0 0; float:left;'><script src='http://cdn.printfriendly.com/printfriendly.js' type='text/javascript'/></script><a class='printfriendly' href='http://www.printfriendly.com' onclick='window.print(); return false;' style=' color:#6D9F00; text-decoration:none;' title='Printer Friendly and PDF'><img alt='Print Friendly and PDF' src='http://cdn.printfriendly.com/pf-button.gif' style='border:none;'/></a></div></b:if> <!-- END PrintFriendly Code -->
​
Step 2: Select Blogger as first option.

Step 3: Choose Print/PDF button style.

Step 4: Choose add code directly to template.

Step 5: Copy paste the code.

Step 6: Goto your blogger account, click Design, Edit HTML, and put a check mark in Expand Widget Template.

Step 7: Paste the code inside your template above or below the article (see image below).