How to: Add Recipe Templates on Your Blogspot for Posts That Are Label 'Recipe'

To replicate the clean, professional look of The Stay At Home Chef on your Blogger site, we need to add a dedicated Recipe Card CSS section and modify your Post Body Includable to handle recipe metadata (like Prep Time, Cook Time, and the "Jump to Recipe" button).

Below are the specific updates for your XML theme.

Follow this guide to learn to Accessing the HTML Editor to Edit Theme Templates

---

Step 1: Add the Recipe Card CSS

Find the ]]></b:skin> tag in your XML and paste the following CSS immediately above it. This styling mimics the clean white-space and structured data look of your reference site.

CSS

/* --- RWB Professional Recipe Card Styling --- */
.recipe-jump-link {
    display: block;
    background: #8b1a1a; /* Your Brand Crimson */
    color: #fff !important;
    text-align: center;
    padding: 12px;
    font-weight: bold;
    border-radius: 4px;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.recipe-card-container {
    background: #f9f9f9;
    border: 1px solid #eee;
    padding: 25px;
    margin: 20px 0;
    border-top: 5px solid #DC9E32; /* Your Brand Gold */
}
.recipe-header-meta {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    border-bottom: 1px solid #ddd;
    padding-bottom: 15px;
    margin-bottom: 20px;
    font-size: 14px;
}
.meta-item {
    flex: 1;
    min-width: 100px;
    text-align: center;
}
.meta-item strong {
    display: block;
    color: #8b1a1a;
    text-transform: uppercase;
    font-size: 12px;
}
.recipe-section-title {
    font-family: 'Ubuntu', sans-serif;
    color: #333;
    border-bottom: 2px solid #8b1a1a;
    padding-bottom: 5px;
    margin: 25px 0 15px;
    text-transform: uppercase;
}
.ingredients-list li, .instructions-list li {
    margin-bottom: 10px;
    line-height: 1.6;
}
.ingredients-list {
    list-style-type: none;
    padding-left: 0;
}
.ingredients-list li:before {
    content: "▢";
    margin-right: 10px;
    color: #DC9E32;
}
@media (max-width: 768px) {
    .recipe-header-meta { flex-direction: column; gap: 10px; }

---

Step 2: Update the postBody Includable

Locate <b:includable id='postBody' var='post'> in your XML (near line 1550). Replace the entire block with the code below. This adds the "Jump to Recipe" button and the Metadata Grid automatically to posts labeled "Recipe".

HTML
<h3 class="recipe-section-title">Ingredients</h3>
<ul class="ingredients-list">
<li>250g Spaghetti</li>
<li>2 tsp Rempah Warisan Bernam</li>
</ul>

---

Step 3: How to format your Blog Posts

To make the styling work perfectly like The Stay At Home Chef, you must use specific HTML classes when writing your post in Blogger (HTML View):

1. Label the post: Ensure the post has the label Recipe.

2. Ingredients: Wrap your list like this:
   HTML
   <h3 class="recipe-section-title">Ingredients</h3>
   <ul class="ingredients-list">
     <li>250g Spaghetti</li>
     <li>2 tsp Rempah Warisan Bernam</li>
   </ul>
   
   

3. Instructions: Wrap your steps like this:

HTML
<h3 class="recipe-section-title">Instructions</h3>
<ol class="instructions-list">
  <li>Boil the pasta until al dente.</li>
  <li>Add the heritage spice blend...</li>
</ol>

Why this works:

• SEO Integration: This utilizes your existing blogger-recipe-schema script to ensure

  Google sees the prep times and ingredients
  

• User Experience: The "Jump to Recipe" button is a hallmark of professional food blogs, allowing users to skip the story and get straight to the cooking

• Brand Consistency: I’ve used the Crimson (#8b1a1a) and Gold (#DC9E32) colors found in your site's JavaScript to ensure the recipe card feels native to your brand.