Hoje parece que estou incansável, mas na verdade, estou apenas a postar tutoriais que tenho guardados há imenso tempo >.< Desta vez trago um novo modelo para comentários, que usei num layout free chamado Small Planet, que podem pegar como base e editar à vontade (com os devidos créditos). Eu pessoalmente considero-o muito fofo, pela fonte, bordas e outline, além de que as cores são bem suaves, mesmo que vocês as possam mudar. Aproveitem ^^
Prévia:
Tutorial
Procure por <head> e adicione em cima:<link href='http://fonts.googleapis.com/css?family=Amatic+SC' rel='stylesheet' type='text/css'/>Agora, procure por: /*comments
Substitua toda a área própria pelo código seguinte:
#comments { /*fundo da área de comentários*/
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglmIrdl6ZcfcBdpsWuQ1J22yXxCVvCgE9l6wSMcXneUtvArqPH9LtwUuS8ahkn98w6P5BPsE2Dag3rYlfNv2BpI_22PIXPJA6loJYp8IviPwDIvcH14i7v3bmVbCPh60JFikEx9ucdYjPi/s1600/forumfundocorcinza20b.png) repeat;
padding: 5px;
}
h4 { /*texto X comentários*/
padding: 5px;
background: #ebe5da;
text-align: center;
font-size: 13px;
outline-offset: -4px;
outline: 1px dashed #c9bead;
}
.comments .comment-block { margin-left: 70px;}
.comments .comments-content .comment-content { /*caixa de comentários*/
margin-top: -5px;
position: relative;
background: #edebc7;
border: 1px solid #ffffff;
padding: 10px;
color: #9c985c;
font-size: 11px;
border-radius: 5px;
-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;
}
.comments .comments-content .comment-content:hover { /*caixa de comentários*/
background: #f4f5e4;
border-radius: 20px;
-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;
}
.comment-header { /*título do autor*/
color: #807569;
padding: 5px;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiC4pi-H8BAchXwOJKZiDQQvk-EBDkVshS_yC4pZKJGRmrYvy71nWsFNa0fGX9qHuhPicRxqNFbcY07DUT5FdgkC2plRnSDhFLMHSn0YwMOy4TFBLuc7Td4tkw4JJ3suBUOc1Nlga6XezS/s1600/Have+Things.png);
outline-offset: -4px;
outline: 1px solid #fff;
border: 1px solid #b0a496;
}
.comment-header a {
color: #807569 !important;
font-size: 20px;
font-family: Amatic SC;
font-weight: normal;
text-shadow: 1px 1px 1px #fff;
}
.comment-header a:hover {color: #a89d76 !important;}
.comments .comments-content .datetime a {
font-size: 10px !important;
float: right;
line-height: 16px;
font-family: muli;
}
.comments .comment .comment-actions a { /*botões de responder*/
padding-right: 5px;
float: right;
font-size: 14px;
color: #b39794 !important;
font-weight: normal;
text-shadow: 1px 1px 1px #fff;
background: #fff;
padding: 1px 5px 1px 5px;
}
.comments .comment .comment-actions a:hover {
font-style: normal !important;
text-decoration: none;
}
.comments .continue a { /*botão de adicionar comentário*/
font-size: 12px;
color: #cfcc93 !important;
font-weight: normal;
text-shadow: 1px 1px 1px #ffffff;
-moz-text-shadow: 1px 1px 1px #ffffff;
float:left;
padding:3px !important;
margin-right: 10px !important;
}
.comments .continue a:hover {
font-style: normal !important;
color: #c7b0ad !important;
text-decoration: none;
}
.comments .avatar-image-container { /*avatar*/
max-width: 50px;
max-height: 50px;
min-height: 50px;
min-width: 50px;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiC4pi-H8BAchXwOJKZiDQQvk-EBDkVshS_yC4pZKJGRmrYvy71nWsFNa0fGX9qHuhPicRxqNFbcY07DUT5FdgkC2plRnSDhFLMHSn0YwMOy4TFBLuc7Td4tkw4JJ3suBUOc1Nlga6XezS/s1600/Have+Things.png);
padding: 5px;
outline-offset: -3px;
outline: 1px dashed #c9bead;
}
.comments .avatar-image-container img{
max-width: 50px;
max-height: 50px;
min-height: 50px;
min-width: 50px;
}
Eu tenho muita dificuldades com duas coisas quando faço Layouts: Comentários e menu pra afiliados, quando eu faço dupla com o Rih, ele sempre desenrola pra mim uns comentários bons até, mas o menu de afiliados... Nossa, eu acho que esse menu foi feito pelo diabo, nunca sei onde colocar os afiliados... Tipo, nunca mesmo, coitados sempre ficam por último quando faço um lay. Mas não é só pela dificuldade em si, e sim porque nunca me parece original o suficiente, isso é uma lástima!
ResponderEliminarEnfim, não sei porque comecei uma conversa sobre afiliados, já que esse post é sobre comentários, o seu modelo está bom, porém acho que se fosse meu, talvez aumentaria o espaço entre os botões "eliminar" e "responder"
Diário de uma Otome
Realmente o post é sobre comentários e você começou a falar de afiliados >///< Aliás, sou capaz de ter alguns modelos úteis para isso por aqui, postados ou ainda por postar. Originalidade é mesmo a parte mais difícil, desde que eu atinei com um modelo próprio meu que mistura vários tutoriais populares antigamente, tenho tipo uma dificuldade desgraçada em desapegar-me nele e quebrar a cabeça para inventar algo novo mas igualmente complexo.
EliminarSe você quiser pegar, sinta-se à vontade para aumentar o espaço, acho que a área respetiva está indicada no código, então não deverá ser difícil.