Wednesday, 19 October 2016

Printable Recipe Sheets for Blogger

Sharing how easy it is to produce printable recipe sheets for the blogger / blogspot platform and outlining a few ways in which the aesthetics of the printable can be customised to suit your own style.

How to create and customise printable recipe sheets for use in the blogger platform
 
Ever since launching Only Crumbs Remain on the blogger platform, I've felt that the look and feel of my recipe posts lacked 'something' when I compared them to those which use other platforms.  Those had fancy printable recipes!  They looked great!  Clearly that printable function was something which I dearly wanted to bring to my baking blog.   Finding the code for printable recipe sheets which was compatible with blogger / blogspot really wasn't as easy as I'd hoped it would be sadly.  In fact it took numerous months of on and off searching for me to eventually hit upon the right key words which brought up something suitable.  For that reason I thought it would be worth while sharing the link to the site which produces the code for the printable recipe form, but also share a few ways in which I've modified the recipe sheet, along with a few quirks to be aware of.   
 


So, why use printable recipe sheets?

Printable recipe sheets are great for web pages and food bloggers.  Not only do they give a more professional feel to a food blog, but they're also kinder to your reader who may want to recreate one of your recipes. 

Put yourself in the shoes of your reader.  They've found your food / baking blog, and really fancy recreating one of the recipes which you've lovingly made and shared on your blog.  The food looks enticing and delicious, and the recipe sounds straightforward too.  But without a printable recipe sheet your reader either has to:
  • copy and paste the recipe into a blank word document, to then print,
  • print the whole post (and let's face it, if you're anything like me, your reader may end up with several pages alongside the recipe!),
  • hand write the recipe, 
  • bake with their laptop / tablet / or what ever device they're using sat alongside all of the flour, pastry and butter which really isn't ideal. 

A recipe post with a printable allows your reader to simply click 'print' and hey presto a few seconds later they have your recipe in all of its glory ready to refer to when baking.  The printed recipe sheet can then be filed away for another day of baking and cooking.


  

Printable recipe sheets for blogger.

The form I use to create my printable recipe sheets is called The Recipe Wiz
 
The Recipe Wiz, the form which creates the Printable recipe Sheet for use on blogs which use Blogger / Blogspot

It's a straightforward form to use, which once filled in produces a code which can be pasted into the HTML section of your post.  Not only is the produced printable neat with a clear title, recipe description, ingredient list and method,  but it also includes an image of the completed bake and a 'print' button which sits neatly to the top right of the sheet.

 

 

 

How to use The Recipe Wiz, a printable recipe sheet for the blogger platform.

It really is straightforward to use.
  1. Fill in the date, recipe name, and summary.  Use the summary section to provide an enticing description of the bake. 
  2. Enter the yield or how many people your reader should expect your recipe to serve.
  3. Enter the author.  I like to use my blog's name, Only Crumbs Remain, here to help remind the reader where the recipe came from.  If you prefer, you could use your first name though or even both.
  4. Fill in the ingredients and weights.  Use the 'add another ingredient' button to literally add another ingredient.  If you omit or forget an ingredient, it can easily be added when you edit your post.  

    The Recipe Wiz, the form which creates the Printable recipe Sheet for use on blogs which use Blogger / Blogspot

  5. Do the same with the instructions or method.  Although any typos can be corrected in the post, do aim to remember all of the steps in the correct order when completing the blogger printable recipe form.  To date I've struggled to find a way to add extra steps if the recipe needs editing significantly in the post.
  6. Complete the time fields.  Once you click into the 'prep time', 'cook time' and 'total time' fields a slide bar is produced to select the time in minutes and hours.  Again, these numbers can be easily edited in the actual post.  I often omit the total time field.
  7. Select the image you'd like to represent your recipe and find the HTML code for it.  You could use a platform like photobucket, or similar, for this.  Alternatively, use the code produced by blogger itself.  Once your image has been uploaded to the post, the code can be found in the HTML section of the post.  The HTML code looks like this:

    HTML code for images to use in printable recipe sheets for blogger

    Copy the code within the second set of speech marks which starts SRC and paste into the printable recipe form.                                                                                                              
  8.  Press the green 'Get Macro' button for the code to be produced for your printable recipe.  Copy the code and paste it into the HTML section of your post.
  9. Voila....you now have a recipe which can be printed easily!!

 

 

Viewing the printable recipe sheet in blogger.

Once the code has been pasted into the HTML section, you will notice that the recipe seems somewhat compacted when read in the 'compose' section.   Although the ingredients are listed with bullet points, the actual method steps run into one another.  Do not despair!  By saving your content and clicking 'preview' you will be shown how the printable recipe will look once the blogger post has been published.

