Thursday, 9 October 2014

How to create a recipe box / card for your blogger blog.

Its been a little while since I posted a technical tutorial on this blog so today I am going to share how you can add a recipe box / card to your blog post. The reason one should add a recipe box is that it writes the recipe in microdata form which in turn makes the recipe easier to find across the internet.

How to create a recipe box / card for your blogger blog:

1. Go to any site such as photo bucket or image shack  and create an account where you can upload a photo and get a direct link to your recipe photo you want to use on your recipe card. Upload your photo and copy the direct url and keep a note of it  by pasting it in note pad. You will need this in step 2 at the very end.
2. Open a new tab in your browser and open  The Recipe Wiz
3. Fill the recipe box  tabs with the recipe instructions.




 3. Once you have entered all your recipe details , click on get microdata. Micro data code will look like this:



4. Copy the microdata code
5. Create a new post in blogger.
6. In blogger you need to have your post open in html format.



7. Once saved, your recipe card will have a photo of your recipe and all the instructions of your recipe written in microdata format finding it easier to find your recipe on the internet.
8.Your recipe card should look like this:































8. You can add additional text and photos above or below your microdata code if you wish to add more information or images in your post. However the microdata template will allow you to show one thumbnail picture only on your recipe card.

39 comments:

  1. That's a good tutorial Nayna. I only cottoned on to this helping with internet searching a few days ago, so have not been using the photo URL function, meaning my recipes cards don't actually work properly - hey ho! I must say, Recipe Wiz drives me nuts though, you can't ever go back and I'm always deleting what I've just written by accident. Plus it's hard to amend once it's on your blog post.

    ReplyDelete
    Replies
    1. @Choclette I have amended the recipe card once I have put on blog by opening the html microdata code and amending it and it works fine. I know what you mean about the deleting thing it highlights and when you enter accidently it deletes.I haven't yet found a better version for blogger blog yet.

      Delete
  2. @Choclette I have amended the recipe card once I have put on blog by opening the html microdata code and amending it and it works fine. I know what you mean about the deleting thing it highlights and when you enter accidently it deletes.I haven't yet found a better version for blogger blog yet.

    ReplyDelete
  3. Thank you so much, I have been looking for one of these for Blogger for ages!!!!!

    Laura x x x

    ReplyDelete
    Replies
    1. Laura , I am happy that it has helped you.

      Delete
  4. Thanks for the tutorial! I'm a terrible baker, but if I ever find a good recipe to share I will remember to come back and use this!

    ReplyDelete
    Replies
    1. Yes sure but you can write the simplest recipe too.

      Delete
  5. It doesn't make them easier to find as such, but it does mean search engine bots can understand what content you have better. It also used to mean that there was a good chance if you had most of your recipes like this Google would show them in search results with a photo and a recipe time, but they seem to have changed the playing field again and it's not happening so much now. I still think it's a valuable thing to do though and it makes recipes more uniform, easier to read and gives that all important print button too. I can give you some code to remove those time details you are not filling in if you are interested.

    ReplyDelete
    Replies
    1. Thanks Jac, it was you that prompted me to visit Recipe Wiz so am truly grateful for that.

      Delete
  6. This is a bit technical for me, but I appreciate the way you so generously share your experience in making the recipe card. I wish I could give you some inspiration but I have no experience to share on this subject, which is rare for me. Hehe. I can usually find something to say.

    ReplyDelete
    Replies
    1. I too am not super technical which is why when I figure out some thing good I like to share it, it also means I have a record of how I did it for the future.

      Delete
  7. This is actually sooo helpful! I do use the occasional recipe on my blog (in fact today's post is one!) and I wondered how to do recipe cards. Will definitely try this next time :)

    India / Touchscreens & Beautyqueens

    ReplyDelete
    Replies
    1. I hope you do a recipe card for your post I will be very excited to think that my post prompted you. :)

      Delete
  8. I've been wondering how to do this so I'm really very grateful for this tutorial :D xx

    ReplyDelete
    Replies
    1. Thanks Michelle, glad you found it useful.

      Delete
  9. I love this. I post about food on my lifestyle blog so going to bookmark this for future use. Thank you!

    ReplyDelete
    Replies
    1. Mellissa, I hope you use it and it works for you.

      Delete
  10. What a good idea thank you

    ReplyDelete
    Replies
    1. It makes it easier for readers to print the card too.

      Delete
  11. What a brilliant tip. I guess you could use this for other side bars etc too?

    ReplyDelete
    Replies
    1. I am not sure about adding it to other types of blog platforms ,I think it would work since you add it as html code.

      Delete
  12. Great tutorial, I'm sure it will be very helpful in sharing recipes.

    ReplyDelete
    Replies
    1. Thanks Louisa, it makes reading the recipe and printing it easier too.

      Delete
  13. I'd never heard of anything like this - will investigate!

    ReplyDelete
  14. This is an ace tutorial. Thank you for this

    ReplyDelete
  15. Great tutorial, I am on WP but I am sure it will help lots of people x

    ReplyDelete
  16. I'll have to have a look at this. I tried another one a bit ago and I couldn't add the details I wanted to.

    ReplyDelete
  17. great tutorial - I use a plugin on Wordpress - love having recipe cards!

    ReplyDelete
  18. Oh wow I seriously didn't know you could do this and I am on blogger! Learnt something today and going to use this sometime soon - thanks so much for sharing

    Laura x

    ReplyDelete
  19. Brill tutorial Nayna! You're our bloggie geek! xx

    ReplyDelete
  20. I always wondered how you did this, now I know x

    ReplyDelete
  21. Thanks for sharing ..nice detailes explaination.

    ReplyDelete
  22. Does this work for Blogger too? Sorry, I'm technologically impaired.

    ReplyDelete
  23. I was on blogger for 3 years and never knew you could do this

    ReplyDelete
  24. Great tuorial. I'm bookmarking this for future reference.

    ReplyDelete
  25. This is great. Thank you for sharing.

    ReplyDelete
  26. I've always thought you couldn't do this on blogger! x

    ReplyDelete
  27. Great job writing up this tutorial. I use a plugin on Wordpress, but will check out other posts on your site!

    ReplyDelete

Without inspiration the best powers of the mind remain dormant. There is a fuel in us which needs to be ignited with sparks.Your valued comments are my inspiration,Thank you for taking the time to leave me these motivational words.
Please spare a moment and click on the widgets in the sidebar to follow this blog to get regular updates.

If you would like regular updates from this blog do take a minute to to join the site via facebook, google friends connect or google plus.

Please do not use this comment platform to advertise your own site, all such comments will be deleted.

LinkWithin

Related Posts Plugin for WordPress, Blogger...