

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
nice useful post
ReplyDeleteAarthi
http://yummytummy-aarthi.blogspot.com/
Good information.
ReplyDeleteThanks Aarthi and Hoodia :)
ReplyDeleteJacqueline, thanks to you sharing this with me a couple of years ago I've had it working well for me ever since!
ReplyDeleteI am glad it has helped you Sylvie :)
ReplyDeleteThanks 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!
ReplyDeleteKaren
XXXXXXXXXXXX
That's great Karen, I hope everyone gets a chance to use the code.
ReplyDeleteJust posted it to my FB page too! Sharing the Blog Love! XX
ReplyDeleteThanks Karen :)
ReplyDeleteOh,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!
ReplyDeleteIt really is easy Lisa. Just copy and paste the code, adding your own recipes and links.
ReplyDeleteYou are amazing! Been wanting to add an index to my blog and you've made it look so easy :)
ReplyDeleteGonna put it tonight, can't wait.
Thanks again xxx
Thanks! I've been planning on doing this for ages, you made it easy!
ReplyDeleteAww that's brill Nish :)
ReplyDeleteDo it now before baby arrives Nic, although I got loads of blogging done while I was breastfeeding. One handed typing.
This is excellent! Hopefully I can get this done over the weekend, as my recipes are getting quite clogged up now! Thanks :)
ReplyDeleteThanks so much. Once I'd done the first couple it was pretty straightforward.
ReplyDeleteTotally agree - its great to share knowledge!
laura xx
No probs :)
ReplyDeleteIt's looking good Laura :)
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
ReplyDeleteThanks for sharing this - I need to seriously consider using it
ReplyDeleteYou have to choose the one you are happy with Johanna :)
ReplyDeleteI hope you do CC, I often trawl your archive :)
Really helpful, thanks! Am going to try this on my own blog and will of course credit you.
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteThanks so much for this! Just added it to my blog, love it :)
ReplyDeleteBriony x
www.theglasgowfoodblog.blogspot.com
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!
ReplyDeleteThanks!!!
ReplyDeleteI 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!)
Thanks Mrs M :)
ReplyDeleteYour index looks good Briony :)
I am glad it has been useful Rasmus :)
Fabulous Jinx, that shouls be well worth it then :)
Thanks so much for this java script. Just starting out on my blogging venture.
ReplyDeleteSo 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/
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!
ReplyDeleteThis comment has been removed by a blog administrator.
ReplyDeleteWhat a great help! Thank you so much!
ReplyDeleteGood, I am glad it is a help to other bloggers :)
DeleteWhat a fantastic tool, and great to learn that I'm not as useless at technology as I thought! Thank-you!
ReplyDeleteI am glad it has helped Amber :)
DeleteTried 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.
ReplyDeletehttp://kimmersinthekitchen.blogspot.com/
I am really pleased it was helpful :)
DeleteA great tool and it worked very well...thanks
ReplyDeleteAaha Oho
Glad it worked for you :)
DeleteThis comment has been removed by the author.
ReplyDeleteThank 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.
ReplyDeleteThat is brilliant, I am so pleased. Thanks for stopping by to tell me :)
DeleteThank you so much Jac - I am so glad I did this now, before I get too many more recipes! You are a treasure!
ReplyDeleteYou are right, it is definitely best to do it before you have years worth of recipes. Takes a while :)
DeleteThanks 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.
ReplyDeleteGood luck with it Roy and Carol. It will make life much easier for your readers :)
DeleteThank you for this. It is very helpful.
ReplyDeleteNo probs Joey :)
DeleteThis 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.
ReplyDeleteThanks Stacy, let me know if you need any help :)
DeleteThis comment has been removed by a blog administrator.
ReplyDeleteThanks 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
ReplyDeletehttp://thoroughlyinearnest.blogspot.com/
Glad it was helpful Becky :)
DeleteJacqueline, 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
ReplyDeleteHi 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.
DeleteYou 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!
ReplyDeleteJanet can you email me at tinnedtomatoes@googlemail.com and I will see if I can help.
DeleteJac
:)
This comment has been removed by a blog administrator.
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteJacqueline,
ReplyDeleteThank 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!
So glad it worked for you Kirsten :)
DeleteTo open in a new window, add
target="_blank"
before the />
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
ReplyDeleteGood stuff, hope you have it all done by now :)
Deletevery helpful html code.. One more thing, you look beautiful like my mom :) Like your articles !
ReplyDeleteThankyou so much!
Thanks Teena :)
Deleteonly difference is that you have her look when she was 30's or 40's!
ReplyDeleteHope you dot mind. Have a good day!
Thank u thank u thank u soooo much.. It really worked and helped a lot... Cheers :)
ReplyDeleteDivya Gattani
http://divyaszaika.blogspot.in
Great, glad to help :)
DeleteThanks very much ..used this and it worked great!
ReplyDeleteBrill :)
Deletethanks a ton you solved such a big problem thanks
ReplyDeleteSo glad to help :)
DeleteHi, I am trying to incorporate codes on my blog, but drop down is not working, also what exactly I need to put in url
ReplyDeleteAre 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.
DeleteThankyou 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.
ReplyDeleteAnd 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 :-)
Thanks for stopping by Marie and I am glad the tutorial helped :)
DeleteThank you so much! This just helped me a ton!
ReplyDeleteI'm glad it helped. I've popped across to your blog and it looks great!
DeleteThanks,Perfect tutoring & it worked for my blog. Check it out .
ReplyDeletehttp://www.sailajakitchen.org/
Worked brilliant thank you!
ReplyDeleteJacqueline thank you so much for the above tutorial and post. It's a very useful and well explained post. By following your instructions I have been able to add a recipe index to my blog. Once again thank you so much.
ReplyDeleteSorry, no I don't. Best to google it.
DeleteDo you have tutorial on adding a scrolling photo banner i mean HTML code? i WANT TO ADD ONE TO MY WEBSITE
ReplyDelete