Affiliate Links Notice

This website uses affiliate links as a means of generating revenue.

However, we do not recommend products and services that we believe will not be of interest to you.

We make it a point to recommend products and services that we like, and express our honest opinions about them regardless of an affiliate relationship with the products, goods, and services being recommended.

Balkeni Studio is a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for sites to earn advertising fees by advertising and linking to, Inc or its affiliates.

To know more about the use of affiliate links on this website please read our terms and conditions.

How To Make An Auto-Updating Recipe Index For Your Blogger Blog

Published on: Tuesday, 24 November 2020 ✦ Updated on: 2020-11-26T07:23:59Z

Auto updating recipe index for blogger DIY

 In today's blog post, I want to show you how to set-up an auto-updating recipe index for your food blog on blogger. This has been one of the most requested tutorials of all time.

I can understand this, it is actually a very good practice to put your users (readers/audience) first, and with Google changing its algorithm ever so often it's even more apparent that the future of SEO is much more reliant on good design and user experience. 

What does this mean for you as a blogger? It means, you want to make it extremely easy for your readers to find content that they are looking for on your website easy and confusion-free.

One of the best ways to put years worth of content in front of your audience is through putting it up in a category that updates automatically as and when you publish a post. This is exactly what I'm showing you how to do in this post. 

Here are some of the requirements of this tutorial:

  • You'll need a blogger theme that has a gallery page layout enabled on label pages or a theme can be easily customised to have gallery pages on label pages.
  • You'll need to have all your blog posts sorted into the labels you want

How to get a gallery enabled blogger theme

One of the simplest ways to do this would be to buy a theme (usually not that expensive).  I recommend this theme from my shop, or this one to completely forego having to go through this tutorial (Cookin' Daily is a responsive blogger theme which comes with a built in-recipe index and it updates automatically and the best part is the free installation that I offer with all my themes along with lifetime support for theme related issues).

If you don't have the budget for a blogger theme, I'll show you how to use a free theme from blogger to do so as well. Of course, I recommend upgrading to a premium theme whenever you can because of the added features and customisability. 

TIP : If you intend to blog seriously and to make it a full-time or part-time income maker in your life, I do definitely recommend investing in your blog by having a functional and beautiful design and brand.

Let's get into it.

INFO : You need to have labels in your posts for this method to work!

how to make and auto updating recipe index on your blogger blogs

Step 01: Grab the HTML

First, you will need to copy and save this HTML somewhere you won't lose it. I prefer using Trello or Evernote. But you can use whatever you like.

<div class="recipe-index">
<a href="THE LINK TO YOUR BLOGGER LABEL" target="_blank">
    <img alt="ALT TAG FOR YOUR IMG" height="400" src="LINK TO YOUR IMAGE" width="600" />
  <br />
<div class="desc">

Step 02: Install the CSS in your blogger theme

Now that you have saved the HTML for use, you will need to add the CSS to your blogger theme. To do this:

  • Go to Theme > Customise > Advanced > Add CSS

Then you will copy the following code:

/* Recipe Index Code by Balkeni Studio -------------------------------------- */ div.recipe-index { margin: 5px; border: 1px solid pink; float: left; width: 48.8%; } div.recipe-index:hover { border: 1px solid #777; } div.recipe-index img:hover { opacity: 0.5; } div.recipe-index img { width: 100%; height: auto; max-height: 400px; object-fit:cover; } .desc { padding: 15px; text-align: center; } .post-body img, .post-body a img, .post-thumb img, .post-thumb a img { margin:0; } @media screen and (max-width: 1216px) { div.recipe-index { margin: 5px; border: 1px solid pink; float: left; width: 100%; display: block; margin: 0 auto; margin-top: 10px; } div.recipe-index img { width: 100%; height: auto; max-height: none; } } /* END - DO NOT REMOVE THESE CREDITS! -------------------------------------- */

Now that you have copied the code paste it in the Add CSS section then click Save.

You are now ready to set-up your Recipe Index page.

Step 03. Make A Recipe Index Page

The next step is to make a page in your blogger blog and call it "Recipe Index".  You will then go to the HTML section of your blog and paste the HTML you saved in the first step. 

Note: You will paste this same code in this page according to the number of categories you have. So, if you have 6 categories, you will paste this code in 6 times.

Step 04: Adding in your content

It is already mentioned in the HTML you copied how to customise the contents of your gallery, but for your ease of use, I'll mention it here as well.

  • THE LINK TO YOUR BLOGGER LABEL: This is the link to the label of the category you want to use. To grab the link of your label, just view a post with the label you want, then click on that label, once that page loads, just copy the link from the address bar.
  • THE ALT TAG FOR YOUR IMAGE: This is purely for SEO purposes and for people with disabilities like visual impairment when they read your website. You will write the name your image describing what it is here. For example, apple pie.
  • THE LINK TO YOUR IMAGE: You should have your image for the category uploaded in the media for your blog, just right-click the image you want to use and grab the link of the image and paste it in this section.
  • NAME OF THE CATEGORY: You will add the name of your category here.

And that's it. You're done! Now, this page will automatically enable people clicking on the categories to be taken to your most recent posts in that category, and it will keep itself updated. 

Easy, right?

P.S. wanna forego all this hassle? I've got just the product for you! 

I hope you liked this tutorial! If you have any questions about this tutorial or a step confuses you, feel free to leave a comment below for help. 

However, please do not attach your blog links in the comment, If I'll need a link to your blog I'll reply with further instructions to get in touch with me. Comments with links will not be published and will end up in the spam!

If you've enjoyed this tutorial, please support my work by donating using the buy me a coffee option (you can even use the coffee icon at the bottom-right of your screen!), it really helps me write more tutorials. Writing blog post takes a lot of time and effort as many of you may already know, and I want to be able to keep the blog alive and free for all of you. 

A small donation really helps me stay motivated and be compensated for the time, energy and effort I put into my work. As always, thank you so much for your support! Wondering why donate? Read about my mission here.

Alternatively, you can even help me spread the word by sharing this blog post with your followers!

If you've got any other tutorial or blog post in mind that you'd like to read about, make sure to send in a request here. I'd love to write for you!

You can even sign up follow my blog by adding it to your reading list or signing up to receive blog posts directly in your inbox.

If there's anything else, I hope you let me know in the comments down below. It's always lovely to hear from you all! and if you'd like more support feel free to join the community for bloggers on blogger (FB group) and the new bloggers (FB group) run by me to help you with all you blogging and blogger woes!

Post a Comment