Edita los comentarios de tu blog.

Hoy les enseñare a editar los comentarios de nuestro blog {aquellos que dejan nuestros visitantes} tanto en plantillas del diseñador blogger, como en las clásicas.

No tienen ambas las mismas opciones {en la clasicas tenemos menos elementos} pero aun asi, con creatividad & originalidad, podemos decorar nuestro blog dándole un toque único.

EN PLATILLAS DEL DISEÑADOR DE BLOGGER:
Primero, antes de comenzar la edición  para que funcione & se edite completo, debes tener tus comentarios en modo: "Debajo de la entrada". {Configuración / Entradas & Comentarios / Ubicación de los comentarios}

Una ves modificado esto, vamos a Plantilla / Edición HTML & buscas ]]></b:skin>
ARRIBA pegas lo siguiente:

/* Caja del comentario */
.comment-content{
background:#fff ;
padding:13px;
border-radius:10px;
color:#999; }

/* Titulo "No hay comentarios/nro Cometarios" */
h4{
border-radius: 10px;
background:#9ad2cb;
text-align:center;
color:#fff;
text-shadow: 0px 0px 3px #fff;
}

/* Nombre del usuario */
.user {
background: #fff;
padding: 7px;
margin-left: 10px;
border-radius: 10px 10px 0 0;
}

.icon {
background: transparent;
}

/* Caja de color */
.comment-block{
background:#fff url(URL DE TU FONDO); 
padding:10px;
border: 1px dashed #fff;
border-radius: 15px 15px 15px 15px;
}

/* Links de la caja de color */
.comment-block a{
font-weight: normal;
}

/* Contorno de los avatares */
.avatar-image-container{
background:#9ad2cb;
padding:5px;
border-radius:50% 50% 0% 50%;
}
/* Avatares de comentarios */
.avatar-image-container img{
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
border-radius:50%;
}
/* Avatares de comentarios "HOVER" */
.avatar-image-container img:hover{
border-radius:50%;
transform: rotate(360deg) ;
-webkit-transform: rotate(360deg) ;
-moz-transform: rotate(360deg) ;
-o-transform: rotate(360deg) ;
-ms-transform: rotate(360deg) ;
}

/* Links Fecha/Responder/Eliminar */
.secondary-text a{
color: #fff;
padding: 3px;
background:#9ad2cb;
float: center;
border-radius:5px;
text-shadow: none;
}

Modificas lo marcado.
border-radius: {bordes redondeados} Ayuda AQUI!♥
color:  {color del texto}

background: {fondo}

text-shadow: {sombra del texto} Tutorial AQUÍ!♥

border: {bordes} Tutorial AQUÍ!♥

Guardas & tienes tus comentarios editados.

EN PLANTILLAS CLÁSICAS/ANTIGUAS {DE BLOGSKIN}:
Primero, verifica que tus comentarios este en modo: "Debajo de la entrada". {Configuración / Entradas & Comentarios / Ubicación de los comentarios}

Luego, debes instalar el formulario de comentarios, para esto ve al tutorial: Comentarios en "Plantillas Clásicas"
Al código que te da este tutorial, modificalo de esta forma:
Busca la siguiente linea:

<BlogItemComments>

DEBAJO de ella coloca:

<span style="font-size: 10px; color:#ffa1c0; text-transform:uppercase; padding: 3px; border: 1px dashed #fcc; border-radius: 10px 0 0 0;"><img src="URL DE TU GIF"/> Ribbon of:</span>

Ribbon of: Puedes editarlo como mas te guste, sera algo mo "un mensaje de..." & estara ubicado arriba del nombre de la persona que comenta {Como se ve en la imagen}.

Luego, ve a tu Plantilla & busca </style>
ARRIBA pega lo siguiente:

#comments-block {
margin-top: -50px;
}

/* caja de color */
#block {
background: #fff url(URL DE TU FONDO);
padding: 7px;
border: 1px dashed #fff;
border-radius: 20px 7px 20px 7px;}

/* Titulo "No hay comentarios/nro Cometarios" */
h5 {
margin-top: -10px;
font-family: 'Londrina Outline', cursive;
font-size: 35px;
color:#ffa1c0;
text-transform:uppercase;
text-align:center;
background: #ffe9f0 url(URL DE TU FONDO);
border: 1px dashed #ffa1be;
}

/* Titulo "Publicar un comentario en la entrada" */
h4 {
font-size: 25px;
font-family: 'Grand Hotel', cursive;
color:#ffa1c0;
text-align:center;
border-bottom: 1px dashed #ffa1be;
margin-bottom: -10px;
}

.comment-poster {
color: transparent;
font-size: 10px;
}

/* Nombre de quien comenta */
.comment-poster a{
color: #fff;
font-family: 'Grand Hotel', cursive;
font-size: 25px;
}
.comment-icon, .blogger-comment-icon {
opacity: 0;
width: 0px;
}

/* Caja de color */
.comment-body {
background: #fff url(URL DE TU FONDO);
padding: 7px;
border-radius: 7px;
border: 1px dashed #fcc;
margin: 0px;
}

/* Fecha */
.comment-timestamp a{
margin-top:9px;
color: #ffa1c0;
float: right;
}
#comment-editor {
height: 220px;
}

Modificas lo marcado.
border-radius: {bordes redondeados} Ayuda AQUI!♥
color:  {color del texto}

background: {fondo}

text-shadow: {sombra del texto} Tutorial AQUÍ!♥

border: {bordes} Tutorial AQUÍ!♥
font-family: {fuente de letra/estilo de letra}
font-size: {tamaño de letra}

Guardas & tienes tus comentarios editados.

NOTA: Si quieres utilizar las fuentes de letras que muestra en la imagen, no edites "font-family", ni "font-size" & agrega esto DEBAJO de <head>

<link href='http://fonts.googleapis.com/css?family=Fascinate+Inline|Londrina+Outline|Grand+Hotel' rel='stylesheet' type='text/css'>