Thursday, January 31, 2013

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

Print Friendly and PDF

27 comments:

  1. Thank you so much for posting this Heather! I thinks it's a great added feature and it's for Blogger - YAY!!

    ReplyDelete
  2. Well, that is just too cool! I'm going to pin this for future use!

    ReplyDelete
  3. Cool new header! Informative post too! :)

    ReplyDelete
  4. Hey chica, can I feature this on So You Wanna Be a Blogger? great tutorial!

    ReplyDelete
  5. So cool! I had no idea this was even possible, thanks for the tip :o)

    ReplyDelete
  6. Very cool! I have to pin this! I would love to add this to Smart School House!

    ReplyDelete
  7. Replies
    1. Fantastic Melanie!! Yay!! You are so welcome!!

      Delete
  8. Heather, that is so clever! When I get some time, I'd like to play around with this. So helpful, thank you! Sharon

    ReplyDelete
  9. thanks so much, worked great! have a nice day!
    eva

    ReplyDelete
  10. This was so helpful! Now I have a print button too! Thanks for sharing this tutorial!

    ReplyDelete
  11. When I put this on my blog. I also have the hover over photo pin it button and it shows up over my print button. is there any way to fix this?

    ReplyDelete
    Replies
    1. Karissa: I removed my hover over photo pin it button because it was causing all kinds of problems for me...sorry I don't know how to fix that!

      Delete
  12. 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

    ReplyDelete
  13. 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!!

    ReplyDelete
    Replies
    1. Thanks, for getting back to me so soon. I followed your instructions, but the code isn't in my template.

      Any suggestions of what I need to do?

      Thanks,

      Patricia

      Delete
  14. Thank you Heather :)
    Your directions were pefect.

    Lynnie

    ReplyDelete
  15. 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?

    ReplyDelete
    Replies
    1. Gee Jennifer - I don't know what may be causing that...maybe go to the Printfriendly website and see if there is a contact number for you to ask!

      Delete
  16. Thanks Heather, this is awesome.
    Marcie @ I Gotta Try That

    ReplyDelete
    Replies
    1. You're welcome Marcie! Glad you find it helpful!

      Delete

Comments make my day! Really, they do! So drop me a comment and let's get the conversation going!