Tutorial: Personalizar comentarios

Imagen relacionada
¡Hola tomodachis! ¿Qué tal, como andan? Yo muy bien :3 Hoy es un día húmedo y caluroso en mi provincia, en algunos lugares llueve y en otros todavía no... Y bueno yo aquí aburrida en mi habitación junto a my baby [mi gatito] mientras lo acaricio owo. 
Okkk, a lo que venía, les traigo un tutorial n.n

Editar los comentarios a tu gusto
Yo antes les había dado los tutoriales de:
Y ahora vamos a la personalización de los comentarios

Te va a quedar algo así:
Solo que con los colores y el estilo que te guste a vos :3
Es super fácil, nos vamos a
Plantilla-Editar HTML-Ctrl+F y buscas
]]></b:skin>
Y arriba de ]]></b:skin> pegas este código:
/* 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:#FFC9D9;
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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUM9G56CYTinQKxi1jrttTkpuUzMZV-ilu2bMdjZXu2y2M9n1nqv-Di9UMxgjUFH4t7y6BEBTI75oJw-2X9rLhtlXbQeYhldLWvGAODSK3BrtmjMb1dW51hn1suYeJBqXyhyAZt2HAa78B/s400/cute+fondo+%252814%2529.png); 
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:#FFC9D9;
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:#FFC9D9;
float: center;
border-radius:5px;
text-shadow: none;
}
Celeste: Los colores, puedes elegirlos en Colores HTML 
Rojo: Link de la imágen de fondo
Verde: Medidas
Azul: Borde redondeado [puedes cambiar a solid y estará cuadrado]

9 comentarios:

  1. gracias por el tutorial, muy bueno ^^

    ResponderEliminar
  2. Wow! lo voy a usar claro con los creditos^^ una preguntita [Plis respondela comentando en mi blog] ¿Puedo usarlo para publicarlo en mi blog como tutorial? bueno, claro te dejo mil creditos:3
    Besines

    ResponderEliminar
  3. Gracias por el tuto , los comentarios quedan así geniales :D

    ResponderEliminar
  4. Hermoso! Tomaré la plantilla y ntp, daré créditos en la siguiente entrada!! Eres genial!

    ResponderEliminar
  5. Gracias, estoy creando un nuevo blog y soy nueva en esto <3 tus tutoriales me han servido mucho ñ-ñ Claro que te dare tus creditos 7uu7

    ResponderEliminar

¡Gracias por tu comentario!

Emojis:
⸜(。˃ ᵕ ˂ )⸝♡ | ૮ ˶ᵔ ᵕ ᵔ˶ ა | (>▽<) | ପ(๑•ᴗ•๑)ଓ ♡ | (╯ω╰) | (☆▽☆) | (≧ω≦) | ૮ • ﻌ - ა | ଘ(੭ˊᵕˋ)੭ | (・∀・ ) | (¬_¬) | (ノ◕ヮ◕)ノ*:・゚✧ | ฅ^•ﻌ•^ฅ | (¬‿¬) | (─‿‿─) | (~ ̄▽ ̄)~ | (︶ω︶) | ٩(ˊᗜˋ*)و ♡ | (╥﹏╥) | (✿ ♥‿♥) | ●ᴥ●

Simbolos:
♡♥♫△☆ღ