Modelo de comentarios #1

 

 ¡Hola! ¿que tal?

Aquí un modelo de comentarios, muy lindo, espero les guste.

Previa:

 Para tenerlo en nuestro blog, hacemos lo siguiente:

Plantilla | Editar HTML | CTRL + F

Buscas:

 /* Comments

Abajo de:

----------------------------------------------- */

Pegas este código:

#comments h4,
#comments .comment-author a,
#comments .comment-timestamp a {
color: transparent;
}
/* Comments ----------------------------------------------- */ @font-face { font-family: "silkscreen"; src: url('http://static.tumblr.com/0xqvkot/7jqmgsn0m/pf_arma_five.ttf'); } .comments{clear:both;margin-top:10px;margin-bottom:0;line-height:18px;font-size:13px} .comments .comments-content{margin-bottom:16px;font-weight:normal;text-align:left} .comments .comment .comment-actions a,.comments .comment .continue a{ display:inline-block; margin:0 0 10px 10px; padding:0 8px; color:#fff !important; /*--- cor da fonte do botão reply--- */
text-align:center;
text-decoration:none; background: #cedded; /*--- cor de fundo do botão reply--- */ height:26px; font-size:8px; /* Tamanho da fonte */ box-shadow: inset 0 0 5px #b3cfed, 0px 0px 2px #ededed; font-family: "silkscreen";  line-height:28px; font-weight:normal; cursor:pointer; -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; } .comments .comment .comment-actions a:hover,.comments .comment .continue a:hover { text-decoration: none; background: #ffbec9; /*--- cor de fundo do botão reply--- */ box-shadow: inset 0 0 5px #ffa2b2, 0px 0px 2px #ededed; } .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; RIGHT: 160PX; MARGIN:0; BACKGROUND-IMAGE: URL(http://i.imm.io/1h1fp.png);WIDTH:31PX;HEIGHT:30PX; } @font-face { font-family: "silkscreen"; src: url('http://static.tumblr.com/0xqvkot/7jqmgsn0m/pf_arma_five.ttf'); } .comments .comments-content .datetime a{ font-size:8px;font-family: "silkscreen"; text-decoration:none; color:#fff; text-shadow: 1px 1px 0px #ff99aa; float: right;/* -- cor do link da data do comentário -- */ } .comment-content{margin:0 0 8px;padding:0 5px; } .comments .comment-block{ margin-left:65px; margin-right:95px; background:#fff; /* -- cor de fundo do comentário -- */ border:1px solid #f0f0f0; /* --- cor da borda do comentário ---*/ } .comment-header{ /*--- linha onde fica o nome do autor do comentário --- */ background-color:#ffbec9; /*--- cor de fundo--- */ font-size:18px; border-bottom:1px solid #ff99aa; /*--- cor da borda --- */ box-shadow: inset 0 0 8px #ffa3b3; padding:7px; text-transform: uppercase; } @font-face { font-family: "laugh"; src: url('http://static.tumblr.com/vhsz9rv/zrcmruahi/livelaughlove.ttf');}.comment-header a{ color: #fff; /*--- cor do link nome do autor do comentario --- */ font-family: 'Economica', sans-serif; font-size: 22px; /* tamanho da fonte */ font-style: normal; font-weight: 300; text-shadow: 1px 1px 0px #ff99aa; } .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; } .avatar-image-container{ margin-left: 18px; border-radius:4px; float:left; vertical-align:middle; overflow:hidden; width:65px !important; height:51px !important; max-width:65px !important; max-height:51px !important} .comments .avatar-image-container img{ padding:2px; border:1px solid #e7e7e7; width:35px !important; height:35px !important ;max-width:45px !important; max-height:45px !important; border-radius:4px; -moz-transition: all  1s ease-out; -webkit-transition: all  1s ease-out; -o-transition: all  1s ease-out; -ms-transition: all  1s ease-out; transition: all  1s ease-out; } .comments .avatar-image-container img:hover{ opacity:0.7; -moz-transition: all  1s ease-out; -webkit-transition: all  1s ease-out; -o-transition: all  1s ease-out; -ms-transition: all  1s ease-out; transition: all  1s ease-out; }

 

Créditos: x

Eso es todo, espero les guste <3