Modelo de comentarios #3


¡Hola a todos!
¿Como están? espero que muy bien. <3

Hoy les les traigo un tutorial de modelo de comentarios.

Previa:

*Mala calidad, lo siento*

Plantilla | Editar  HTML



CTRL + F

Buscar:

/* Comments



Después de haber buscando ese codigo, abajo de /* Comments
sale esto:  --------------------------- */ (debajo de eso copias este código):
#comments {
padding: 15px;
background: #F8F8F8 none repeat scroll top center;
}
#comments .comment-author {
padding-top: 1.5em;
}
#comments h4,
#comments .comment-author a,
#comments .comment-timestamp a {
text-transform: capitalize;
letter-spacing: 2;
font-family: 'Georgia', cursive;
font-weight: 300;
font-size: 22px;
font-style:italic;
color:#F8CED8;
text-align: center;
}
#comments .comment-timestamp a:hover {
font-family: 'Yanone Kaffeesatz', sans-serif;
font-weight: 300;
letter-spacing: 2px;
text-transform: uppercase;
font-size: 22px;
color: # !important;
text-align: center;
}
#comments .comment-author:first-child {
padding-top: 0;
border-top: none;
}
/* Comments
----------------------------------------------- */
.comments{clear:both;top:10px;margin-bottom:30px;line-height:10px;font: normal normal 12px calibri;
color:#d8d8d8;text-align:justify;}
.comments .comments-content{margin-bottom:16px;font-weight:normal;text-align:justify;margin-top:-15px;}
.comments .comment .comment-actions a,.comments .comment .continue a{
display:inline-block;
margin:0px 2px 4px 4px;
padding-bottom: 5px; padding-left: 4px; padding-right: 4px; padding-top: 5px;
text-align:justify;
font-family: 'Pf Arma Five'; font-size: 8px; text-shadow: 1px 1px 0px # !important;
text-decoration:none;
color:#fff;
text-shadow: 1px 1px 1px #ccc;
background:#FCDDE6;border: solid 1px #F9CFDB;
box-shadow: inset 1px 1px 0px #ffbfd0;
box-shadow:1px 2px 2px #fad5de;
border-radius:1px;
-moz-border-radius:1px;
font-weight:normal;
cursor:pointer;
-webkit-transition-duration: .80s;
}
.comments .comment .comment-actions a:hover,.comments .comment .continue a:hover {
display:inline-block;
margin:0px 2px 4px 4px;
padding-bottom: 5px; padding-left: 4px; padding-right: 4px; padding-top: 5px;
font-family: 'Pf Arma Five'; font-size: 8px; text-shadow: 1px 1px 0px # !important;
text-decoration:none;
color:#fff;
text-shadow: 1px 1px 1px #ccc;
background: #ebe7f9;border: solid 1px #e2dcf8;
box-shadow: inset 1px 1px 0px #D4E3E8;
box-shadow:1px 2px 2px #D4E3E8;
border-radius:2px;
-moz-border-radius:2px;
font-weight:normal;
cursor:pointer;
-webkit-transition-duration: .100s;
}
.comments .comments-content .comment-thread ol{
list-style-type:none;padding:0;text-align:none}
.comments .comments-content .inline-thread{padding:0}
.comments .comments-content .comment-thread{margin:8px 0}
.comments .comments-content .comment-thread:empty{display:none}
.comment-replies{margin-top:1em;margin-left:40px;}
.comments .comments-content .comment{margin-bottom:0;padding-bottom:0}
.comments .comments-content .comment:first-child{padding-top:16px}
.comments .comments-content .comment:last-child{border-bottom:0;padding-bottom:0}
.comments .comments-content .comment-body{position:relative;
}
.comments .comments-content .user{font-style:normal;font-weight:normal}
.comments .comments-content .user a{font-weight:normal;text-decoration:none;}
.comments .comments-content .icon.blog-author{
position:absolute;
top: 2px;
float:right;
margin:0;
}
.comments .comments-content .datetime a{
font-family: 'Pf Arma Five';
font-size:8px;
color:#fff; /* -- cor do link da data do comentário -- */
text-shadow: 1px 2px 2px #A4B9BE;
position:absolute;
float:left;
top: -1px;
}
.comment-content{margin:0 0 8px;padding:0 5px;
}
.comments .comment-block{
font: normal normal 12px calibri;
color:#D0D0D0;
text-shadow: 0px 0px 0px #fff !important;
margin-left:65px;
position:relative;
background:#F8F8F8;
border:1px solid #;
box-shadow: 0px 0px 1px #;
border-radius:1px;
-moz-border-radius:0px;
}
.comment-header{ /*--- linha onde fica o nome do autor do comentário --- */
color:#fff;
text-shadow: 1px 2px 2px #A4B9BE;
background: #ebe7f9;border: solid 1px #e2dcf8;
box-shadow: inset px 0px 0px #D4E3E8;
box-shadow: inset 0px 2px 2px #;
border-bottom:solid 2px #FAD6E0;
padding:4px;
border-radius:1px;
}
.comment-header a{
text-transform: uppercase;
font-family: 'Open Sans Condensed', sans-serif;
text-shadow: 1px 2px 2px #A4B9BE;
font-weight: 300;
letter-spacing: 2px;
font-size:11px;
border-radius:1px;
color: #fff;
padding:8px;
}
.comments .comments-content .owner-actions{position:absolute;right:0;top:0}
.comments .comments-replybox{border:none;height:230px;width:100%}
.comments .comment-replybox-thread{margin-top:0}
.comments .comment-replybox-single{margin-top:5px;margin-left:48px}
.comments .comments-content .loadmore a{display:block;padding:10px 16px;text-align:center}
.comments .thread-toggle{cursor:pointer;display:inline-block}
.comments .comments-content .loadmore{cursor:pointer;max-height:3em;margin-top:0}
.comments .comments-content .loadmore.loaded{max-height:0;opacity:0;overflow:hidden}
.comments .thread-chrome.thread-collapsed{display:none}
.comments .thread-toggle{display:inline-block}
.comments .thread-toggle .thread-arrow{
display:inline-block;
height:6px;
width:7px;
overflow:visible;
margin:0.3em;
padding-right:4px;
}
.comments .thread-expanded .thread-arrow{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAc AAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent;
}
.comments .thread-collapsed .thread-arrow{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA AcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAAB JRU5ErkJggg==") no-repeat scroll 0 0 transparent;
}
.avatar-image-container{
display:inline;
margin-left:4px;
padding: 2px;
background:#FAC5D3;border: solid 1px #F9B6C8;
box-shadow: inset 1px 1px 0px #ffbfd0;
box-shadow:1px 2px 2px #fad5de;
border-radius: 1px;
width:40px !important;
height:40px !important;
max-width:36px !important;
max-height:36px !important;
-moz-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;opacity: 0.6; -webkit-transition: all 2s ease;
-moz-transition: all 2s ease; -o-transition: all 2s ease;
transition: all 2s ease;
-webkit-transition-duration: .90s;
transition-duration: .90s;}
.avatar-image-container:hover{
display:inline;
margin-left:8px;
padding: 2px;
background: #ebe7f9;border: solid 1px #e2dcf8;
box-shadow: inset 1px 1px 0px #D4E3E8;
box-shadow:1px 2px 2px #D4E3E8;
border-radius: 1px;
width:40px !important;
height:40px !important;
max-width:36px !important;
max-height:36px !important;
-moz-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;opacity: 1;
}
Y listo, das en 'Guardar plantilla'
Tenia tiempo si poner sin hacer un tutorial..
Espero les guste, y les allá funcionado. Si tienes algún problema en ponerlo, que no funciona déjame un comentario para poder ayudarte.

Bueno, esto fue todo.
Nos leemos~
[x]

10 comentarios:

  1. muy lindo estilo :)

    aqui tienes tu pedido hice tres, habia mucha imagen linda xD
    espero te gusten como quedaron, si quieres cambiar algo solo dime :)

    http://i.imgur.com/grZozhy.gif
    http://i.imgur.com/WyRzNuu.gif
    http://i.imgur.com/DN9GdoK.gif

    S A L U D O S !!

    ResponderEliminar
  2. Que lindos, me encantaron. Me gustan mucho los estilos de comentarios que publicas, seguro uso una para mi próxima plantilla.

    ResponderEliminar
  3. Hola!
    El modelo es precioso, me gustaron mucho los detalles del mismo.
    Gracias por compartir el tutorial.
    Besos

    ResponderEliminar
  4. hola de nuevo xD me di cuenta que me equivoque en el texto del boton con tanto pedido me confundi u.u aqui te dejo uno con el texto que ahora si creo es correcto, perdon por mi error. :)
    http://i.imgur.com/YpNHjFZ.gif

    ResponderEliminar
    Respuestas
    1. Ahaha, verda xD
      Tranquila^^, y gracias por acomodar unos de los botones, saludos! <33

      Eliminar
  5. ahhh que genial entrada!!!! sobre todo para las que estamos perfeccionando la personalización de nuestros blogs ! ya te sigo linda C: te dejo mi blog ;)

    Dream in Colors

    ResponderEliminar
    Respuestas
    1. Muchas gracias, me dice que se ha eliminado el blog :/ o algo así, gracias por tu comentario -u-

      Eliminar