Viewing the code in the HTML section is fairly straightforward.  When the code is initially pasted into the HTML section it appears as one long complex body of text and code.  However, once you jump into the compose section and then back into the post's HTML section you will notice that it is then a little easier to read having been presented as three sections.  The code starts with details regarding the font size, weightings, and positions of things like the image, title, summary etc.  There then appears to be a gap before the code for the list of ingredients is reached.    The final code is your recipe's body of text for the 'method'. 




How to modify the blogger printable sheet.

OK, so you now have your recipe in a printable format and doesn't it look much better than simply typed in!  But if you're anything like me you might want to play around with the layout a little to make it more to your liking and style.  Trust me, it's really easy!  And it only take a few minutes!  I'm certainly not a tech-head but I've been able to make subtle changes which make a huge difference aesthetically to the printable.

The image below is a screenshot of a printable recipe with no alterations made to it.  As you can see, the image is located to the left hand side and is relatively small, the font size of the recipe's title isn't particularly large, and the time and yield details are located at the bottom of the recipe instructions.  (NB, I've had to show this as a screenshot rather than 'the real thing' as when a post contains more than one recipe sheet and the code is altered all of the post's printable recipes are changed.)  

The default look and feel of the printable recipe sheet when used in blogger



Below, is the same printable recipe with a few simple modifications.
  • The image has been enlarged and relocated to the right-hand side of the printable sheet making it easier for the reader to find a recipe if they are filed away in a folder.  
  • The recipe's title has also been enlarged.
  • The time & yield details have been repositioned towards the top of the post.   The yield has also been realigned with the time details.
  • A 'notes' section has been introduced beneath the recipe's method.
  • A 'Specific Equipment' section has also been introduced  
  • A brief description of each method step has been underlined.
  • The word 'Instructions' has been replaced with 'Method'.
  • Finally, the ingredient list has been separated into the different elements of the bake, in this instance it has been separated into three sections: for the sponge, frosting and decoration. Though, of course, this may not always be necessary depending upon what the recipe is detailing. 






print recipe

Ava's Mint Choc-Chip Daisy Cupcakes
These mint choc-chip cupcakes not only look pretty but taste amazing too. These cupcakes were decorated with pretty pink flowers and a green 'grass' buttercream.
Details
Prep time: Cook time:      Yield: 6

Specific Equipment
    6 x muffin sized cupcake cases
Ingredients
For the Cupcake Sponges
  • 90g Butter, unsalted & softened
  • 45g Golden Caster Sugar
  • 45g Caster Sugar
  • 2 Large Egg, lightly beaten
  • 1 tbsp Milk
  • 75g SR Flour
  • 15g Cocoa Powder
  • 1 generous handful Milk Chocolate Chips
For the Frosting
  • 140g Butter, unsalted & softened
  • 280g Icing Sugar
  • small splash Milk
  • Green Food Paste Colourant
  • 1/2 - 1 capful Peppermint Flavouring
For the Decoration
  • approx 30 small Sugarcraft Flowers

Method
1. Pre-heat the oven to 190c / Fan 170c / Gas 5. Place the paper muffin cases into the muffin tray.2. Make the sponge. Place the softened butter and sugar into a good sized bowl and beat together with a wooden spoon or electric beaters until pale and fluffy. Gradually add the beaten egg a little at a time, beating well after each addition. Add the milk and beat to combine. Sieve the flour and cocoa into the bowl and fold in gently using a large metal spoon or spatula. Ensure that there are no white pockets of unmixed flour in the bottom of the bowl. The batter should be smooth, chocolaty and streak free. Add the chocolate chips and stir until just combined. 3. Fill the paper cases. Use a teaspoon to fill the paper cases. You're aiming for them to be around half to two-thirds full. You may decide to weigh each muffin to ensure equal sizes. Each filled paper case will weigh about 65g.4. Bake. Place the muffin tray in the pre-heated oven and bake for about 20 - 23 minutes. You may need to rotate the tray after 15 minutes of baking. Remove the tray from the oven once the cupcakes are fully baked, the sponge will spring back when gently touched. Carefully remove each cupcake from the baking tray hollow and place on a cooling tray.5. Make the buttercream. Place the softened butter into a good sized bowl. Beat the butter either with a wooden spoon or handheld beater until it is soft enough to incorporate the icing sugar. Sieve most of the icing sugar into the butter. Use a wooden spoon to combine the two ingredients. Once combined beat well to create a creamy frosting. Taste and add the rest of the icing sugar if necessary. Add a little milk if the mixture feels particularly thick, (I added 2 capfuls). Add the food colourant and mix well, see notes below. Add half a capful of mint flavouring and mix to combine, taste and add a little more if you like. Spoon the mixture into a piping bag fitted with a star nozzle. 6. Decorate the buns. Once the cakes are completely cold pipe a small amount of frosting onto each cupcake and spread it out with a pallet knife so that the chocolate sponge beneath is fully hidden. Pipe small swirls or rosettes onto the top of each cupcake. Gently place a few sugar flowers randomly onto the frosting (I used 5 on each of our cakes). 7. Enjoy!
Notes:
a) If you prefer your cupcakes to have a stronger chocolate flavour, simply remove a dessert spoon of flour and replace it with the same quantity of cocoa.  b)The amount of colurant you will need to add to your buttercream frosting will depend upon the shade you're aiming for and the brand you purchased.  Some brands of colourant are more effective than others.  You may only need to add a small quantity from the tip of a toothpick, though with others you may need to add most of the tube.  Therefore, if you're unsure about the colour you're using take it slowly as you can always add more to achieve the shade you want.  c)  Add only half a cupful of the peppermint flavouring before tasting and add more if required, after all you don't want it to taste of toothpaste!  









