- Bunny Crazy: Modelo para área dos comentários [003]

Uma das coisas que menos tenho aqui no blog são modelos de comentários, pois raramente eu mudo ou crio um modelo, geralmente só mudo as cores e pequenos efeitos e texturas, mas dando continuidade em trazer alguns modelos quais já usei. Hoje venho trazer um criado originalmente por Chuva de HTML, eu o utilizei no Layout Food.

~Modelo~

1. Vá até seu html e procure por <head>, ele fica bem no inicio do HTML em cima dele adicione o seguinte código:

Códigos

2. Agora, pela área de comentários, geralmente ela é demarcada com /*comments, ao achar apague toda essa parte e substitua toda a área própria pelo código seguinte:

Códigos

#comments { /*fundo da área de comentários*/
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHRl_SZ6kqcam5oHNs1ksUcuq9A8DkWcia-9mKUYgHIwXLN9vWnKCCOi2tG2YKvHLvxtoDrUcjsLpQ3_zUK0pJU-qsPiAePWMpEwKOY1TYZpYK8nrdfdfox7H_Ll4rgUsPvcyBoyFs5hs/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/AVvXsEijaQqrQ5o2L6bphh4r3slR1Hj9rJqVMFcKGmGOu8MuzjwD3AhAINHmCCZdQkTizQdwFvw8GyXyrA-aXl93DJLE1381SPQQ6f3evG7LbilvGHwyFXWGiZIv_i5P6cZc8phTej52kfPzaYg/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/AVvXsEijaQqrQ5o2L6bphh4r3slR1Hj9rJqVMFcKGmGOu8MuzjwD3AhAINHmCCZdQkTizQdwFvw8GyXyrA-aXl93DJLE1381SPQQ6f3evG7LbilvGHwyFXWGiZIv_i5P6cZc8phTej52kfPzaYg/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;
}

Salve e veja o resultado =)

30/07/2017

Modelo para área dos comentários [003]

Nenhum comentário:

Postar um comentário

Postagens mais visitadas