How To Create An Automatically Updating Visual Recipe Index On Blogger

121 Comments

This post may contain affiliate links. Please read my disclosure policy.

Barefeet In The Kitchen transitioned from Blogger to WordPress in 2016. This post remains as a tutorial for those who need it and are tech savvy enough to figure things out on their own. Unfortunately, we can no longer answer questions regarding the Blogger indexing features.

Each time I post a new recipe here on the blog, the Recipe Index updates
automatically. My husband Sean wrote the code for the automatically updating index and it has
already made my life so much easier. I’ve had numerous questions from other bloggers regarding how we created our index and I’m happy to be able to share the code with you today. (If you are here for the recipes, please feel free to browse the RECIPE INDEX for inspiration!)

Save The Recipe

Want to save this recipe?

Enter your email and I’ll send this recipe right to your inbox! Plus, I’ll send you new recipes every week!

A close up of a sign

The first thing to do is create a new page (the Recipe Index) for your blog. Click here if you need help with creating the page.

 

Index and Blog

Hide the page (by unchecking the box next to the page in your layout)
if you don’t want it to be visible before all the links are working.

A screenshot of a social media post

When your Recipe Index page has been created, make a list of the categories that you want to include. See this one for an example. Next, you need to create a new blog post for each category in your index.
(I backdated mine to the month prior to when I actually started my
blog. You can see all of the posts for that month here.) That way they wouldn’t show up in my RSS feed or be mixed in with
the recipe posts.

Title the new blog posts according to how you want them indexed. Single word titles work best. In some instances, spaces will cause difficulty. The words that you have used to label your recipes are the words you want to use for the index, chicken, beef, condiments, dessert, etc.

For example, I have a blog post named “Chicken” that is the index recipe page for all of my Chicken Recipes. The code for that page simply pulls thumbnails and links for all the posts from my blog that are labeled with the word chicken.

INDEX PARAMETERS & INDEX SCRIPT

Next, you need to know how to create and share a Google drive folder, click here if you need help creating a Google drive folder. Once you have a shared folder, you will need to create your files and share them, click here for a step-by-step tutorial on how to share files. In the future, you can add additional JavaScript and CSS Script to this folder for use on your blog as needed.

Effective 2-4-15 – the Google drive method is no longer working. You will need to host the files elsewhere. If you need help with that, read this post with instructions for hosting files with Amazon Web Services. (swap the words “Google drive” below with whichever hosting service you choose to use.)

To create the index, you will need to upload two files to the shared folder in your Google drive. The first file you need is the Index Parameters. Right click to open this LINK for Index Parameters
in a new tab, now click File > Download > Save File. Right click
that saved file in your downloads and then click edit. The code for
your Index Parameters will open in a text editor.

Save that file with the name IndexParameter.js because we’ll refer to it later by this name. After the document is saved, you need to upload it to the shared folder
you created on your Google drive and you need to share the file with
Public access.

The second file contains the Index Script. Right click to open this LINK for Index Script
in a new tab, now click File > Download > Save File. Right click
that saved file in your downloads, and then click edit. The code for
your Index Script will open in a text editor.

Save that file with the name IndexFormat.js because we’ll refer to it later by this name. After the document is saved, you need to upload it to the shared folder
you created on your Google drive and you need to share the file with
Public access.


Once you have both the IndexParameter.js and the IndexFormat.js files saved to your Google Drive, you are
ready to get started actually creating your Recipe Index.

Copy
the code below into each new blog post’s HTML.
(Only copy this code into the NEW blog posts created especially for the RECIPE INDEX.) Change the items in red
as highlighted and then publish the post. Use the code from that post to
create new posts for as many index categories as you’d like. All you’ll need to change for additional Recipe Index Pages (new posts that are set up to look like pages) is to insert the new category name for each page. Save the link for each new page and use it to link the Recipe Index categories to each page.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

<style>
.date-header {display:none;}
</style>

<script src=”https://googledrive.com/host/insert your drive folder code here/IndexFormat.js”></script>
<script src=”https://googledrive.com/host/insert your drive folder code here/IndexParameter.js”></script>

<script src=”http://insert your blog name.blogspot.com/feeds/posts/default/-/insert Category name here?orderby=published&amp;alt=json-in-script&amp;callback=recent&amp;max-results=999″></script>

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