How to customise the printable recipe sheet for blogger.

 

So, now that you've got the code for your printable recipe pasted into your post, why not have a little play and customise it to your own preference.  Remember, I'm not a tech-head, but these really are straightforward changes.  I promise :-)

How to increase the recipe's image size.

The image size appears to be set to a default width of 100px.  You may be happy with this dinky size, though if you want to enlarge it, here's how:
  • Go to the HTML section of the post.
  • Find (Press Control & F) Width="100px" (type Width="100px" into the search bar at the bottom left of the screen).
  • Hit enter. 
  • Assuming you don't have other small images throughout your post set to this width, this will bring up the image you've selected for the recipe.  If you do have other images set at this width, simply keep pressing enter until you find the correct one.
  • Change the 100px to a higher number.  I use 250px.
  • Go back to the 'compose' section and press 'save'. 

 

 

How to position the recipe image to the right-hand side of the printable recipe sheet. 


  • Go to the HTML section of the post.
  • Find (press Control and F) #rechead img{float:left; (type #rechead img{float:left;  into the search bar at the bottom left of the screen).
  • Hit enter.
  • Replace the word left with right
  • Return to the 'Compose' section, and press save.  
  • Go to preview, and you will see that the image is now enlarged and positioned to the right hand side.  

 

How to enlarge the recipe's title. 

