Recipe template for Blogger/Blogspot with CSS and HTML code

recipe.html

<style type="text/css">
/* Styling for the recipe container */ 
.recipe-container{
  border: 1px solid #d9d9d9;
  /* Order is: top right bottom left */  
  /* padding: 0px 25px 25px 25px; */
  margin: 25px 0px 25px 0px;
}
.recipe-header{
  /* Order is: top right bottom left */  
  padding: 0px 25px 25px 25px;
  border-bottom: 1px solid #d9d9d9;
}
/* CSS for recipe title */  
.recipe-title{ 
  margin-bottom: 20px;
}
/* Smaller font for recipe metadata */
.recipe-meta {
  font-size: 90%; 
  padding-bottom: 20px; 
}
.recipe-body{
  padding: 0px 25px 25px 25px;
}
/* Italic font for recipe description */
.recipe-desc {
  font-style: italic;
}

/* Styling for recipe image */
.recipe-image { float: right; margin-left: 10px; padding: 5px; background: #eee; border: 1px solid #ddd; }

/* The @media rule is used in media queries to apply different styles for different media types/devices. */
@media screen and (max-width: 550px){
/* do not show the image on smaller screens */
  .recipe-image { display: none !important;}}
</style>

<!--Write post excerpt/intro here-->
<!--more-->
<p>Here comes the story behind the recipe</p>

<!-- recipe starts here -->
<div class="recipe-container" id="recipe-schema" itemscope itemtype="http://schema.org/Recipe">
<div class="recipe-header"><!-- recipe header starts here -->
<div class="recipe-title"><span itemprop="name"><h2>Enter Recipe Title Here</h2></span></div>
<!-- IMPORTANT - IMAGE PARAMETERS -->
<!-- get the source of the recipe image from the blog post. Replace the ../sxxx/.. or ../wxxx-hxxx/.. parameter with s200-c -->
<!-- also, fill ALT image description in HTML mode -->
<img class="recipe-image" itemprop="image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHNvjHk4e0z5ToVbtonISCEDAqy5Sbc0CQNRmGqz2ycZWQsQlgugORIzmsIVecXJfN_dSZd1jiN6VWvlCGWiDOyT1T2coim425TXFPsxgYkLduSO2Jvk__nTno40IXQPM6YiPXsPkFt_IcitTQ5KGn1_ulmt3zma4J5Px6BhcbAtCFVjkdHUkxWeh7/s200-c/recipe-placeholder.jpg" width="100" alt=""  />
<div class="recipe-meta"><!-- Recipe meta starts here -->
<!-- do not forget to update time in datetime format too - PT[nH][nM] -->
Preparation Time:&nbsp;<time datetime="PT1H20M" itemprop="prepTime">Enter preparation time here (also update duration code)</time>
<br />Cooking time:&nbsp;<time datetime="PT45M" itemprop="cookTime">Enter cooking time here (also update duration code)</time>
<br />Servings:&nbsp;<span itemprop="recipeYield">Enter number of servings here</span>
<!-- Optional - delete if you don't know how many calories -->   
<br />Calories per serving:&nbsp;<span itemprop="calories">Enter calories per serving here</span><br />
<!-- Optional - for special diets -->  
<br />Diet:&nbsp;<span itemprop="suitableForDiet">Special diet (eg. gluten-free)</span><br />

</div><!-- recipe meta ends here -->
</div><!-- recipe header ends here -->
<div class="recipe-body"><!-- recipe body starts here-->
<br />
<div class="recipe-desc"><span itemprop="description">Enter a short description of the recipe within 200 characters.</span></div>
<br />
<span class="recipe-schema-ingredients"><h3>Ingredients:</h3></span>
<ul>
<li><span itemprop="ingredients">Ingredient 1</span></li>
<li><span itemprop="ingredients">Ingredient 2</span></li>
<li><span itemprop="ingredients">Ingredient 3</span></li>
<li><span itemprop="ingredients">Ingredient 4</span></li>
<li><span itemprop="ingredients">and so on...</span></li>
<!-- Delete unused ingredient lines in HTML mode, or add more lines if needed -->
<li><span itemprop="ingredients"></span></li>
<li><span itemprop="ingredients"></span></li>
<li><span itemprop="ingredients"></span></li>
<li><span itemprop="ingredients"></span></li>
<li><span itemprop="ingredients"></span></li>
<li><span itemprop="ingredients"></span></li>
</ul>

<h3>Instructions:</h3>

<p><span itemprop="recipeInstructions">Step 1</span></p>
<p><span itemprop="recipeInstructions">Step 2</span></p>
<p><span itemprop="recipeInstructions">Step 3</span></p>
<p><span itemprop="recipeInstructions">Step 4</span></p>
<!-- Delete unused ingredient lines in HTML mode, or add more lines if needed -->
<p><span itemprop="recipeInstructions">and so on...</span></p>

<h3>Notes:</h3>
<ul>
<li>Note 1</li>
<li>Note 2</li>
<li>Note 3</li>
<li>and so on...</li>
<!-- Delete unused notes lines in HTML mode, or add more lines if needed -->
</ul> 
</div><!-- recipe body ends here -->
</div><!-- recipe ends here -->


<p>Some final words...</p>