Hola corazones ! Si estas en blogger seguro te habrás dado cuenta que no hay ningún plug-in para agregar un recetario a las entradas. Al menos yo no había encontrado ninguno que me ayudara a la hora de compartir mis recetas.

Algunas de mis colegas tienen en sus blogs tarjetas de recetas que son geniales y que hacen que sus entradas se vean mucho mas profesionales, además de que dan la opción para sus lectores de imprimir la receta.

Pero todos esos plug-ins que encontraba eran para worpress, pero ninguno para blogger 😒

Afortunadamente el ser tan terca me ha resultado a mi favor, por lo menos en esta ocasión, jeje 😂 !

Por fin encontré algo genial para crear la tarjetas de recetas imprimibles. Nos permite poner toda la información en una plantilla, nos da un código HTML, esto se copia y se pega en el blog (en las entradas)  y lo transfiere en una tarjeta de receta imprimible. Yay!! (inserta brincos de felicidad aquí)

La receta será re-formateada con micro-datos para hacer nuestras recetas más fáciles de encontrar a través de Internet.

Quedaría algo así:

Ya nuestras recetas quedaran igual de lindas que los que utilizan Worpress jejeje. Que te parece? A poco no es genial. 

1. Accede a The Recipe Wiz 

2. Agrega toda la información general, autor de la receta, nombre de la receta, fecha, etc

3. Completa cada seccione. Y da clic en + para añadir otro ingrediente, de esta manera mantendrás tus ingredientes en líneas separadas.
4. Llena las instrucciones. De nuevo presiona + para agregar mas instrucción en una línea diferente.
4. Agrega en cada espacio correspondiente el tiempo que tomaría preparar tu receta.

5. Por último agregar una imagen de tu receta, debes subir tu imagen en algún sitio web Como Tinypic o Photobucket, copia la URL directa de la imagen.

Nota: Puedes ajustar el tamaño de la imagen directamente en en tu post.
6. Ahora solo queda copiar el código HTML que se ha creado y pegarlo directo en tu entrada de blogger en vista HTML.

El Color Verde es para cualquier texto, ejem; La descripción de tu biografía y o nombres.
Lo marcado en Amarillo es para modificar las URLs de las imágenes de perfil o avatar.
Lo marcado en Azul es para modificar las medidas de imágenes, fuentes y o bordes.
Lo marcado en Morado es para modificar las URLs de tus redes sociales.
Lo marcado en Naranja son los colores de fondos y o bordes que puedes modificar.

Vamos a tocar un poco la plantilla HTML y CSS, pero prometo que no es nada difícil.
Nota: Recuerda hacer siempre una copia de seguridad antes de realizar cualquier cambio.
Vamos a Plantilla > Editar HTML > Busca el siguiente codigo en tu plantilla HTML.
<b:if cond='data:post.hasJumpLink'> Te va a salir un código como el siguiente

<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
      </div>
    </b:if>

Justo debajo de </b:if>  pega cualquiera de los siguientes códigos.
(De acuerdo con la biografía quieras).

Biografía #1
Aquí puedes ver un ejemplo de como quedaría la biografía. EJEMPLO.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='biografia'>
<p class='bio-content'>Aqui va mi biografia, puedo describir sobre mi vida y blog...... Compartir mis intereses y lo que me gusta.</p>
  <a class='social' href='URL DE TU RED SOCIAL' target='_blank'><img title=”Facebook”  src="URL de tu imagen" width= '30px' /></a>
  <a href='URL DE TU RED SOCIAL' target='_blank'><img title=”Instagram” src="URL imagen red social" width= '30px' /></a>
 <a href='URL DE TU RED SOCIAL' target='_blank'><img title=”Twitter” src="URL imagen red social" width= '30px' /></a>
  <a href='URL DE TU RED SOCIAL' target='_blank'><img title=”Pinterest” src="URl imagen  red social" width= '30px' /></a>
  </div>
</b:if>

CSS
.biografia {
background:  url(URL de tu imagen de perfil) left no-repeat;
width: 650px;
height: 150px;
border: 1px solid black; 
}

.bio-content {
    width: 375px;
    font-size: 1.2em;
    padding-left: 250px;
    padding-top: em;
    position: relative;
    color: black;
}

.bio-content a {
    color: white; 
    text-decoration: underline;

} 
.social {

  padding-left: 250px; }



Biografia #2  
Aquí puedes ver un ejemplo de como quedaría la biografía. EJEMPLO.

CSS (Cascading Style Sheets, u Hojas de Estilo en Cascada) es la tecnología desarrollada por el World Wide Web Consortium (W3C) con el fin de separar la estructura de la presentación.
Es decir la presentacion que nos permite darle un diseño personalizado a nuestra web/blog.

What did I just watch?IG: yusilaysclement
Posted by DigiBunch on Wednesday, July 29, 2015

 La Tarjeta de Resumen con ampliación de imagen cuenta con una imagen destacada de ancho completo junto a un tweet. Está diseñado para dar al lector una experiencia única, haciendo clic en la imagen lleva al usuario a su sitio web .Basta con añadir unas pocas líneas de HTML a tu sitio Web y los usuarios que Tweetien enlaces a tu contenido tendrán una "tarjeta" añadida al Tweet que es visible a todos tus seguidores.

 <b:includable id='post' var='post'>

2. Justo debajo pega este otro, cambiando lo que esta marcado en rosa por tu información> guarda.

<meta content='NOMBRE de tu cuenta' name='twitter:site'/>
<meta content='@Cuenta de tu Twitter' name='twitter:creator'/>
<meta content='www.TUDOMINIO.com' name='twitter:domain'/>
<b:if cond='data:post.firstImageUrl'>
<meta content='summary_large_image' name='twitter:card'/>
<meta expr:content='data:post.firstImageUrl' name='twitter:image'/> 
<b:else/>
<meta content='summary' name='twitter:card'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' name='twitter:image'/> 
</b:if>
</b:if> 
<meta expr:content='data:post.title' name='twitter:title'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta expr:content='data:post.snippet' name='twitter:description'/>
<b:else/>
<meta content='DESCRIPCION del BLOG' name='twitter:description'/>     
</b:if>