We would love to see YOUR Recipe Index if you use these codes to make one! Feel free to come back here and link to it in the comments. If you have questions, leave a comment on this post and we’ll do our best to answer them. ~ Sean and Mary Younkin

Updated 2-4-2015 – our recipe index continues to be a work in progress. We appreciate your patience as it often takes a little while to reply to all the comments, questions, and emails. Please read through the comments if you are struggling with a step, your question may have already been answered below.

UPDATED 11-2016: Comments have been turned off at this time. We switched from Blogger to WordPress in 2016. 

Filed under:

Tagged with:

Share this Article

PinYummly

Related Posts

Mary Younkin

Mary Younkin

Hi, I’m Mary. I’m the author, cook, photographer, and travel lover behind the scenes here at Barefeet In The Kitchen. I'm also the author of three cookbooks dedicated to making cooking from scratch as simple as possible.

Reader Interactions

121 Comments Leave a comment or review

    Rate & Comment

  1. Amanda Jenks says

    Hi Mary! First of all, thank you so much. I have been waiting for a tutorial like this now for a while. Second, I have done this step by step over and over with no luck. It's definitely operator error as I am not super familiar with Javascript. I'm not sure what I am doing wrong, but I think I am misunderstanding what "insert your drive folder code here" means. Is it the entire shareable link for the shared folder, or just part of the link?

    • Maggie says

      Hello I also had difficulties going around the loop many times until I realised that Google DRIVE had been updated. I reverted back to the old DRIVE that can be done from within DRIVE and after some more effort I managed to make it work.

    • Mary says

      Google changed the drive URLS and the way it was working before no longer will work. There is a link in the instructions above that will tell you how to set up and host those files elsewhere. I hope that helps!

  2. Mountain Top Chef says

    hello

    THANK HEAVENS FOR SEAN ! Its a shame google doesn't have better blogging widgets and platform. It's going to be outdated if they don't keep up with WordPress. I digress, i'd love to use this code but i have a few questions, can i resize the photos to be much bigger ? Also i use a main navigation bar that just says recipes and underneath sub categories, breakfast, snack, main dishes i like to keep it simple. Is there a way i can put the code for certain categories on the certain pages or it must be in one big index?

    thanks in advance mountaintopchef.blogspot.com

    • Mary says

      You should be able to do both of those things. However, I don't have directions written out for either of them, because we don't use it that way. If you understand coding, you should be able to set yours up that way, you'll see how to change the photo size in the code. Otherwise, you'll need to have a more technically inclined person set it up for you. Best of luck!

  3. Cathleen says

    Thank you so much! The only problem I'm having is that the title of my recipes. I want it to be more right-centred, but it's going all over the place. How can I fix this?

  4. Sarah Reid says

    Is there a way to increase the number of links shown per page? I can't find a "max" in the code to edit and it cuts off some of my indexed recipes

    • Mary says

      I have not found a way to increase the number shown. Many of my categories are cut off as well. It's on our list of things to work on, but we haven't really looked into it at this point.

  5. Maggie says

    Hello my wife has been using your code successfully on google drive until the last few weeks, I'm not sure exactly how long, when it stopped working. I put it on her site for recipes 2 years ago, I know at the time that the google drive link did not work but I used a workaround as follows in the script calls instead of https://drive.google.com/file/d/….. I used https://googledrive.com/host/….. I cannot remember why possibly to a previous standard. If I now try to use the old script calls I get error 502 but at random I get it to work! If I use the current code given on google it pulls the script perfectly but does not work in the page for thumbnails overall. I also note that google blogger is now using https:// from very recently do you have any idea what may be going wrong. Many thanks for your great thumbnails code Bill

  6. Conny says

    Hi! I am German, but i Like this Scripts, but i don’t understand one thing: Next, you need to create a new blog post for each category in your index.

    what does that mean? i should creat a post in the recipe index?

    thanks for help 🙂

    • Mary says

      Yes, that means you’ll need to create a post for each category and paste the code into it. I’m sorry that I can’t be more helpful. I switched from Blogger to WordPress a while back. Best of luck with all of it.

  7. Trisha says

    Thank you so much for sharing this. On a slightly different tangent, how was the transition from blogger to wordpress? I see mixed reviews about it and I can’t decide if I should go through with it or not. Thank you.

    • Mary says

      I love WordPress. I have no regrets regarding switching from Blogger and I also have no regrets about staying with Blogger for as long as I did. The timing was right and I’ve been quite happy with it.