Blog Tutorial – How to add PrintFriendly Button to Blogger Posts

 

Would you like your readers to be able to print your blog posts, your recipes or tutorials, in an easy and simple way, without printing your ads and graphics?

Then you need to add the PrintFriendly button to your blog posts!

Pin It

Add Printfriendly Button to Blogger from Setting for Four #tutorial

1 Printfriendly Button

PrintFriendly strips out ads and other clutter as well as formats the page for optimal printing.  It also gives you the option of removing individual elements you might not want.

I just added the button two weeks ago to my blog, so now you can print out my posts easily! 

You can see it here in action, below one of my posts:

Print Friendly Button in Blogger Post from Setting for Four

 

When you click on the button you can print my recipes, or tutorial instructions easily!

This is what you will see when you click on the green Printfriendly button:

Click on Printfriendly Button, Tutorial Step from Setting for Four

By mousing over certain sections of the screen above you can delete elements too, just click on them to delete…so I could delete the first three sentences for example and only print out the specific images and sentences I want!  Saves paper and ink!

Click on the Print button in the top left corner to get this:

Print window opens, Tutorial Step from Setting for Four

Then click print to print it out!

You can also turn your post into a dowloadable PDF by clicking on the PDF button at the top:

Click on Printfriendly Button, tutorial step from Setting for Four

This window then appears and you can download the post as a pdf!

PDF portion of PRintfriendly button, tutorial step from Setting for Four

The third action you could take is to click on the Email button to email the post page to someone!  When you click on the Email button this window appears:

Email portion of Printfriendly, tutorial step from Setting for Four

How to add the Printfriendly button to your blogger posts:

1.  Go to Printfriendly.

2. Choose your Site (Blogger) then Choose your button style:

Choose your button Printfriendly, tutorial step from Setting for FOur

3.  Choose your features (I didn’t change any of these and left them as is…)

Choose your Features, Printfriendly tutorial step from Setting for Four

4.  Now get the button code click on ‘add code directly to template’ (I didn’t use the ‘Install Blogger Widget” because I wasn’t sure where the widget would place the button and I wanted to specifically add it to the end of my posts…):

 

Get code for Printfriendly button,Printfriendly tutorial step from Setting for Four

5.  Copy the button code provided (ignore the ‘Yikes!’ comment):

Copy and Paste Button Code, Printfriendly tutorial step from Setting for Four

6.  Back up your blog before proceeding!!  This is crucial!

Go to your Blogger Template and select ‘HTML’

7. Click ‘Proceed’ when the warning message appears.

8.  Put checkmark on ‘Expand Template Widgets’ box.

9.  Find this code in your template: <data:post.body/>

An easy way to find this code is to click Control ‘F’ and that will open a ‘Find’ box where you can copy and past the code <data:post.body/> and the code will be automatically highlighted and located for you!

**Be Careful: There’s two versions of <data:post.body/>. Use the first (web) not the second (mobile). **

10.  Paste the Printfriendly Button code above the <data:post.body/> if you would like the button to appear before the post body

…or

11.  Paste the Printfriendly Button code below the <data:post.body/> code if you would like the button to appear below the post body….. like I did.

12.  Click ‘Preview’…does everything look ok?

13. Click ‘Save Template’.

The PrintFriendly Button has been added!

Good luck with this and if you have any questions, leave me a comment and I’ll try to help you the best I can!

Did you like this tutorial?  If you did – leave me a comment and I will add more!

~ ~ ~ ~

Want posts delivered to your inbox? Click here!

 

Subscribe Via Email Rss

Or follow along with me here !:

Find Me On Facebook follow me on twitter Rss Feed Options follow me on pinterest StumbleUpon

~ ~ ~ ~

* Thank you SO much for coming by for a visit! I love to hear all of your comments! *

Heather

Written by Heather at Setting for Four

Setting for Four is a home design, décor and lifestyle blog. Focus is on home renovations, crafts, DIYs, tutorials, recipes, as well as family friendly design and decorating ideas that won’t break the bank or sacrifice style.

You can find Setting for Four on

Sharing here:

I heart Naptime     Act Different Be Normal


Comments

  1. says

    Heather,
    Thanks for your tutorial. I have been trying to add the print button and have a problem. I do not get the Proceed button when warning message appears. I have a screen that has a “save template” button already highlighted. But when I click on it, nothing happens. I backed up on the previous screen and thought maybe that was my problem. I deleted the saved template, but it still did nothing when I clicked on the save template button and I still do not get the proceed option/screen.

    Hope you can help me.
    Thanks,
    Patricia

  2. says

    Patricia: Blogger has changed the look of the template section – that’s why you don’t get the “proceed’ warning…first of all back up the template you already have (so important!!) then go to template – edit html – you’ll see your html in a window – make sure the cursor is in the html somewhere. Then proceed to the tutorial starting here:
    9. Find this code in your template:
    An easy way to find this code is to click Control ‘F’ and that will open a ‘Find’ box where you can copy and past the code and the code will be automatically highlighted and located for you!

    **Be Careful: There’s two versions of . Use the first (web) not the second (mobile). **

    10. Paste the Printfriendly Button code above the if you would like the button to appear before the post body

    …or
    11. Paste the Printfriendly Button code below the code if you would like the button to appear below the post body….. like I did.

    12. Click ‘Preview’…does everything look ok?

    13. Click ‘Save Template’.

    The PrintFriendly Button has been added!

    Hope this helps!!

  3. says

    I’m with Patricia. I can get it to load on whole blog but not just on recipes or places I want. Please help. Your instructions are wonderful not sure what I am doing wrong?

    • says

      Hi Erinn! Did you add it under the first in your html?? There are two of those pieces of code in your template – you need to find the first one and follow the instructions….otherwise I’m sorry I don’t know what may be not working! Maybe if you go to the Printfriendly site and ask for help there?? Again here are the instructions in my tute! Good luck! 9. Find this code in your template:

      An easy way to find this code is to click Control ‘F’ and that will open a ‘Find’ box where you can copy and past the code and the code will be automatically highlighted and located for you!

      **Be Careful: There’s two versions of . Use the first (web) not the second (mobile). **

      10. Paste the Printfriendly Button code above the if you would like the button to appear before the post body

      …or

      11. Paste the Printfriendly Button code below the code if you would like the button to appear below the post body….. like I did.

  4. says

    Thank you for such a clear and helpful tutorial! It took me a while but I figured out what I was doing wrong. I saw that there were a few others that thought the button was not working and I thought perhaps the issue I was encountering might be the same for them. I followed the instructions on a couple of my blogs but it didn’t seem to be working completely. But then I finally had an ah-ha moment. The button (I actually used the widget tool and it worked fantastic!) doesn’t show up at the bottom of every post on a page (like the other social media icons do). It shows up when you select a single post. The button will appear at the bottom of the first post on a page but not the rest which led me to believe I was doing something wrong. If you use the widget it shows up in the blog “layout” but is only visible at the bottom of the first post on a page and then at the bottom of any post selected and brought up as a single page. Does that make sense? Thanks again!!

  5. says

    got it to work but had to follow the directions on the print friendly web page because pasting it after data post body didn’t work…?!?! I posted it in line 5, right after ‘head’

  6. says

    I tried many methods and followed your tutorial through and through, but the button is still not showing up. Any more tricks? Thanks for the clear tutorial though!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>