How to Make a Beautiful Automatically Updating Visual Recipe Index for Food Bloggers

Thursday, June 26, 2014



Easy tutorial for making a beautiful visual recipe index that updates automatically! Every food blogger needs this!
Every time I share a recipe on Anyonita Nibbles, my recipe index updates automatically! The index is driven by the labels or tags that I use on my blog and the code has been written to display the first image in each post and the recipe's title. Not only does this look absolutely amazing, but it's helpful for SEO and for assisting my readers in navigating through the 500+ posts and recipes. Every food blogger can use a recipe index of some kind, whether it's text or visual, requires manual updating or updates itself! 
I'm quite pleased with this index--it was some three months in the making and took lots of tweaking from other similar codes. I knew what I wanted to achieve and I researched to see if someone had already created it. No dice. So I sat down with my nerdy and helpful computer programming husband and we tweaked and tested and arrived at this snazzy recipe index!   
 
Some of the features and benefits of using this automatically updating visual recipe index: 
  1. it automatically updates (Every single time you post, if you remember to choose the appropriate labels or tags, you'll see your posts in the appropriate section of the index!)
  2. it's succinct.
  3. it allows you to take control over your index; customize it to reflect the appearance of your blog.
  4. you benefit from the SEO of having a recipe index fully contained on your blog and not a third-party plugin. 
  5. you don't have to index every label or tag on your blog; you choose what to include and what to ignore.
  6. you have the flexibility to add or remove tags as often as you wish.

How to make a Beautiful Automatically Updating Visual Recipe Index for Food Bloggers

Written by: on

Are you ready to transform your recipe index and make it absolutely beautiful? This process involves a lot of steps, but I promise you, it's worth it! To start things off, you'll need to make sure you have all the components needed to execute this index.

You will need:
  • thumbnail images for each label or tag you wish to use
  • blog posts for each specific label or tag
  • a  blank recipe index page
  • to have your labels or tags organized and each blog post tagged accordingly
Let's get started:

1. Organize your labels or tags into categories that reflect your blog.
I stuck to conventional categories that recipes would be divided into. When necessary, I went a bit more specific. Be sure to choose categories that are broad and that reflect what people commonly search for. You can check out this blog post for help in determining the best way to come up with labels and tags.

2. Create thumbnail images for each label or tag.
Once you know what your tags will be, create individual images for each one. I created my thumbnails, arranged them in alphabetical order in a collage made with PicMonkey and then I used an image map to make each image clickable. Here's a tutorial for how to make each image a link.

Category view of the visual recipe index from Anyonita Nibbles
To see the live version of this image map, visit the recipe index.
 
3. Create an individual blog post for each label or tag.
This option made the most sense to me because Blogger limits the number of pages you can have, plus I didn't want to spend time editing the pages out of my site navigation. If you choose to create a blog post for each label or tag, I'd suggest you back date it to one month before your first blog post. This way, you won't have to worry about people stumbling across these blog posts, but still have the organization and the benefit of the visual recipe index. If you don't want these posts to show up on your recipe index, do not put any labels or tags on them.

These are the posts that your category images from your recipe index will link to. For example, on my recipe index, the category "Desserts" links to a blog post called "Desserts" which displays every recipe on my blog with the label or tag of "desserts".  Here's how it looks:

Category view of the visual recipe index. Every food blogger needs this recipe index!
This is how the category posts will look when you've implemented the code. View the desserts post live by going here.

4. Add this bit of code to your blog's HTML template.
In Blogger, go to Template >> Edit HTML. Be sure to back up your template before you begin! Then, copy and paste this code just before the < / head > section of your template.


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<script>
// Automatically Updating Visual Recipe Index by http://anyonita-nibbles.co.uk
// Tutorial at http://anyonita-nibbles.co.uk/2014/06/make-automatic-visual-recipe-index.html
// Free to use or share, but please keep this notice intact.
//<![CDATA[
function tb911rpGallery(root) {
var entries = root.feed.entry || [];
var html = ['<div class="tb911rp-gallery nopin" title="Get this from anyonita-nibbles.co.uk">'];
for (var i = 0; i < entries.length; ++i) {
var post = entries[i];
var postTitle = post.title.$t;
var orgImgUrl = post.media$thumbnail ? post.media$thumbnail.url : 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiluBQqxAAiB8vixrDbjByjBDhqEEM8tP-z707wfT-zTVk2EQi7R5IZUifSjAnz669c2m_dAH-q5709opPHsoBLoSVdqgYKXJ1VqZMtMuDtg4pCidE5zW_yJvJQ6TvEEclOwXAPcq_a-QLP/s72-c/default+image.png';
var newImgUrl = orgImgUrl.replace('s72-c', 's' + tb911rpg_thumbSize + '-c');
var links = post.link || [];
for (var j = 0; j < links.length; ++j) {
if (links[j].rel == 'alternate') break;
}
var postUrl = links[j].href;
var imgTag = '<img src="' + newImgUrl + '" width="' + tb911rpg_thumbSize + '" height="' + tb911rpg_thumbSize + '"/>';
var pTitle = tb911rpg_showTitle ? '<span class="ptitle">' + postTitle + '</span>' : '';
var item = '<a href="' + postUrl + '" target="_blank" title="' + postTitle + '">' + imgTag + pTitle + '</a>';
html.push('<div class="tb911-item">', item, '</div>');
}
html.push('</div>');
document.write(html.join(""));
}
//]]>
</script>

5. Add this CSS to your CSS editor.
In Blogger, go to Template >> Customize >> Advanced >> CSS. Then copy and paste this before < / b:skin >.

1
2
3
4
5
6
7
8
/* www.anyonita-nibbles.co.uk Automatically Updating Visual Recipe Index CSS Start */
.tb911rp-gallery {padding:10px; clear:both;}
.tb911rp-gallery:after {content: "";display: table;clear: both;}
.tb911rp-gallery .tb911-item a {position: relative;float:left;margin: 0 15px 15px 0 !important;text-decoration:none;}
.tb911rp-gallery .tb911-item .ptitle {background: rgba(0, 0, 0, 0.5); background: #7f7f7f\9; display: block; clear: left; font-size: 11px; line-height:1.3em; height: 2.6em; position: absolute; text-align: left; bottom: 10%; color:#fff; padding:2px 5px; word-wrap: break-word; overflow:hidden;}
.tb911rp-gallery a img {background: #eee; float: left; padding: 5px; box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); -moz-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); transition: background-color 0.4s; -webkit-transition: background-color 0.4s; -moz-transition: background-color 0.4s;}
.tb911rp-gallery a:hover img {background: #ee7e22;}
/* www.anyonita-nibbles.co.uk Automatically Updating Visual Recipe Index CSS End */

6. Add this script to each label or tag's individual blog posts.
You will need to alter the code slightly for each label or tag.

1
2
3
4
5
<script>
var tb911rpg_thumbSize = 150;
var tb911rpg_showTitle = true;
</script>
<script src="/feeds/posts/summary/-/YOUR LABEL OR TAG?max-results=NUMBER OF POSTS&alt=json-in-script&callback=tb911rpGallery"></script>

Change "Your Label or Tag" to reflect the name of your label or tag.
Change "Number of Posts" to reflect the number of posts you'd like displayed. I usually change this number to 500 so that it displays all the posts.
Remember, you will need to copy and paste and change this script for each label or tag.

Further customizations:
Change the thumbSize field to reflect the size you would like your thumbnails to be. Images are in pixels.
If you do not want to show the title of the recipe, change "true" in line 3 to "false".

And that's it! You'll have a brand spanking new, beautiful visual recipe index!  

Don't have time to do it yourself? I provide a visual recipe index creation for $45 / £30! I'll do all the work for you: from creating images for your thumbnails to implementing the codes. All you have to do is make sure each blog post has the right labels or tags! Shoot me an email to munchies [at] anyonita-nibbles [dot] com to get started!

Please share this tutorial if you found it helpful! If you use this tutorial to pimp out your recipe index, feel free to come back and leave a comment linking me to your page! I'd love to take a peek! If you've got any questions, also leave a comment & I'll do my best to answer each one.

37 comments:

  1. Another great tutorial Anyonita and well done for working it out. Sounds a bit scary, but one day if and when I've caught up with my backlog, I think I will give it a try.

    ReplyDelete
  2. I love this tutorial! The visual is so much better when searching through recipes. Something to put on my blog to do list! Thanks!

    ReplyDelete
  3. Thanks for your hard work with this post, I can't wait to see if I can implement it on my site! Excellent resource here!

    ReplyDelete
  4. This is terrific Anyonita, you are so awesome to share this coding. I know how time consuming coding is and I definitely appreciate your efforts and generosity. Thanks so much!

    Joanne/WineLadyCooks

    ReplyDelete
  5. Wow, this is such an incredibly useful post, Anyonita! I've been wanting to do something like this for awhile. Thank you for doing all the hard work and providing the instructions for us! :)

    ReplyDelete
  6. I love this! Thank you so much for sharing!
    Thanks for sharing at The Weekend Social, I'm looking forward to seeing you again next Thursday at 9pm EST at www.thequestionablehomesteader.com for another installment of The Weekend Social.

    ReplyDelete
  7. Great post love:)
    Would you mind checking out my blog?

    ReplyDelete
  8. I think I've said it before but I love your blogging tips. I keep a blog stuff board on pinterest and it has many of your tips on it. I've even gone through and implemented some of them. This is definitely going on the list.

    ReplyDelete
  9. Thats awesome. Yours is the easiest tutorial I have seen so far.

    ReplyDelete
  10. Wow, this is awesome! I've been looking for this for months and almost ready to hire a designer to do this for me. The code looks scary but I'll give it a try. Thanks for sharing!

    ReplyDelete
  11. Great tutorial I would like to add to my blog. Thanks for sharing with Hearth and Soul blog hop.

    ReplyDelete
  12. Very cool. Wish it was for wordpress! Thanks for linking up at Tips and Tricks

    ReplyDelete
  13. Brilliant! Takes a while, but I've made numerous attempts with different tutorials and all have failed. Yours is simple and truly works! Thanks so much.

    www.sophielovesfood.com

    ReplyDelete
  14. thank you so much for the tutorial! By far the best and most simple to understand! I'm thrilled with my results!

    http://www.bakertanz.com/p/blog-page.html

    thank you again! :)

    ReplyDelete
  15. This comment has been removed by the author.

    ReplyDelete
  16. Thank you so much Anyonita. I am so happy with my recipe index (http://www.spicecounter.com/p/recipe-index.html). It is by far the easiest tutorial that ive seen on making a visual recipe index.

    ReplyDelete
  17. Hi Anyonita, I love this recipe index! However, once I put the code into my blogs HTML template, the link to my 'Recipes' page doesn't work :(
    Can you help please?!?

    ReplyDelete
  18. Hi Anyonita,
    Sorry for the trouble. But i have one query. The recipe index does not work on mobile phones. Ive tried checking my site ( http://www.spicecounter.com/p/recipe-index.html). Can you tell me what has caused this glitch?

    ReplyDelete
  19. Hi Anyonita! I've been following this tutorial and it's really great, I'm pleased to have found your blog! I'm having a few problems, being very novice at html and all this stuff. Do you have an email address I could fire a few cheeky questions at you on?

    Thanks!
    Alex

    ReplyDelete
  20. Hello! I just came across this tutorial and I absolutely love it! I just wanted to know if there was a way to list the posts alphabetically? I have read the code and I'm not the best at it, I just don't want to mess it up!!
    I played with it on just one category so far, and love it! Thank you!

    ReplyDelete
  21. Anyonita this tutorial ROCKS! Seriously thank you, I just redid my recipe index page and your instructions were perfect! THANK YOU! :)

    ReplyDelete
  22. YOU are a freaking genius! I've tried multiple different codes and blog tutorials to try and do this and yours is the only one that worked! thank you!!!! still working on getting all my recipes labeled to show up but I'm on my way! Thank you!

    ReplyDelete
  23. Is this the same coding that you used for your blogging tips page? I've been looking for coding that does this for my pages.

    ReplyDelete
  24. This absolutely works, but it lists my recipes in a vertical list, not in a grid. Is there anything I can do to make them show up in a grid?

    ReplyDelete
  25. Nevermind! I missed a step! This is amazing; thank you so much!

    ReplyDelete
    Replies
    1. I am also facing the same problem. I would really appreciate if you can spell out why it is displaying in a vertical list and not in a grid format. I have tested in a few categories and is still work in progress.
      (http://tamalapaku.blogspot.com/p/mouthwatering-recipes.html)

      Delete
  26. Ok, this is totally awesome! I wish I was techy enough to do it. Maybe in bits and pieces...

    ReplyDelete
  27. Hi Anyonita. I'm having trouble with number 5. You mentioned to copy and paste the code before in Customize, Advance, CSS, but my question is where do I find in 'Add CSS'? I found it in Edit HTML, instead. Please let me know. I love this tutorial and will gladly link up to this post once I have my index page up and running. Thanks in advance for your help!

    Rosa
    www.fortheloveofitaliancooking.com

    ReplyDelete
  28. Hi Anyonita! I kept working with the code and got it to work. Thanks for sharing this wonderful tutorial!!

    Rosa
    www.fortheloveofitaliancooking.com

    ReplyDelete
  29. Dear Antonia, thanks for all work and sharing with us. My recipe gallery looks amaizing thanks to you. ♥

    Natasha
    www.coolinarija.blogspot.rs

    ReplyDelete
  30. I have followed all of the steps and labeled one blog post to see if it would work before I did all of my posts. However it did not work. Not sure how to fix. Can you provide any help? One thing I noticed, when I added the code to the css page there was nothing else on it. The code you provided was the only thing.

    Thank You,
    Laura
    www.savorysweetandstisfying.blogspot.com
    savorysweetandsatisfying@gmail.com

    ReplyDelete
  31. Thank you so much for sharing this code! I used to have a recipe index on my Blogger blog but it stopped working when Google Drive (where I had the script files stored) changed the formatting of their links. Your code was easy to install and customize, and it works perfectly. Thank you! :)

    ReplyDelete
  32. Thank you so much for sharing this tutorial! I am the LEAST tech savvy person out there and it worked great for me. However, I recently had my blog template crash so I had to go through most of the steps again to set this up only this time the recipes are not being displayed in a grid format, but rather a list. Any idea how I can fix this? Thank you so much!

    ReplyDelete
    Replies
    1. Hi Monica,
      Sorry to hear you're having trouble--did you manage to get it sorted?

      Delete

What do you think of this recipe? Be sure to tag me in any recipes you make on social media and use #anyonitanibbles!