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 http://www.ricocheting.com/js/drop.html. 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".

I love your blog award

Parita of Parita's World and Dharani of In my kitchen shared this awards with me..Thanks a lot

How to give link to a post

Links are very important when it comes to participating in events, referring someone's blog or referring to a recipe that is already posted on your blog.

The main requirement for providing a link is the address..Go to the page which you want to link to..It could be your recipe or an event announcement or any other page you want to link to. Click once or highlight the address in the address bar..see picture to know which is the address bar.Now click on "ctrl" and "c" simultaneously on the keyboard or right click on the address bar after highlighting the address and click on copy option.


Go the post where you want the link to appear. If you are referring someone's blog, name the person or blog in the post. If it is for an event, mention the name of the event and the hostname in the post and if it is for a recipe on your blog, type down the name of the recipe. Now highlight the person name/blog name/event name/recipe name whichever applicable.


Click on the link button-see picture. A new window will pop up as below. Click on the white box and then click "ctrl" and "v" together to get the address copied at that place. You can even right click at the white box and click on paste option. Click on "ok".



Now you can see that the words which you highlighted in your post would have a different font colour and underlined indicating that the link is added.


Go to the preview option and to check if it is working properly, move your mouse over those words that are underlined after providing link. Just above the start button on your monitor you will see the address to which those words link to. Alternatively you can right click on those words and click on the option to open a new window. The new window would be the page you linked to.


Come back to your post and publish or save your post.

Writing and publishing an article

Login to blogger, click on "New Post" option and you will arrive at this window. There are many features here and each one is explained in the picture as well. Click on the picture to enlarge it.



Every post will have a seperate address and it always ends with the title you have given to the post. So, if you are writing a recipe, it would be ideal to type in the recipe name first in the title bar.

Next type in the recipe in space alloted for it. Keep a check on paragraphs and punctuations. Adding a photo is always advisable as it makes the post more attractive. Click on the "Add Image" button and a new window will pop up. Click on the browse button if the photo is saved in your computer and then go to that location, click ok and then upload image. Click on "done" and the image will appear in the post. The new window that pops up when clicked on "Add image" allows you to decide which side the picture should appear and in which size it should be displayed.



Edit the post using the buttons in the bar below the title. You can change the font style, font size, make it bold or italic, change font colour, give links, align the text as required, give bullets or numbers and more..click on the first picture to enlarge and see what changes can be made.

An important feature in blogger is to type in various language using the last option in the bar below title.

Use "Check spelling" option before you are ready to post to eliminate any spelling errors.

Come down to the labels bar and type in words that would help you in grouping similar contents together. Once you have a set of labels for your posts, you can click on "show all" button to see all the labels and then choose whichever is applicable to the post.

Blogger has another interesting feature wherein you can decide when you want the post to appear on the blog. If you dont change any setting with regards to time and date and click on publish post, the article would be published immediately. If you click on "save now" option, it will be saved as a draft and unless you click on publish post option, it wont be published. To change the date and time of publishing the post, click on the "post options" and change the details there. Remember that after changing the date and time, you need to click on publish post to get the article published on that date. After changing date and time, if you click on save now, it wont be published at the said date.

The preview option shows how the post will appear on the blog so that you can make any changes if required before it gets published.

After publishing the post, you can edit it any time by using the "edit posts" option. The entire list of all the posts published, scheduled and in drafts will appear and you can click on the edit option next to the post which needs changes. "View" option is available only to posts that are already published and clicking on it will change the page to the blog where the post appears.

All the best, go ahead and publish your first post on the blog.

How to create a blog

Please click on the pictures to enlarge and read.

The first post in this series of articles to help new bloggers is about creating a blog. The basic requirement for a starting a blog is a gmail id. In case you dont have one, go to www.gmail.com and open one. Next go to www.blogger.com.

The following screen comes up

Click on the picture to enlarge it and for more details. The next screen would be

Once you name your blog and click on continue you will be asked to select the design for your blog as in the picture below

And then the final window that confirms the creation of your blog as below

On clicking the "Continue" option you will be taken to the page that lets you create a new post.



b) If you have already created a blog and have logged in using your gmail id and password, this will be the screen that appears



The next article on this series would be on creating a new post, editing it and publishing it on the blog.

If you find any mistakes in this article, please let me know at easycrafts@gmail.com

If you are coming to blogger for the first time and dont have a blog, click on the Create a blog option. If you already have created a blog, enter your gmail username and password and continue.

a) For first time users-

This is the screen that will pop up when you click on create a blog option.