The recipe title is automatically set to a size of 18px, if you want to adjust that, here's how:
  • Go to the HTML section of the post.
  • Find (press Control and F)  div.title{ font-size (type div.title{ font-size into the search bar at the bottom left of the screen).
  • Hit enter.
  • The recipe title is set to a default of 18px.  Change the number 18 to the size you want.  I use 28px. 
  • Return to the 'Compose' section, and press save.
  • Go to preview, and you will see that the size of the recipe title has been increased.   


How to introduce a Notes section (and other extras) in your printable recipe sheet on blogger

  • Working in the compose section of your post, drop the cursor immediately after the last punctuation mark of your recipe instructions.  
  • Press Enter.
  • Type in the header you want, such as 'Notes' or 'Hints and Tips' etc.
  • Press Enter.  
  • Type in the extra information you want to include.
  • Use bold, underline, italics etc as desired. 
  • Save the changes and check it in preview, ensuring that the changes are within the printable area of the recipe.    
  • Similarly, you could introduce other sections to identify if specific equipment is required, or to mark the recipe as Vegetarian, Vegan, Gluten Free, Lactose Free etc


How to modify the ingredients list.

Often recipes have different elements to a bake, for instance in a cupcake recipe there is often the sponge and the frosting, and with a pie there are the ingredients for the pastry and the filling.  The code for the printable recipe presents the ingredients in one list marked with bullet points.  You may like it like this, but if you prefer to separate the ingredients into the different elements for your readers it's very straightforward.   Here's how:
  • Position the cursor infront of the quantity of the first ingredient.
  • Hit the Enter key.  A new bullet point will be appear above the first ingredient. 
  • Preposition the cursor against the new bullet point and type in something like 'For the Sponge' or 'For the Pastry' etc.  
  • To remove the bullet point from that header, ensure your cursor is positioned on the appropriate line and press the 'bullet list' button (it will be highlighted until the bullet is removed).
  • Add more titles through the ingredient list as required.    
  • Any ingredients which you may have forgotten when completing the Printable Recipe form can be simply added in.





How to make other small edits to the printable recipe sheet.

Remember to try to include all of the instruction / method steps when filling out the form before pasting the HTML code into your post, as it can be difficult to add in any forgotten steps.    

  • Working in your post's 'compose' section, simply edit the text as you would normally.  For instance, you can delete out the 'Total Time' and simply keep the 'Prep Time' and 'Cook Time'; amend the date; reposition the 'Details' section of the recipe from the bottom of the printable to where you prefer by simply copying and pasting it; correct typos; underline words as required etc.
  • You could also reposition the 'Yield' field whilst working in the 'compose section'.  Simply drop the cursor before the word 'yield' and hit the cursor four or five times.  Save and check the preview to ensure it is aligned as you would like.  
  • The 'prep time' field and 'cook time' fields, when completing the form in the recipe code builder only allows one static time to be input, such as 30 minutes, where as in reality a bake time may infact need to read something like 30-35 minutes.   To produce a time frame, simply edit the numbers in the 'compose' section as you would normally. 



Quirks to consider when using the printable recipe form.

Don't get me wrong, the form is absolutely brilliant and is easy to use.  Plus, it's the only site I've found which produces printable recipe codes for blogger!   However, like most things in life it's not perfect.  So, here are a couple of things to bear in mind when using it.
  • This anomaly applies only when entering your first ingredient or typing in the first 'instruction' field.  Simply, if you reposition your cursor with the mouse, the body of text in that field is highlighted and the cursor is lost and the highlight cannot be dropped.  To avoid this happening, move the cursor with your arrow keys.  If it does happen, simply copy the text and paste it back into the field, then move the cursor with the arrow keys.  (Subsequent ingredient and instruction fields behave as you would expect when editing any body of text.)
  • You may want to spend an hour or so creating a few recipe sheets.  The recipe Wiz form has a button positioned to the right of date field which re-sets the form.  However, although the form deletes any information already input, such as the ingredient list, recipe title etc etc, it doesn't wipe clean the code produced from the previous recipe.  Therefore if you were to continue completing the form for a second recipe you would find that the code produced is that for the initial recipe.  I've found the best way to produce a batch of printable recipes is to close the window when your happy with the initial recipe and then open a new window to start afresh with a subsequent recipe. 




Play, save and print!

So, as you can see, there are a host of changes which can be made to the printable recipe sheet in blogger.  You may want to take it further than the changes I routinely make, which I've outlined above.  Perhaps you fancy repositioning the 'print' button (though, to be honest, I wouldn't recommend this as most people expect to see it on the top right of a recipe), or altering the font size of subheaders.  Maybe you fancy listing the ingredients to the right hand side of the page.  Whatever you envisage, don't be afraid to tweek the recipe's code.  The code you're amending is in the post's HTML and will ONLY change that particular post.  It will not alter your actual blog!

When amending your printable recipe in blogger, remember to save the changes and then check the look and feel of it using the 'preview' button.  Once your recipe sheet is looking just how you want it, it's also worth while trying out a test print!  Who knows, you may not like it once it's printed or you may have inadvertently changed something which affects the print function (though to be honest that's highly unlikely!)


So, now you know that we can have printable recipe sheets on the blogger platform to support fabulous bakes, go and check out The Recipe Wiz site and play, save & print!



   







Pin it for later

How to create and customise printable recipe sheets for use on the blogger / blogspot platform










Share this Post Pin This Share on StumbleUpon Share on Tumblr Share on DigItShare on Redditt Share on Google Plus Email This

4 comments:

  1. Wow you've done an amazing job here! This is a blog post I wish I could've stumbled across a few years ago. The recipe sheets do make blogs a lot more user friendly. You will definitely help a lot of people use Recipe Wiz with this :)

    ReplyDelete
    Replies
    1. Aw thank you Kat, I hope it does help those who use blogger because it's a great use form to use and produces a great printable.
      Thanks for your lovely comment Kat,
      Angela x

      Delete
  2. I agree with Kat! Really helpful post..... I have bookmarked and when I eventually get a moment, I will hopefully be able to explore the process in more detail x

    ReplyDelete
    Replies
    1. Oh good, I'm glad you've found it helpful Kate. It's really straightforward to complete, and of course if you don't want to tweek and modify the layout then you really don'y need to.
      Angela x

      Delete

Thank you for spending your time to read my recipe posts. Feel free to leave a comment, I enjoy receiving your feedback. However, due to spam I have activated comment moderation, which simply means that each comment will be read by myself before it is visable on Only Crumbs Remain. I shall publish and respond to your valuable comments as soon as I can. So please don't panic when your comment disappears when you hit the publish button :-)

Flick through our recipes!