Mais um código CSS para personalizar a área de comentários do Blogger. Esse é bem cute mas poderá ser modificado livremente por você, bastando fazer alterações nos códigos.
Procure por <b:skin>...</b:skin>
Abaixo dele, cole o próximo código:
<style>
/*Comentários personalizados------------------------------------*/
#comments h4, #comments .comment-author a, #comments .comment-timestamp a {
color: #FFD7DD;
font-family: reina;
font-size: 18px;
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3dX-d75jTmGqU6Zd6XkNVTfFdwESuWs68zs160aQRJ0vOkHreGpIBHKvjhS6W8Stg7l8tDcunBzZp9SapxoD_WMSZkWBRf5hu_pXjkdw19r_GczuCCG3CXo87N6wGbU7KHmtJOQfuqwY/s1600/COMENT1.png') no-repeat left;
height: 46px;
line-height: 46px;
padding-left: 60px;
font-weight: normal !important;
}
#comments {
background: white none repeat scroll top center;
padding: 15px;
}
.comments .comment-block { margin-left: 70px;}
.comments .comments-content .comment-content{
margin-top: -5px;
position: relative;
background: #FFD7DD;/*cor de fundo do texto dos comentários*/
border: 1px solid #e4e2e2;
padding: 10px;
color: #000;/*cor do texto do comentário*/
font-size: 11px;
}
.comment-header {
color: #EDA3AF;
padding: 5px;
background: #FFD7DD;
background: -moz-linear-gradient(top, #FFD7DD 0%, #F3B9C3 99%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4b2512), color-stop(99%,#2d130b));
background: -webkit-linear-gradient(top, #4b2512 0%,#F3B9C3 99%);
background: -o-linear-gradient(top, #FFD7DD 0%,#F3B9C3 99%);
background: -ms-linear-gradient(top, #FFD7DD 0%,#F3B9C3 99%);
background: linear-gradient(to bottom, #FFD7DD 0%,#F3B9C3 99%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFD7DD', endColorstr='#F3B9C3',GradientType=0 );
outline-offset: -3px;
outline: 1px dashed #fff;
}
.comment-header a {
color: #000 !important;/*cor do nome comentarista*/
font-size: 14px;
font-weight: normal;
text-shadow: 1px 1px 1px #1f0f07;
-moz-text-shadow: 1px 1px 1px #1f0f07;
}
.comment-header a:hover {
color: #fff !important;}
.comments .comments-content .datetime a{
font-size: 10px !important;
float: right;
line-height: 16px;}
.comments .comment .comment-actions a {
padding-right: 5px;
float: right;
font-family: basically;
font-size: 14px;
color: #FFD7DD !important;
font-weight: normal;
text-shadow: 1px 1px 1px #d7d7d7;
-moz-text-shadow: 1px 1px 1px #d7d7d7;
}
.comments .comment .comment-actions a:hover {
font-style: normal !important;
color: #EDA3AF !important;
text-decoration: none;}
.comments .avatar-image-container {
max-width: 50px;
max-height: 50px;
min-height: 50px;
min-width: 50px;
background: #FFD7DD;/*cor de fundo do avatar*/
padding: 5px;
outline-offset: -3px;
outline: 1px dashed #fff;
}
.comments .avatar-image-container img{
max-width: 50px;
max-height: 50px;
min-height: 50px;
min-width: 50px;
}
.comments .continue a {
font-family: basically;
font-size: 14px;
color: #EDA3AF !important;
font-weight: normal;
text-shadow: 1px 1px 1px #d7d7d7;
-moz-text-shadow: 1px 1px 1px #d7d7d7;
float:right;
padding:3px !important;
margin-right: 10px !important;
}
.comments .continue a:hover {
font-style: normal !important;
color: #EDA3AF !important;
text-decoration: none;}
</style>
Quais as cores posso colocar? quantas opções tenho?
ResponderExcluirComo faço para colocar um avatar nos comentário anonimos?
ResponderExcluirNão deu certo...que pena :(
ResponderExcluirIa super combinar com o meu blog.
http://reviewinmakeup.blogspot.com.br/
aposto que é de maquiagem
ExcluirObrigada...Super funcionou ;)
ResponderExcluir