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:
- 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!)
- it's succinct.
- it allows you to take control over your index; customize it to reflect the appearance of your blog.
- you benefit from the SEO of having a recipe index fully contained on your blog and not a third-party plugin.
- you don't have to index every label or tag on your blog; you choose what to include and what to ignore.
- you have the flexibility to add or remove tags as often as you wish.
Written by: Anyonita Green
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.
 |
| 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:
 |
| 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 910111213141516171819202122232425262728 | <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 : 'http://3.bp.blogspot.com/-sWtp_qRPNT8/UZYmQq5sAdI/AAAAAAAAEec/7YDbpK4Q6g8/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 >.
12345678 | /* 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.
12345 | <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.
