Deixando A Área Dos Comentários Personalizada
Nesta postagem trago um novo tutorial mostrando como eu personalizei o meu template com este código que eu irei compartilhar com vocês.
Eu personalizei de acordo com meu template, mas, fica a seu critério personalizar do seu jeito.
Veja: Os filmes mais esperados dos anos de 2014, 2015, 2016, 2017, 2018, etc.
Para colocar em seu blog é bem simples...
Entre em "Modelo" - "Editar HTML" e procure pela tag
Tendo encontrado a tag, cole ACIMA dela o seguinte código
]]></b:skin>Tendo encontrado a tag, cole ACIMA dela o seguinte código
/* COMENTÁRIOS PERSONALIZADOS */
.comments{
width:90% !important;/* tamanho da área do comentários, pode diminuir ou aumentar*/
margin:0 auto;
font: 1em normal "verdana"!important;
background:#fff !important/* cor de fundo */;
color:#fff;
border-radius:50px;
}
/*HEADING(1 comentario, 2 comentários...)*/
.comments h3,.comments h4{
width:98%;
padding:7px;
margin-bottom:10px;
color:#8B8B83; /* Cor do texto*/
font: 20px "verdana" !important;
}
/*BLOCO DOS COMENTÁRIOS*/
.comments .comment-block {
position:static !important; /* Mantém o Avatar na Frente */
background:#fff; /* Cor de fundo */
margin-left:28px;
padding:0 15px 5px 23px;
border-top:5px #540000 solid;
border-bottom-left-radius:30px;
border-bottom-right-radius:5px;
box-shadow:0 0 3px #aaa
}
.comments .comments-content .comment {
padding:20px 10px !important;
margin-bottom:15px !important
}
/* REFERENTE AO NOME DO COMENTADOR */
.comments .comments-content .user a,.comments .comments-content .user{
font-style:normal;
border:0;
color:#fff !important;
font: 22px "verdana";
background:#540000; /* cor de fundo */
padding:4px 36px;
margin-left:-8px;
border-bottom-right-radius:10px;
margin-top:-2px
}
/* ESTILO DATA E HORA */
.comments .comments-content .datetime a{
background: transparent !important;
font: 9px bold courier new;
float:right;
color:#aaa;
border:0 !important
}
/* ESTILO DO AVATAR */
.avatar-image-container {
position:absolute !important;
min-width:60px;
min-height:60px;
border:5px #540000 solid;
border-radius:60px;
padding:0 !important;
box-shadow:0 0 3px #febdc4;
margin-left:-9px !important;
margin-top:0 !important;
background:#fff;
overflow:hidden
}
.avatar-image-container img {
margin:0;
display:block;
max-height:60px;
min-height:60px;
max-width:60px;
min-width:60px;
padding:0 !important;
border-radius:60px;
border:0 !important;
overflow:hidden /* hack para evitar serrilhado na imagem */
}
/*TEXTO DO COMENTÁRIO*/
.comments p{
font:1em "sans-serif" !important;
text-shadow:0 0 !important;
padding-left:20px !important;
color:#000000 !important
}
/* REFERENTE AO BOTÃO RESPONDER DO SEGUNDO NÍVEL */
.comments .continue a {
background:#fff !important;
color:#777 !important;
float:right;
padding:2px 4px!important;
height:23px;
line-height:23px !important;
margin-top:-45px !important;
text-shadow:0 0 !important
}
/* REFERENTE AO BOTÃO RESPONDER DO PRIMEIRO NÍVEL */
.comments .comment .comment-actions a,.comments .continue a {
font:1em "helvetica" !important;
color:#fff;
padding:3px 6px;
border:0 !important;
line-height:30px;
margin:5px;
margin-left:10px;
text-shadow: 0 1px #999;
border-radius: .5em;
background: #540000;
font-weight:800;
box-shadow:inset 0 1px 2px #666
}
/* BOTÃO HOVER*/
.comments .comment .comment-actions a:hover,.comments .comments-content .user a:hover { text-decoration:none !important;
padding-bottom:4px
}
/* estilos para bloco de respostas */
.comments .comment-thread.inline-thread {
background-color:transparent !important;
padding:0.5em 1em;
border-radius:5px;
border:1px #ddd dashed !important
}
.comments .comments-content .comment-replies {
margin-top:1em;
margin-left:56px !important
}
.comments .continue {
border-top:0 !important
}
.comments .thread-toggle,.icon.blog-author {
display:none !important
}
/*estilos para formatação do texto dos comments*/
.comments .comments-content a{
color:#000;
padding-left:15px;
font-weight:400
}
.comments .comments-content em{
font:normal 12px 'segoe script';
color:#fff
}
.comments .comments-content b{
font:bold 11px 'arial';
color:#999;
text-shadow:0 0
}
.comments .comments-content strong {
margin:10px 0;
border:1px #fff solid;Tendo colado o código, basta salvar e pronto!!!