¡Hey, gracias por leer la entrada!

Para que no tengas ningún problema/duda:

- Deja tu comentario referente a la entrada.
- Para las afiliaciones: ir a su sección (Afiliame/Afiliados)
- Comenta con respeto.
- No SPAM.
- No malas palabras.
- Respeta al administrador y a los usuarios del blog.
- Sí tienes problemas con un tutorial comenta o escríbeme a mi correo para ayudarte.
- Sí tienes algún problema conmigo, ya sea por créditos, derechos de autor o otro, escríbeme a mi correo.

- Símbolos:
☯♠♤♣♧ ♥♡♦♢♔ ★✖ ✗✘✌✿☽ ☾♩ ♪ ♫ ♬ ✧ ❝❞ ❀ ❄

- Emojis:
(>‿◠)✌ (✿◠‿◠) (▰˘◡˘▰) ( ͡° ͜ʖ ͡°) (≧∀≦) ( ˘ ɜ˘) (・w・)[̲̅$̲̅(̲̅ ͡° ͜ʖ ͡°̲̅)̲̅$̲̅] (ノ◕ヮ◕)ノ*:・゚✧ ( ͡° ʖ̯ ͡°) ( ͡° ᴥ ͡°) ヽ(゚▽゚*)乂(*゚▽゚)ノ

Recuerda dejar tu comentario + la URL de tu blog para poder visitarlo.
- (No cuenta como SPAM)

Sí te gusto la entrada no olvides seguir el blog, así no te pierdes ninguna entrada, actualizo cada semana o cuando pueda.

Contacto:
gladiuskagg@gmail.com

¡Saludos!

-Glad.