Monday, April 27, 2009

How To Make Printable Recipe Pages

Today I'm featuring a guest post from fellow food blogger Kevin from Closet Cooking! Kevin has a great cooking site and his blog features printable recipes! I love this feature because it makes it super easy to print recipes from blogs. In this tutorial, Kevin teaches us how to do it!



The internet has been great in helping me find new recipes to try. One problem that I have though is that my computer is not in the kitchen which means that I either have to run back and forth to the computer or I need to print out the recipe. As I don't want a trail of floury foot print from my kitchen to my computer, printing the recipe is the way to go.

But simply printing the recipe is not that easy. The pages with the recipes on them generally have more than just the recipes on them, including: headers, sidebars, comments and footers. I really don't want to have to sift through 10 pages of printouts to find the recipe that is hidden among them. Wouldn't it be nice if there was a printable version of the recipe with just the recipe on it?

Printable recipes in the second part of post...

With the printable recipe problem in mind I started to look into how I could add a printable version of the recipes to my site with a minimal amount of extras on the page. If I had a hosted solution it would be easy; I could just add new pages with the recipe and whatever else on them that I wanted. But, I am on the free blogging platform blogger which does not allow you to add arbitrary pages whenever and where ever you want. As I did not want the hassle and extra expenses of a hosted solution I looked for another free online solution and I came across Google Sites.

Google Sites is another free service offered by google where you can publish web pages or even an entire web site. All you need is a google account and if you are on blogger or use gmail etc. then you already have one. It is pretty easy to set up a google site.

How to create a google sites site for printable recipes


1. Go to http://sites.google.com/ and sign in with your google account.
2. Hit the Create Site button.
3. Choose a site name such as: Your Site Printable Recipes
4. Choose a URL such as: https://sites.google.com/site/yoursiteprintablerecipes
5. Choose a theme. I chose the basic white theme with printing in mind.
6. Submit the form.

You now have a site. But the default site will have a header and a side bar and I did not want them so I had to remove them as follows.

How to remove the header and sidebar


1. Click on the "Edit Sidebar" link on the bottom of the side bar or go to "Site Settings" on the top menu and choose "Change Appearance".
2. Click on "Change Site Layout"
3. Uncheck the header and the sidebar and hit OK.
4. Hit the "Save Changes" button on the top right.
5. Click "Return to Site" on the top left.

Now the site is setup and ready to have recipe pages added. Adding recipe pages is pretty simple.

How to add a recipe page


1. Click on the "+ Create New Page" button on the top left.
2. Leave "Web Page" selected and enter the "Name" of the recipe and hit "Create Page".
3. Copy the recipe from your unpublished blogger post and paste it into the new page on google sites.
4. Clean it up in any way you want and hit "Save".
5. Copy the url of the page from your browsers address bar and use it to create a link in your blogger post to the printable version of the recipe.
6. Finish your blogger post and publish it.
7. At this point you can copy the url from your blogger post and "Edit" the google sites printable recipe and add the link back to your blogger post if you like.

Now you have a printable version of your recipe. Google sites adds a footer to the page that I have not found a way of removing yet but other than that the page just has your recipe. Given that google sites is a free service I am not too bothered by the footer on the page.

Kevin is a food blogger based in Toronto. You can read his delicious recipes on his blog, Closet Cooking.

22 comments:

  1. Thank you for this Kevin! I have been contemplating adding this to my site, and now given how easy it is I'll give it a go right away!

    ReplyDelete
  2. Awesome! Exactly what I was looking for!!! THANK YOU SOOOOOOOOOO MUCH!

    ReplyDelete
  3. thanks Phoo and Muneeba...Kevin's tutorial is really great....please leave a link once you place you printable recipe link...I'd love to see them.

    Danny-

    ReplyDelete
  4. Thank you so much for this great information! I am starting a cooking blog as a hobby, but how do you rename the link in your blog? Instead of showing the http:address.. how can I just have it say "printable recipe"?

    ReplyDelete
  5. Hi Vanilla,

    I think you have to change the text in between the link tag..

    here is a link that explains how to change the html
    code for links

    Hope that helps!

    ReplyDelete
  6. There are also some other options available - PrintFriendly.com is a service that makes any page printable and provides an attractive print button. - www.PrintFriendly.com (they have a plugin for WordPress, too)

    Or, if you are on WordPress, there are a couple of plugins available -

    http://wordpress.org/extend/plugins/wp-print
    http://wordpress.org/extend/plugins/hp-blog-printing-plugin-v10-for-wordpress

    ReplyDelete
  7. Thanks so much for this! I'd been storing my recipes at DivShare and hearing from my readers that they don't love going that route so I am hoping this method is an improvement. Thanks for your clear, concise directions.

    ReplyDelete
  8. Thanks Digigirl...excellent resources!

    Magpie Ima, I'm glad you found it helpfull! Make sure to visit Kevin's site...he has some truly wonderfull recipes.

    ReplyDelete
  9. At first I thought it was going to be difficult to do but it really wasn't! I was so pumped to post my first printable recipe!! Thanks so much for sharing this!!

    ReplyDelete
  10. awesome ! i've been wondering how to do this! thanks :)

    ReplyDelete
  11. I'm having trouble doing this on Blogger. Is anyone patient enough to really spell it out for me? Thanks a ton!

    ReplyDelete
  12. Hi Nichole...could you explain what part your having trouble with?

    ReplyDelete
  13. Thanks Danny, I've been able to do everything to add the Printable Link to my blog but when I do(#7)["At this point you can copy the url from your blogger post and "Edit" the google sites printable recipe and add the link back to your blogger post if you like"], it is saving over the previous recipe...does that make sense? Thanks for your patience!

    ReplyDelete
  14. Do I need to create a new site for each recipe?

    ReplyDelete
  15. Nichole,

    I believe you just create a "new page" for each recipe. This will create a new URL...sort of like a post on your blog, and all you have to do is copy that URL and add a link to it on your blog. Does that make sense?

    ReplyDelete
  16. Perfect, got it now! New page for each! Thanks a ton Danny, you've been super helpful!

    ReplyDelete
  17. Me again:) Some of my followers are saying that if they are not "logged in" to gmail, etc., they are unable to print the "printable recipes". I've been fooling with the settings to try to make them accessible to anyone...any thoughts on this? Thanks!

    ReplyDelete
  18. Thanks so much! I've been looking for a simple way to 'print recipes' using blogger!

    ReplyDelete
  19. I am so happy I found this;my problem is that I end up with the whole add intead of just Printable ...does this make sense?
    Thank you!

    http://sites.google.com/site/myrecipestoshare/chocolate-chip-skor-cookies?tmpl=%2Fsystem%2Fapp%2Ftemplates%2Fprint%2F

    ReplyDelete
  20. I just started this today! This is a really useful post. Thanks!

    ReplyDelete
  21. If you want to add google analytics to your printable recipes here is a helpful guide:
    http://www.steegle.com/websites/google-sites-howtos/google-analytics

    ReplyDelete
  22. The instructions on this post couldn't have been better. Thank you so much!!

    ReplyDelete