( )

domingo, 27 de diciembre de 2015

Tutorial: Personalizar comentarios :3

Holis!! antes que nada ¡¡¡Feliz Navidad atrasada!!! xD ¿que tal la pasaron? yo muy bien me regalaron un peluche, un libro, una lamparita y par de zapatillas, aunque no había pedido nada de eso xDD... aún tengo Pavo que me sobra, así que hasta que no lo terminemos lo comeremos, ya estoy medio harta, pavo de desayuno, almuerzo y cena .-. pero en fin, últimamente no tengo ni idea de que publicar, las ideas se me acaban TuT. Bueno empecemos el tuto:

1-Primero el estilo de comentarios es como el que tengo, osea este:
2-Pones en Plantilla, luega en Editar HTML, cuendo ya estas ahí, presionas Ctrl+F y ahí te saldra un buscador y buscas:  /* Comments
----------------------------------------------- */


3-Y ya debajo de eso, pegas esto:
/**********************INICIO COMENTARIOS PERSONALIZADOS************************/
#comments h4, #comments .comment-author a, #comments .comment-timestamp a { /*Texto "X comentários:"*/
color: #64BCBA; /*Color de la fuente del numero total de comentarios*/
font-family: Comic Sans MS; /*Fonte do texto*/
font-size: 20px; /*Tamaño da fuente*/}
#comments {
background: #fff; /*Fondo del area general de los comentarios*/
padding: 15px;
}
.comments .comment-block { margin-left: 70px; /*Espacio entre el avatar y el cuerpo del comentario*/}

.comment-header {
background: #FF6699; /*Color de fondo del nombre del autor del comentario*/
border: 4px solid #FF6699; /*Borde donde es el nombe del autor del comentario*/
border-radius: 20px 20px 0 0;
padding: 3px;}
.comment-header a {
color: #fff !important; /*Cor do nome do autor do comentário*/
font-family: Verdana; /*Fuente del nombre del autor del comentario*/
font-size: 16px; /*Tamaño de la fuente del nombre del autor del comentario*/
font-weight: bold; /*Troque bold por normal para tirar o negrito*/}
.comment-header a:hover { color: #FAA7B9 !important; /*Color del nombre del autor del comentario cuando se pasa el mouse*/
text-decoration: none;}

.comments .comments-content .datetime a{
font-size: 10px !important; /*Tamaño de la fuente y hora del comentário*/
float: right; /*Datos alineados a derecha*/
line-height: 16px; /*Altura de linea de fecha y hora*/}

.comments .comments-content .comment-content{ /*Bloque de texto del comentário*/
margin-top: -10px; /*Espacio entre el bloque de comentario de texto y el nombre del autor*/
position: relative;
background: #fff; /*Fondo del bloque de comentario de texto*/
border: 1px dashed #FF6699; /*Borde del bloque del comentario*/
border-radius: 0 0 20px 20px;
padding: 10px;
color: #3f3f3f; /*Color de la fuente del bloque del texto del comentário*/
font-size: 11px; /*Tamaño de fuente*/}

.comments .avatar-image-container {
/*Tamanho do avatar */
max-width: 50px;
max-height: 50px;
min-height: 50px;
min-width: 50px;
background: #FAA7B9; /*Color de borde del avatar*/
padding: 3px; /*Espesor del borde del avatar*/}

.comments .avatar-image-container img{
/*Tamanho do avatar */
max-width: 50px;
max-height: 50px;
min-height: 50px;
min-width: 50px;}

.comments .comments-content .comment {
padding:20px 10px !important;
margin-bottom:15px !important}

.comments .comment .comment-actions a {
padding: 5px;
background: #64BCBA; /*Fondo de los botones responder y eliminar*/
border: 1px solid #64BCBA; /*Fondo de los botones responder y eliminar*/
-Moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
border-radius: 10px 10px 10px 10px;
color: #fff !important; /*Color de texto de los botones responder y eliminar*/
font-family: verdana; /*Fuente de los botones responder y eliminar*/
font-weight: bold; /*Troque bold por normal para tirar o negrito*/
margin-right: 10px;}

.comments .comment .comment-actions a:hover {
background: #FAA7B9; /*Fondo de los botones responder y eliminar cuando pasa el mouse*/
border: 1px solid #FAA7B9; /*Borde de los botones responder y eliminar cuando pasa el mouse*/ 
color: #fff !important; /*Color de texto de los botones responder y eliminar cuando pasa el mouse*/
text-decoration: none;}

.comments .continue { border-top: none;}
.comments .continue a {display: none;}

/**********FIN DE LOS COMENTARIOS POR WWW.PAPOGAROTA.COM.BR********/


Y ya esta, eso fue todo cuidense, bye *3*

3 comentarios:

  1. oooh la personalización de comentarios se ve bonita :D
    Besos

    ResponderEliminar
  2. Hola!!

    oohh muy muuuyyy!! util! dure un monton encontrar el que tengo y pues ya con esto sera mas facil para la proxima vez :D gracias

    ResponderEliminar
  3. Holas!
    Yo desde hace tiempo he estado buscando otro diseño para personalizar los comentarios, así que para la próxima (y lejana (?)) plantilla utilizaré el tutorial.

    ¡Saludos!

    ResponderEliminar


Holis, soy la admin Tsukky.
Cada vez que publicas un comentario me haces muy feliz :3. Pero sólo te pido unas cuantas cositas que debes cumplir:

-No insultar,ni hacer comentarios ofensivo, si lo haces borraré tu comentario.
-No hacer spam, pero si puedes dejarme tu blog :3.
-Yo siempre respondo comentarios, aunque me demore a veces u.u pero los aprecio mucho!

Eso es todo, beshus!