1. Tenéis que entrar en blogger con vuestra cuenta y a continuación, ir al código de la plantilla y expandir los artilugios.
   Home → Diseño → Edición de HTML → Expandir plantillas de artilugios
2. Tenéis que buscar la siguientes entrada dentro de vuestra plantilla:

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

• 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.

<div class='reaction-buttons'>
    <b:if cond='data:top.showReactions'>
      <table border='0' cellpadding='0' width='100%'><tr>
      <td nowrap='nowrap' valign='center' width='1%'>
        <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' textColor='#fff'/>
      </td>
      </tr></table>
    </b:if>
  </div>

.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%;
}

• star.png,
• star-half.png,
• user.png,
• user-half.png, 
• gray.png

<div class='js-kit-rating' userColor='Violet' starColor='Golden' ImageSize='16x24' ImageUrl='http://aqui la url de vuestro archivo de imagenes/' expr:path='data:post.url' expr:permalink='data:post.url' expr:title='data:post.title'>
</div>

• ImageSize='16x24' : determina el tamaño de las estrellas de calificación.

• ImageUrl :Aquí es donde va la url  de nuestro archivo de imagenes para la calificacion.

/*----------------------------------------------------
          {--------}  Variable definitions  {--------}
----------------------------------------------------*/

/* Variable definitions
   ====================
   <Variable name="keycolor" description="Main Color" type="color" default="#ffffff" value="#ccd9ea"/>

   <Group description="Page" selector="body">
     <Variable name="body.font" description="Font" type="font"
         default="normal normal 13px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 13px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
     <Variable name="body.background.color" description="Background Color" type="color" default="#000000" value="#becdd9"/>
     <Variable name="body.text.color" description="Text Color" type="color" default="#ffffff" value="#606060"/>
   </Group>

   <Group description="Links" selector=".main-inner">
     <Variable name="link.color" description="Link Color" type="color" default="#888888" value="#4183d9"/>
     <Variable name="link.visited.color" description="Visited Color" type="color" default="#444444" value="#2160b0"/>
     <Variable name="link.hover.color" description="Hover Color" type="color" default="#cccccc" value="#4183d9"/>
   </Group>

   <Group description="Gadget Title" selector="h2">
     <Variable name="widget.title.font" description="Font" type="font"
        default="normal bold 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="italic bold 14px Fontdiner Swanky"/>
     <Variable name="widget.title.text.color" description="Text Color" type="color" default="$(body.text.color)" value="#ffffff"/>
   </Group>

   <Group description="Gadget Text" selector=".sidebar .widget">
     <Variable name="widget.font" description="Font" type="font"
        default="normal normal 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="italic normal 16px Corsiva"/>
     <Variable name="widget.text.color" description="Text Color" type="color" default="$(body.text.color)" value="#ffffff"/>
     <Variable name="widget.alternate.text.color" description="Alternate Color" type="color" default="#666666" value="#ffffff"/>
   </Group>

   <Group description="Gadget Links" selector=".sidebar .widget">
     <Variable name="widget.link.color" description="Link Color" type="color" default="$(link.color)" value="#becfde"/>
     <Variable name="widget.link.visited.color" description="Visited Color" type="color" default="$(link.visited.color)" value="#b2a3dd"/>
     <Variable name="widget.link.hover.color" description="Hover Color" type="color" default="$(link.hover.color)" value="#becfde"/>
   </Group>

   <Group description="Gadget Background" selector=".sidebar .widget">
     <Variable name="widget.background.color" description="Background Color" type="color" default="#141414" value="transparent"/>
     <Variable name="widget.border.color" description="Border Color" type="color" default="#222222" value="transparent"/>
     <Variable name="widget.border.bevel.color" description="Bevel Color" type="color" default="#000000" value="transparent"/>
   </Group>

*/

Una vez ayas copiado el código anterior, lo pegas justo  al principio del templates justo detrás de la zona donde pone: autor,nombre...etc. todo esto tiene que ir detrás de la esta zona como aparece en la foto de debajo.

Para poner un icono delante de los widgets de lista de enlaces y las etiquetas en blogger como este"", lo primero tienes que ir a "blogger" luego  ir a "diseño" y picar en "Editor de HTML" le das a expandir plantilla de artilugios y justo antes de ]]></b:skin> pegas los siguientes códigos html:

• Este es el cogido de widgets del "lista de enlaces":

#LinkList{
 background: url( IMAGEN DEL ICONO DE 16X16) left 12px no-repeat;
 padding: 6px 0px 6px 25px;
 margin: 0;
        border-bottom: 1px solid #8A0808;
        color:#ccc;
 } 

• Este es el cogido de widgets del "Etiquetas":

.sidebar ul {
 list-style-type: none;
 margin: 0px 0px 10px 0px;
 padding: 0px;
 }
 
.sidebar ul li {
 list-style-type: none;
 margin: 0px 0px 5px 0px;
 padding: 0px;
 }

.sidebar ul ul {
 list-style-type: none;
 margin: 0px;
 padding: 0px;
 }
 
.sidebar ul li, .sidebar ul li ul li {
 background: url(IMAGEN DEL ICONO DE 16x16) left 12px no-repeat;
 padding: 6px 0px 6px 25px;
 margin: 0;
        border-bottom: 1px solid #8A0808;
        color:#ccc;
 }

.sidebar li a:link, .sidebar li a:visited {
        font-size: 16px;
        color:#ccc;
}

.sidebar li a:hover {
        color:#FFC600;
        text-decoration: none;
}

• IMAGEN DEL ICONO DE 16X16:Aqui de pone la url del icono que vas a poner ,"NOTA:EL TAMAÑO DEL ICONO QUE PONGAN TIENE QUE SER DE 16x16".
• Padding: NO TOCAR.
• Margin:No Tocar.
• Border-bottom:Es el color de la linia que aparece ceparando cada link.
• Color:regula el color del testo el color tiene que estar escrito en html.