MiniTutorial: Como Personalizar Comentarios en Blogger

 My Princess como están  Yo espero que bien  

Disculpen la ausencia pero ya saben  es que he estado  un tanto ocupadita, escuchando música, leyendo libros  escribiendo entre otras cosas  así que tratare de no ausentarme tanto...

Hoy les quiero traer un tuto bastante útil, ya muchas de ustedes lo habrán hecho en sus blogs pero para las que se inician les sera de gran ayuda 

Comenzamos: Para incluir este estilo de Comentarios personalizados en nuestro blog de Blogger asi como lo ven en la imagen, debemos de seguir los siguientes pasos:

 Diseño ►Edición HTML ►Presionar Ctrl + F, en el buscador y le damos a pegar la siguiente palabra

]]></b:skin>

 Y Arriba de  ]]></b:skin> pegamos el siguiente código:

 /* Caja del comentario
-----------------------*/
.comment-content{
background:#FF4848;
padding:13px;
border-radius:10px;
color:#FFFFFF; }
h4{/* Titulo "No hay comentarios/Nro Cometarios" */
border-radius: 10px;
background:#FF4848;
text-align:center;
color:#FFFFFF;
text-shadow: 0px 0px 3px #FFFFFF;
}
.user {/* Nombre del usuario */
background: #FAF1F1;
padding: 7px;
margin-left: 10px;
border-radius: 10px 10px 0 0;
}
.icon {
background: transparent;
}
.comment-block{/* Caja */
position:static !important; /* Mantiene el Avatar delante */
background:#FFBBBB ;/* Color de Fondo de la Caja */
padding:10px;
border-radius: 15px 15px 15px 15px;
}
.comment-block a{/* Links de la caja*/
font-weight: normal;
}
.avatar-image-container{/* Contorno de los avatares */
background:#FFBBBB;
padding:5px;
border-radius:50% 50% 0% 50%;
}
.avatar-image-container img{/* Avatares de comentarios */
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
border-radius:50%;
}
.avatar-image-container img:hover{/* Avatares de comentarios "HOVER" con rotacion*/
border-radius:50%;
transform: rotate(360deg) ;
-webkit-transform: rotate(360deg) ;
-moz-transform: rotate(360deg) ;
-o-transform: rotate(360deg) ;
-ms-transform: rotate(360deg) ;
}
.secondary-text a{/* Links Fecha/Responder/Eliminar */
color: #FF4848;
padding: 3px;
background:#FAF1F1;
float: center;
border-radius:5px;
text-shadow: none;
}
.comments .continue a {
background:#FF4848 !important;
color:#fff !important;
float:right!important ;
padding:2px 2px!important;
height:18px;
line-height:10px !important;
margin-top:-1px !important;
text-shadow:0 0 !important;
box-shadow:inset 0 1px 2px #fff;
}
.comments .continue a:hover {
font-style: normal !important;
color: #000 !important;
text-decoration: none;
}

También Puedes modificar los colores según tu gusto

 Al terminar le das a Guardar plantilla y Listo.

Nota: Este tuto no es mio, ha sido editado en su gran mayoría por mi; hace mucho que lo tengo guardado en mi PC ...pero si se que lo saque de la  Web.

Espero que les haya gustado y no olviden dejar sus lindos comentarios