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.

Tweet


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