22/1/14

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 :3 Okkk, a lo que venía, les traigo un tutorial :33 Es para

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(http://4.bp.blogspot.com/-EBYRIbS9KPU/UACgFPLlmVI/AAAAAAAAE3s/xs_mtlAJJPk/s400/cute%2Bfondo%2B%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]

8 comentarios:

  1. Gracias por la tutorial.
    Saludos!

    ResponderEliminar
  2. gracias por el tutorial, muy bueno ^^

    ResponderEliminar
  3. 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
  4. Gracias por el tuto , los comentarios quedan así geniales :D

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

    ResponderEliminar
  6. 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

Reglas:
-Respeto
-No insultar

¡Gracias por comentar!

Emojis:
(∩ω∩) | (>△<) | (>▽<) | (⊙▽⊙) | (●ω●) | (╯ω╰) | (☆▽☆) | (≧ω≦) | ≡(▔﹏▔)≡
Simbolos:
☺♥♫△☆ღ