12 January 2012

How to add a recipe index to your blog

I have a question for you. Are the recipes on your blog easy to find? Are you relying on people using the search button or clicking on labels? If you are, it may be time to add a recipe index to your sidebar. It really is the best way to display all your recipes.

I have passed this code on to a few bloggers who have asked for my help, but I thought it would be a good thing to share at the start of a new year. I am taking inspiration from Jeanne (Cook Sister), who reminded us during her talk at Bite N Write that we should all support each other and share knowledge, not keep it to ourselves. A good adage for bloggers, especially food bloggers. We have such a supportive community.




To add an index to your sidebar:

1. In blogger: Open the Design Tab and in Page Elements click on Add a Gadget. Select HTML/JavaScript. It is probably laid out a little differently in Wordpress.

2. Copy the code below and paste into the box. Replace the red text with your own information. Save once you have finished. I have tried to make it as simple as possible. It will take some time to index all your recipes, but you can just do a few at a time and add more as you go.

Code to copy and paste:


<div class="clear"></div>
<div id="HTML2" class="widget HTML">
<h2 class="title">Recipes (or add your own index title)</h2>
<div class="widget-content">

<select onchange="self.location.href=''+this.options[this.selectedIndex].value+''" style="width:222px" class="tinyselect">
<option value="" /> name of first category ie pasta
<option value="recipe url" /> name of recipe
<option value="recipe url" /> name of recipe
<option value="recipe url" /> name of recipe
<option value="recipe url" /> name of recipe
<option value="recipe url" /> name of recipe
<option value="recipe url" /> name of recipe
<option value="recipe url" /> name of recipe
<option value="recipe url" /> name of recipe
<option value="recipe url" /> name of recipe
<option value="recipe url" /> name of recipe

</select> always end each category with this

<select onchange="self.location.href=''+this.options[this.selectedIndex].value+''" style="width:222px" class="tinyselect">
<option value="" /> name of second category
<option value="recipe url" /> name of recipe
<option value="recipe url" /> name of recipe
<option value="recipe url" /> name of recipe
<option value="recipe url" /> name of recipe
<option value="recipe url" /> name of recipe
<option value="recipe url" /> name of recipe
<option value="recipe url" /> name of recipe
<option value="recipe url" /> name of recipe
<option value="recipe url" /> name of recipe
<option value="recipe url" /> name of recipe

</select> end of category

<select onchange="self.location.href=''+this.options[this.selectedIndex].value+''" style="width:222px" class="tinyselect">
<option value="" /> name of third category
<option value="recipe url" /> name of recipe
<option value="recipe url" /> name of recipe
<option value="recipe url" /> name of recipe
<option value="recipe url" /> name of recipe
<option value="recipe url" /> name of recipe
<option value="recipe url" /> name of recipe
<option value="recipe url" /> name of recipe
<option value="recipe url" /> name of recipe
<option value="recipe url" /> name of recipe
<option value="recipe url" /> name of recipe

</select> end of category


</div></div><strong></strong><strong></strong> this is the end of the index


3.Add as many recipes and categories as you like, just make sure you start each category with:

<select onchange="self.location.href=''+this.options[this.selectedIndex].value+''" style="width:222px" class="tinyselect">
<option value="" />

and end each category with:

</select>

I hope you give it a go. Do leave me a comment and let me know how you get on. If you have any problems, just drop me an email.

Thanks to Angie, who kindly helped me with my code originally.

Sharing the blog love

