Tutorial:Personaliza comentarios(plantilla clasica)

Hola¡¡ Bueno hoy les traigo un tutorial que me pidieron,si se dieron cuenta mayormente no hago tutoriales para plantilla clasica  , pero pronto las are,aveces los hago, bueno este tutorial no me pertenece es de Mell  al final tan los creditos 
Como leyeron el titulo es personalizar los comentarios de plantilla clasica o blogskin
Un ejemplo de como queda:

Si lo quieres tener sigas los siguiente:

Primero vamos a:

HABILITAR LOS COMENTARIOS 

Vamos a Plantilla,con Ctrl+F buscas <$BlogItemBody$>

y abajito colocas el siguiente código

<!-- 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 -->

Aora solo cambias "URL DE TU ICON" , por los iconos que quieras,
Notita: Los numeros indican que puedes variar de iconos

-Para aumentar mas iconos para que varien 
solo coloca debajo de  quotes[3]="<img src=URL DE TU ICON3>";
este codigo:

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

Debes seguir la seguencia de los numeros en este caso luego del 3 el 4
Tambien debes de cambiar el numero principal si agregas mas iconos

numquotes = 4;

Aora con Ctrl+F, buscas </style> y colocas el siguiente codigo antes de </style>

/* caja de color */
#block {
background: #fff url(Url de tu fondo);
padding: 10px;
border: 2px dashed #FFE4E4;/*Color de los bordes de la caja */
border-radius: 20px 7px 20px 7px}
/* Titulo "No hay comentarios/nro Cometarios" */
h5 {
font-family: 'Baskerville Old Face', cursive;
font-size: 25px;
color:#FFBCBC;/*Color de la letra*/
text-align:center;
background: #FFE4E4 url(Url de tu fondo);
border: 1px solid #F8D0FF;/*Color de los bordes del titulo*/
border-radius: 7px
}
/* Titulo "Publicar un comentario en la entrada" */
h4 {
font-size: 16px;
font-family: 'Century Gothic', cursive;
color:#FF9CA0;/*Color de la letra*/
text-align:center;
border-bottom: 1px dashed #F8D0FF;
margin-bottom: -10px;
}
.comment-poster {
color: transparent;
font-size: 10px;
}
/* Nombre de quien comenta */
.comment-poster a{
color:  #FF9CA0;/*Color de la letra*/
font-family: 'Baskerville Old Face', cursive;
font-size: 19px;/*Tamaño de la letra*/
}
.comment-icon, .blogger-comment-icon {
opacity: 0;
width: 0px;
}
/* Caja de color */
.comment-body {
color:  #C6C6C6;/*Color de la letra*/
font-size: 10px;
background: #fff url(Url del fondo);
padding: 7px;
border: 2px dashed #FFD2D3;/*Color del borde*/
margin: 0px;
}
/* Fecha */
.comment-timestamp a{
background:url(Url del fondo);
margin-top:9px;
border-radius:10px
color: #FFFFFF;/*Color de la letra*/
float: right;
}
#comment-editor {
height: 220px;
}
#icon img{
border: 1px solid #F2D5FF; /* 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 #F2D5FF; /* BORDE DEL CONTORNO */
background: #fff url(Url del fondo) 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 del fondo) left top; /* FONDO DEL ICON HOVER */
}

Y ustedes lo cambian los colores y fondos a su gusto
Bueno este tutorial no me pertenece  , lo hice por que me pidieron 
Si te sirvio el tutorial, dale
Creditos a :Mi mundo de Creacion