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



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

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.

    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.

    How to Make a Beautiful Automatically Updating Visual Recipe Index for Food Bloggers (2)
    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:

    How to Make a Beautiful Automatically Updating Visual Recipe Index for Food Bloggers (3)
    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 : '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 >.


    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.

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

    FAQs

    How to stand out as a food blogger? ›

    You'll be more likely to develop a successful food blog if you follow these guidelines.
    1. Be authentic. ...
    2. Don't give up. ...
    3. Post original content. ...
    4. Show your personality! ...
    5. Make friends and help each other. ...
    6. Make yourself accessible. ...
    7. Keep your site design clean and easy to navigate. ...
    8. Make it easy for visitors to follow your blog.

    What is the best platform for recipe blog? ›

    Now let's get into our top picks and help you choose the best website builder for your food blog.
    1. WordPress.org: Best website builder for food blogs.
    2. Wix: Best website builder for beginners.
    3. Shopify: Best website builder for food bloggers who sell.
    4. Hostinger: Best website builder using AI.
    Mar 6, 2024

    How to write an attractive food blog? ›

    In this blog post, we will explore 11 techniques for writing compelling food blog content that will help you build a successful and thriving blog.
    1. Technique #1: Develop a Unique Voice. ...
    2. Technique #2: Use High-Quality Images. ...
    3. Technique #3: Tell a Story. ...
    4. Technique #4: Provide Recipes. ...
    5. Technique #5: Share Personal Experiences.
    Apr 19, 2024

    How to come up with recipes for food blog? ›

    Many recipe developers find ideas:
    1. In cookbooks or magazines.
    2. Through recipes on other food blogs.
    3. From family recipes.
    4. At local restaurants or bakeries.
    5. While traveling.
    6. From new ingredients or seasonal produce at a farmers market.
    7. On Pinterest.
    8. While watching cooking shows.
    Jun 9, 2022

    How to increase food blog traffic? ›

    SEO for Food Bloggers [10 Tips to Boost Site Traffic!]
    1. Do keyword research.
    2. Use long-tail keywords.
    3. Build recipe clusters.
    4. Include keywords throughout post.
    5. Use a plugin.
    6. Optimize images and videos.
    7. Internally link between content.
    8. Use Google Search Console & Google Analytics.
    Oct 31, 2023

    What are the most successful food blogs? ›

    The Recipe Critic is reputed as one of the world's best food blogs.
    • Food52. Food52 is one of the world's leading food magazines. ...
    • Minimalist Baker. ...
    • Serious Eats. ...
    • Deliciously Ella. ...
    • Cookie and Kate. ...
    • Balanced Bites. ...
    • The Kitchn. ...
    • Smitten Kitchen.
    Dec 21, 2023

    How can we make our blog most attractive? ›

    Tips To Make Your Blog More Appealing
    1. Focus Your Topic. Image via Unsplash by @glenncarstenpeters. ...
    2. Use Headers. When you have a lot of text on your blog it is very easy for readers to get overwhelmed and give up. ...
    3. Develop a Content Flow. ...
    4. Create List Posts. ...
    5. Use Images. ...
    6. Improve SEO. ...
    7. Use Attractive Headlines. ...
    8. Find Your Voice.
    Oct 19, 2023

    What makes a great food blog? ›

    9 Best Practices for Successful Food Blogging
    1. Be authentic. If you are posting recipes, post your own. ...
    2. Post regularly. Your readers should know when (day as well as time) to expect your blog post. ...
    3. Be patient. ...
    4. Be yourself. ...
    5. Be responsive. ...
    6. Be courteous. ...
    7. Be creative. ...
    8. Be user-friendly.
    May 8, 2024

    How many recipes should a food blog have? ›

    Before you launch your blog, you should have about one month's worth of content ready to go. Even your earliest visitors should have plenty to explore. If you plan to post two recipes per week, at launch, your blog should feature at least eight recipes.

    Can you make money from a recipe blog? ›

    Food bloggers' income varies depending on audience size, partnerships, and how many revenue streams they use. The average annual income for food bloggers ranges broadly, from $35,000 to $125,500 per year, according to the latest data. But that's just an average.

    What makes a good food blogger? ›

    Pro food vloggers don't record their videos off the cuff. They know exactly what they want to say and shoot before the camera starts rolling. They might even practice their scripts and camera angles for days beforehand.

    How do I become a successful food vlogger? ›

    Alongside vlogging tips, we'll also discuss the benefits of complementing your video content with a blog.
    1. Pick the perfect gear for your culinary vlog success. ...
    2. Work those angles. ...
    3. Quality over quantity. ...
    4. Creating a unique brand identity for your food channel. ...
    5. Planning your shoot. ...
    6. Follow trends.
    Mar 7, 2024

    How do you attract food bloggers? ›

    Reach Out
    1. Don't ever send a press release to a food blogger. ...
    2. Address the blogger by name – no generic greetings.
    3. Start with the soft sell. ...
    4. Tell them why you reached out to them. ...
    5. Show your personality and send the email yourself. ...
    6. Discuss ways you could mutually benefit one another.

    How do you stand out as a blogger? ›

    Inside This Article
    1. Understanding Your Audience.
    2. Creating High-Quality Content.
    3. Optimizing for Search Engines.
    4. Designing an Engaging Blog.
    5. Interacting with Your Community.
    6. Collaborating for More Reach.
    7. Enhancing Your Blog's Brand.
    8. Utilizing Additional Marketing Strategies.

    References

    Top Articles
    Latest Posts
    Article information

    Author: Neely Ledner

    Last Updated:

    Views: 5812

    Rating: 4.1 / 5 (62 voted)

    Reviews: 93% of readers found this page helpful

    Author information

    Name: Neely Ledner

    Birthday: 1998-06-09

    Address: 443 Barrows Terrace, New Jodyberg, CO 57462-5329

    Phone: +2433516856029

    Job: Central Legal Facilitator

    Hobby: Backpacking, Jogging, Magic, Driving, Macrame, Embroidery, Foraging

    Introduction: My name is Neely Ledner, I am a bright, determined, beautiful, adventurous, adventurous, spotless, calm person who loves writing and wants to share my knowledge and understanding with you.