77 comments:

  1. nice useful post

    Aarthi
    http://yummytummy-aarthi.blogspot.com/

    ReplyDelete
  2. Jacqueline, thanks to you sharing this with me a couple of years ago I've had it working well for me ever since!

    ReplyDelete
  3. I am glad it has helped you Sylvie :)

    ReplyDelete
  4. Thanks for sharing this with me, I am now going to let Choclette know, as she asked and this is easier for her to follow than my muddled email!
    Karen
    XXXXXXXXXXXX

    ReplyDelete
  5. That's great Karen, I hope everyone gets a chance to use the code.

    ReplyDelete
  6. Just posted it to my FB page too! Sharing the Blog Love! XX

    ReplyDelete
  7. Oh,thanks for this Jac...it's something I've asked about on a couple of forums and had no reply. When I'm feeling brave, I'll give it a go!

    ReplyDelete
  8. It really is easy Lisa. Just copy and paste the code, adding your own recipes and links.

    ReplyDelete
  9. You are amazing! Been wanting to add an index to my blog and you've made it look so easy :)

    Gonna put it tonight, can't wait.

    Thanks again xxx

    ReplyDelete
  10. Thanks! I've been planning on doing this for ages, you made it easy!

    ReplyDelete
  11. Aww that's brill Nish :)

    Do it now before baby arrives Nic, although I got loads of blogging done while I was breastfeeding. One handed typing.

    ReplyDelete
  12. This is excellent! Hopefully I can get this done over the weekend, as my recipes are getting quite clogged up now! Thanks :)

    ReplyDelete
  13. Thanks so much. Once I'd done the first couple it was pretty straightforward.
    Totally agree - its great to share knowledge!

    laura xx

    ReplyDelete
  14. No probs :)

    It's looking good Laura :)

    ReplyDelete
  15. this looks great but I prefer to browse a list in a page rather than in one of these drop down lists - so I add my recipes to my index manually which means they are often behind a few weeks - but I have wondered about finding out if there is a way to feed recipes to pages automatically - I actually really liked the archive style at http://thestonesoup.com/blog/start-here/ but so many of my headings aren't the recipe titles that it wouldn't do for an index

    ReplyDelete
  16. Thanks for sharing this - I need to seriously consider using it

    ReplyDelete
  17. You have to choose the one you are happy with Johanna :)

    I hope you do CC, I often trawl your archive :)

    ReplyDelete
  18. Really helpful, thanks! Am going to try this on my own blog and will of course credit you.

    ReplyDelete
  19. This comment has been removed by the author.

    ReplyDelete
  20. Thanks so much for this! Just added it to my blog, love it :)

    Briony x
    www.theglasgowfoodblog.blogspot.com

    ReplyDelete
  21. Thank you so much for the code! I have now installed it on my blog and spent several hours copying and pasting the codes and the links to all of my recipes. I really needed this type of index to give the readers an easy way of finding everything in my blog, so this is perfect!

    ReplyDelete
  22. Thanks!!!
    I know people have a hard time finding recipes on my site, & I fail at taking the time to edit pages like I should.
    This should make it easier once I take the time to do it!)

    ReplyDelete
  23. Thanks Mrs M :)

    Your index looks good Briony :)

    I am glad it has been useful Rasmus :)

    Fabulous Jinx, that shouls be well worth it then :)

    ReplyDelete
  24. Thanks so much for this java script. Just starting out on my blogging venture.

    So exciting to be writing about nourishing food, the way it was intended to be enjoyed. Raw milk, full fat butter, cheese and animal fats. You know what, it's actually good for us!

    Natasha

    http://thenourishingroad.blogspot.com/

    ReplyDelete
  25. I started doing this about six months back, could of done with your guide then! Unfortunately life has gotten in the way and never finished it but have it all saved, your post reminds me I need to finish it!

    ReplyDelete
  26. This comment has been removed by a blog administrator.

    ReplyDelete
  27. What a great help! Thank you so much!

    ReplyDelete
    Replies
    1. Good, I am glad it is a help to other bloggers :)

      Delete
  28. What a fantastic tool, and great to learn that I'm not as useless at technology as I thought! Thank-you!

    ReplyDelete
  29. Tried this last night and -WOW!- it is a wonderful enhancement to my blog! Thank you so much! It's much better than digging through the archive to find a recipe.

    http://kimmersinthekitchen.blogspot.com/

    ReplyDelete
    Replies
    1. I am really pleased it was helpful :)

      Delete
  30. A great tool and it worked very well...thanks

    Aaha Oho

    ReplyDelete
  31. This comment has been removed by the author.

    ReplyDelete
  32. Thank you so much for sharing. I have just started a new food blog, so am seriously in the learning curve. I found it so simple and easy to follow.

    ReplyDelete
    Replies
    1. That is brilliant, I am so pleased. Thanks for stopping by to tell me :)

      Delete
  33. Thank you so much Jac - I am so glad I did this now, before I get too many more recipes! You are a treasure!

    ReplyDelete
    Replies
    1. You are right, it is definitely best to do it before you have years worth of recipes. Takes a while :)

      Delete
  34. Thanks for posting. There are a lot of instructions for wordpress but yours is the only one I have found for Blogger. Thanks again, now I can get my wife's recipe blog in order.

    ReplyDelete
    Replies
    1. Good luck with it Roy and Carol. It will make life much easier for your readers :)

      Delete
  35. Thank you for this. It is very helpful.

    ReplyDelete
  36. This will be a lot of work for me, but definitely going to give it a whirl in the near future. Shared with my fans on Facebook as well. Thanks for the great how to.

    ReplyDelete
    Replies
    1. Thanks Stacy, let me know if you need any help :)

      Delete
  37. This comment has been removed by a blog administrator.

    ReplyDelete
  38. Thanks so much! I only have a few recipes on my blog, but I wanted everyone to be able to access them easily... this was just the thing :) You're awesome for sharing! <3 Becky

    http://thoroughlyinearnest.blogspot.com/

    ReplyDelete
  39. Jacqueline, Thank you so much for the help in getting a novice like me to get her recipes indexed. One question, friends are able to view the blog but not able to view my recipe pages themselves without a google account. Do I have something set wrong? Thanks again for all of your help. Janet

    ReplyDelete
    Replies
    1. Hi Janet, I just tried to get over to your blog, but it said the profile is private. If you want people to see your blog, you will need to go into settings and open content to the public. Glad the coding was helpful. Let me know if I can help with anything else.

      Delete
  40. You are so nice to help. Everyone seems to be able to see the blog at hotpeasandbutter.blogspot.com but when a recipe is clicked on in the index it won't let them view it. I created a page for each recipe and added the url. Maybe that's wrong? I checked under my profile and it says it is public. I have blogger envy and will keep trying! Thanks again for your guidance and awesome site!

    ReplyDelete
    Replies
    1. Janet can you email me at tinnedtomatoes@googlemail.com and I will see if I can help.

      Jac
      :)

      Delete
  41. This comment has been removed by a blog administrator.

    ReplyDelete
  42. This comment has been removed by the author.

    ReplyDelete
  43. Jacqueline,
    Thank you so much for posting this. I tried it earlier in the fall, but it didn't work right on the left side of my page like I wanted. I gave it a go again this morning, same thing on the left, so I switched it to the right and it works perfectly.

    You are a gem. I appreciate this!

    Is there something I can add in this code to open the recipe link in a new window?
    I'm off to try and figure that out myself.
    Thanks!

    ReplyDelete
    Replies
    1. So glad it worked for you Kirsten :)

      To open in a new window, add

      target="_blank"

      before the />

      Delete
  44. WOW wow wow! This is great, thank you so much for sharing. I've been trying to find a way of indexing my fast growing canon of recipes and that's my job for this afternoon. Better get the kettle on. Thanks so much x

    ReplyDelete
    Replies
    1. Good stuff, hope you have it all done by now :)

      Delete
  45. very helpful html code.. One more thing, you look beautiful like my mom :) Like your articles !
    Thankyou so much!

    ReplyDelete
  46. only difference is that you have her look when she was 30's or 40's!
    Hope you dot mind. Have a good day!

    ReplyDelete
  47. Thank u thank u thank u soooo much.. It really worked and helped a lot... Cheers :)

    Divya Gattani
    http://divyaszaika.blogspot.in

    ReplyDelete
  48. Thanks very much ..used this and it worked great!

    ReplyDelete
  49. thanks a ton you solved such a big problem thanks

    ReplyDelete
  50. Hi, I am trying to incorporate codes on my blog, but drop down is not working, also what exactly I need to put in url

    ReplyDelete
    Replies
    1. Are you on blogger or wordpress? On blogger you go to design, layout, add a gadget and choose html, then paste the code in I gave you, replacing the url of my recipes with your own. Email me if you need further help.

      Delete
  51. Thankyou for your easy to follow tutorial! I'm not computer savvy, so this was perfect and worked really well. I don't have very many recipes as I'm more a gardening blog, but it wanted to be able to find them easily - and it may inspire me to post more food related posts.

    And lovely that I found your blog, which I've really enjoyed looking through and will follow. Cheers from an Australian vegetarian living in Sweden. We're practically neighbours :-)

    ReplyDelete
    Replies
    1. Thanks for stopping by Marie and I am glad the tutorial helped :)

      Delete
  52. Thank you so much! This just helped me a ton!

    ReplyDelete
    Replies
    1. I'm glad it helped. I've popped across to your blog and it looks great!

      Delete
  53. Thanks,Perfect tutoring & it worked for my blog. Check it out .
    http://www.sailajakitchen.org/

    ReplyDelete

I love reading comments, so thank you for taking the time to leave one. Unfortunately, I'm bombarded with spam, so I've turned on comment moderation. I'll publish your comments as soon as I can and respond to them. Don't panic, they will disappear when you hit publish. Jac x

LinkWithin

Related Posts Plugin for WordPress, Blogger...