Comentarios en plantillas clásicas: "Con avatares a elección"

Primero, antes que nada, les informo que actualice el tutorial:
Gadget Followers Flotante. {Agregue la opción para plantillas clásicas}

Ya vimos anteriormente como editar los comentarios de nuestro blog, tanto en plantillas del diseñador de blogger como el plantillas clásicas {o de blogskin}.
Bien, me preguntaron si a las plantillas clásicas se les podía colocar el "avatar" que acompaña a cada comentario {icon del respectivo visitante que comenta}. La respuesta fue no. No se puede agregar. Pero como dice el titulo, hay un método para que el autor del blog, le asigne sus propios "avatars" a los comentarios & que varíen al recargar la pagina.
Como muestra la imagen, el comentario tiene su "avatar" a eleccion mia:

{tiene fondo blanco}

Para lograr esto, sigue los siguientes pasos:
Primero, lee el tutorial de como editar los comentarios {VER TUTORIAL} & al momento de necesitar el formulario de comentarios utiliza el siguiente:

<!-- Begin #comments -->
 <ItemPage>
  <div id="comments">
 <BlogItemCommentsEnabled><a name="comments"></a>
        <h5><$I18NNumComments$>:</h5>
        <dl id="comments-block">
          <$CommentPager$>
      <BlogItemComments>
      <dt class="comment-poster" id="<$BlogCommentAnchorName$>"><a name="<$BlogCommentAnchorName$>"></a>
        <$I18NCommentAuthorSaid$>
      </dt>
<table><tr><td valign="top" >
<div id="icon" >
<script type="text/javascript">
<!-- hide
numquotes = 4;
var quotes = new Array(numquotes);
quotes[0]="<img src=URL DE TU ICON>";
quotes[1]="<img src=URL DE TU ICON1>";
quotes[2]="<img src=URL DE TU ICON2>";
quotes[3]="<img src=URL DE TU ICON3>";
var rand = Math.floor(Math.random()*numquotes);
document.write(quotes[rand]);
// --></script>
</div>
</td><td valign="top" style="width: 100%;">
<div id="block">
      <dd class="comment-body">
        <p><$BlogCommentBody$></p>
      </dd>
</div>
</td></tr></table>
      <dd class="comment-timestamp"><a href="<$BlogCommentPermalinkURL$>" title="comment permalink"><$BlogCommentDateTime$></a>
   <$BlogCommentDeleteIcon$>
   </dd><br><br>
      </BlogItemComments>
      <$CommentPager$>
    </dl>
<p class="comment-timestamp">
    <$BlogItemCreate$>
    </p>
  <p class="comment-timestamp">
 <a href="<$BlogURL$>">... Back to the blog?</a>
    </p>
    </div>
</ItemPage>
  <!-- End #comments -->

Luego, para editarlo guíate con el tutorial anterior.
Para colocar tus propios icons, edita "URL DE TU ICON" {los números indican que puedes variar de icons}.

Quiero agregar mas icons, se puede ¿?♥
Si, puedes agregar mas icons para que varíen, solo tienes que agregar DEBAJO de:

quotes[3]="<img src=URL DE TU ICON3>";

otra linea como esta & segui la seguencia de los numeros {en este caso luego del 3 el 4}:

quotes[4]="<img src=URL DE TU ICON3>";

Acuérdate de cambiar el numero principal si agregas mas icons:

numquotes = 4;

Es decir, tienes cuatro icons, si agregas 2 lineas mas, deberás cambiar el 4 por un 6.
Para editar el icon, pega esto ARRIBA de </style>

#icon img{
border: 2px solid #ECE2A5; /* BORDE DEL ICON  */
width: 50px;
border-radius: 100%;
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;}
#icon img:hover {
transform: rotate(360deg) ;
-webkit-transform: rotate(360deg) ;
-moz-transform: rotate(360deg) ;
-o-transform: rotate(360deg) ;
-ms-transform: rotate(360deg) ;
}
#icon {
border: 1px dashed #fff; /* BORDE DEL CONTORNO */
background: #fff url(URL FONDO ICON) left center; /* FONDO DEL ICON */
width: 55px;
padding: 5px;
border-radius: 100% 0 100% 100%;
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
}
#icon:hover {
background: #fff url(URL FONDO ICON) left top; /* FONDO DEL ICON HOVER */
}

Edita lo marcado.
Les dejo algunos icons que hice mientras probaba los códigos:

Si utilizas tanto el tutorial como los icons, dar créditos por favor