El nuevo elemento "Reacciones"

JMiur [E]

Una función nueva que podemos probar en Blogger in Draft es la llamada Reacciones que es similar al Rating de estrellitas pero tiene más posibilidades de configuración.

Para usarla, debemos entrar en Blogger in Draft y allí, en Diseño, editamos el elemento Entradas del blog. En la ventana, aparecerá la nueva opción:

Debemos marcarlo y podemos editarlo haciendo click en Editar y escribiendo los textos separados por comas.

No estamos limitados a esos tres que se muestran por defecto, podemos colocar más o menos y el resultado sólo dependerá del ancho que ocupen.

Una vez guardado, lo veremos debajo de todos los posts ... a veces ya que el código no está incluido en todas las plantillas.

Expandan la plantilla y busquen class='reaction-buttons' si no existe, deberemos agregarlo manualemente. Busquen entonces, algo similar a esto:

class='post-footer-line post-footer-line-1'

Es el área inferior de los posts y puede ser una etiqueta P o DIV. Allí, por lo general, veremos los datos del autor, la fecha de publicación, los íconos de edición, etc. Eventualmente, hay otros sectores parecidos llamados:

class='post-footer-line post-footer-line-2' suele contener la lista de etiquetas
class='post-footer-line post-footer-line-3' muchas veces no tiene uso

Agregaremos el código dentro de cualquiera de ellos o bien crearemos uno nuevo:

<div class="post-footer-line post-footer-line-4">
  <span class='reaction-buttons'>
    <b:if cond='data:top.showReactions'>
      <table border='0' cellpadding='0' width='100%'><tr>
      <td valign='center'>
        <span class='reactions-label'><data:top.reactionsLabel/></span>
      </td>
      <td>
        <iframe allowtransparency='true' class='reactions-iframe' expr:src='data:post.reactionsUrl' frameborder='0' name='reactions' scrolling='no'/>
      </td>
      </tr></table>
    </b:if>
  </span>
</div>

Como lo que se inserta es un IFRAME (otra vez), las posibilidades de personalización son escasas y la mayoría de las propiedades son las mismas que se utilizan en el resto del área de posts.

De todas formas, algunas de ellas podemos modificarlas si agregamos las clases en la plantilla, justo antes de </b:skin>:

.reaction-buttons {
  /* es el área donde se muestra */
}

/* como todo esta una tabla, estas on las posibles definiciones */
.reaction-buttons table { ... }
.reaction-buttons table td { ... }

.reactions-label { /* el texto Reacciones */
  margin:3px 0 0; /* es la propiedad por defecto */
}
.reactions-iframe { /* es el iframe */
  /* tiene alguna propiedades por defecto  */
  background: transparent none repeat scroll 0 0;
  border: 0 none;
  height: 2.3em;
  width: 100%;
}