Search This Blog

Creating a Drop down recipe index

Guest author : Swapna from Swad

Recipe Index

Step 1: Segregating your recipes into categories

1.Create a Word document and save it as "Recipe Index" or whatever you feel like calling it.

2.Make categories according to what kind of dishes you have on your blog. You can make categories such as "Soups & Salads", "Vegetables", "Rice varieties", etc.

3.Open your blog and go through each post.

4.Under each category in your Word document, start adding the dish name about which you have blogged. For example, under Vegetables add "Palak Paneer", "Jalfrezi Paneer", and so on. While doing this, against each dish add the URL of the post.

Step 2: Generating the Recipe Index

I love using drop-down list; they are so handy in finding stuff in a hurry. I generated a drop-down menu for each kind of dish on my blog. Here's how:

1.Go to I will highly recommend this website for generating an index as it's easy to use and provides you with a code that you need to paste in your template code. If you are not happy with this site, you can do a Google search for "Generating a drop-down index".

2.Open the website and read the instructions. Start creating your recipe index.

3.In the "Use GO button" section, select the option "Load selected page immediately". You can also choose to open the page after clicking the Go button or a custom button, but the first option is much faster.

4.In the "Menu Properties" section, fill the menu name such as "Soups & Salads", "Vegetables", etc. Whatever you fill here, will appear as the name of the drop-down on your blog. In the second option, choose the destination of the new page. I have set it as "Same window". If you choose other options, then enter the name of the new window in the "Target Name" text box.

5.In the "Dropdown Menu Entries" section:

a.No action occurs on the first link URL. So, use the first box to enter the name of the category such as "Soups & Salads". This will be shown as the first entry in the drop-down.

b.Open the "Recipe Index" word document created in Step 1. Add the name of your first dish from the category in the second box under "Text Shown". Add the link of the dish adjacent to the name under "Link URL". Continue this till you enter name and links to all dishes under a category.

c.If you want to do make-up to your recipe index, you can do so using the "Use Custom Style" options. You can set the colors, font styles, and font size of the drop-down entries.

d.Click the "Generate" button after you have finished adding all the dishes in a category. The code will be used in step 4 below. Don't close the window.

e.After you have pasted the code for a category on your blog, it's time to generate code for other categories. Click the "Reset" button and repeat steps b, c, and d above. Again, copy- paste the code on your blog.

f.Repeat this till you have covered all categories.

Step 3: Adding the recipe index to your blog

1.Login to your blog. Click "Layout".

2.Click the "Add a Page Element" link.

3.Browse to "HTML/Javascript" and click the "Add to blog" button.

4.Enter the title for your recipe index. I have set mine as "Swad serves you". In the Content section, copy-paste the entire code generated in Step d above. Don't close the window.

5.Repeat steps b, c, and d from Step 2 above to generate codes for other categories.

6.Paste codes for other categories after the first category code ends.

7.After you have covered all categories, click the "Save Changes" button.

8.Drag and drop the control and place it wherever you want in the template. Click "Save".

9.Your recipe index is added to your blog. Check each link to verify if it is working and linking to the correct post.

Adding links to new recipes

Once you have created a recipe index, it's important to keep updating it as and when you add new dishes. To do so:

1.Click "Layout" and then click "Edit" under the index element.

2.Identify the category under which you want to add the new dish. Locate the last entry under this category.

3.Copy the following code of the entry: Idli Manchurian. (Note: This is code from my blog. Your code will contain links to your posts and names of your dishes.) This code is Dish name

4.Paste the code below the last entry. Enter the new link and replace it within the quotes. Enter the new dish name.

5.Click "Save Changes".


Pavithra said...

thank u so much!!this is exactly what i needed!!

n33ma said...

Thanks for sharing this info.

Varunavi said...

Nice info ec,i will try to do this on my blog.One more thing i want to make a new page for the recipes list and link it back to my main page,can u give help me out in that

Sandhya Hariharan said...

Very Useful Info... I highly recommend new bloggers to browse thro this page..

MiniBinoy said...

very useful info!!thanx a lot

Anonymous said...

Thank you very much for sharing this info. This is exactly what I was looking for.

Raksha said...

Thanks a lot EC. This will help

Kalyani said...

hi Suchitra:

I tried this code,but woudnt work fully, esp when you have to have 2 sub sub menus - say , kootu & sambhar under sub menu - curries ... like you have done in your blog.. Can u mail me the process and also the entry code for the same.. many thanks..


Simple Indian food- Feel @ home

Easycrafts Video tour

Related Posts Plugin for WordPress, Blogger...