My New Recipe Index

When I had my blog redesigned I wanted a recipe index.
I contacted a few designers to get some quotes and I was told that a recipe index like I wanted would cost anywhere from $1000-$2500.

Say what???

So what's a girl to do??

Make her own!!!!

This is a quick and easy tutorial for a recipe index for someone with no computer/web design experience at all.
I'm sure that there are many ways that you can make a recipe index and maybe someone else has made one that is much easier and better, but this one works pretty well for me.

Here is what mine looks like and how you navigate it--

First, choose "recipe index"


It will take you to the recipe index page


Next, the index is broken down into categories


Lastly, choose the recipe you want.  
Each is represented with a picture of that recipe.



Once you choose your recipe it will take you to the page with that recipe.

So there you have it -- a simple and easy recipe index.

Hopefully, I will be ambitious one rainy day and will be expanding my categories to include kinds of food and by ingredient, but for now it is very simply categorized.
The beauty of this index is that you can make it however you want.

This index was pretty simple to build.
Here is how I did it.
First, you need a site to set up your food index on that is separate from blogger.
The reason for this is that you need more pages than blogger will give you.
I used a site called Weebly, but you can use any site that you like.

I chose Weebly because it is very user-friendly and free (the best part).
The site offers tons of free page designs and the parts are all drag and drop.

Next, I connected the site with the recipe index tab on my home screen.
This part was a little tricky.


Fist, go to blogger and open your layout, then choose edit on HTML/Java Script.


Mine looks like this--
 <li class="first"><a href="http://www.yoursite.yourhost.com">recipe index</a>
     </li>


I basically used what my web designer used to connect my other pages to the tabs and copied it.

I'm sure that you could add it to your side bar with a picture or text link with the same sort of code.


***Please remember that I have no web design experience and cannot help you if you mess up something on your site--
please save everything before changing any code so that you don't mess up your blog!!***

Hope this tutorial is easy to understand and helps you to build a simple recipe index without breaking the bank!!

1 comment:

  1. Ha! You're braver than I, messin' with the codes. LOL I'm so computer illiterate, it's a wonder I can figure out how to load pictures into posts every day. :o)
    That being said, I'd love to have an index as well, so I may just have to pop on over and check out the site you mentioned "in person".

    ReplyDelete

Pin It button on image hover