Caixa de comentários personalizada para blog - Opção de resposta | Quero Dicas | Tutoriais para seu blogs


Caixa de comentários personalizada para blog - Opção de resposta


Caixa de comentários personalizada para blog -  Opção de resposta
Os comentários dos visitantes em um blog ou site, são a alma do nosso projeto. É por eles que sabemos se estamos agradando ou não, com as nossas postagens.

Quanto mais comentários dão, mais respostas em agradecimento são enviadas por nós. Por isso, nada melhor que dar um visual diferente e atrativo para ambas as partes.

Hoje eu trouxe para vocês uma das maneiras de personalizar a sua caixa de comentários.

Veja na imagem como poderá ficar.



   TUTORIAL


1 - Primeiro faça um backup do seu template. Caso dê algum erro ou você queira voltar ao estado anterior. Não sabe fazer um backup do seu template? Não tem problema, veja este tutorial.

2 - Acesse o painel do seu blog. Vá em Modelo, Editar HTML e procure por:

 ]]></b:skin> 
 

3 - Quando encontrá-la, acima dela cole o código que está abaixo

.comment-block {
background: #FFFFFF; /* COR DO FUNDO */
border: 1px solid #CCC; /* COR DA BORDA */
margin-bottom: 20px;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px; /* BORDA */
}
.comments .comment-thread.inline-thread {
background-color: #FFC0CB; /* COR DA CAIXA DE RESPOSTA */
border-left: 2px SOLID #333; /* BORDA DA CAIXA DE RESPOSTA */
border-radius: 10px; 
}
.comment-content {
padding: 3px 15px 15px 15px;
color:#000000; /* COR DA FONTE DOS COMENTÁRIOS */
}
.datetime a {
font-style: NORMAL;
font-size: 11px; /* TAMANHO DA FONTE DA DATA*/
margin-left: 80px; 
}
.comments .comments-content .user a{
color:#FF00FF; /* COR DO NOME DO AUTOR */
font-size: 16px; /* TAMANHO DA FONTE */
padding-left: 14px;
font-weight: bold;
text-decoration:none;
} 
.comments .comment .comment-actions a,.comments .comment .continue a{
display:inline-block; 
margin: 0px 0px 10px 10px;
padding:0 15px; 
color: #FFFFFF; /* COR DO LINK */
text-align:center;
text-decoration:none;
background: #FF69B4; /* COR DO CAIXA */
border: 2px solid #C2C2C5; /* COR DA BORDA */
border-radius: 4px; /* ARREDONDAMENTO */
height: 25px; 
line-height:25px;
font-weight:normal;
cursor:pointer; 
}
.comments .continue {
border-top: 0px solid #000;
}
.comments .comments-content .icon.blog-author {
background-image: none;
margin-left: -10px;
}
.comments .avatar-image-container{
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
width: 40px;
max-height: 40px;
padding: 1px;
}
.comments .avatar-image-container img{
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
max-width: 40px;
height: 40px;
}

.comment-block {
border-bottom: 4px solid #DDA0DD; /* COR DA BORDA */
}
.comments .continue {
border-top: 0px solid #DDA0DD; /* COR DA BORDA */
}

 
4 - Agora personalize do seu jeitinho. Eu deixei ao lado de cada código, onde você poderá personalizar.

5 - Salve e Pronto! Sua caixa de comentários está personalizada.

Espero que tenha gostado. E não se esqueça de deixar seu comentário! 
Beijinhos
Me Contrate!


5 comentários

Clique e deixe seu comentários
sexta-feira, 30 janeiro, 2015 ×

Meu Blog tá com um problema, não importa o código que eu coloque ele fica sem o botão de responder :/
Pode me ajudar?


www.nascinaepocaerrada.com.br

Resposta
avatar
admin
sexta-feira, 30 janeiro, 2015 ×

Oi Natany, altere margin-bottom: 20px; ou -moz-border-radius: 5px;
-webkit-border-radius: 5px; para ver se você consegue visualizar. Qualquer duvida, comente! =D

Resposta
avatar
admin
quinta-feira, 12 fevereiro, 2015 ×

Obrigada por essa dica maravilhosa. Me ajudou bastante no meu blog. Queria poder mudar a cor da caixinha dos cometários, sem ser um modelo pronto, e conseguir! Fiquei muito feliz! Queria fazer outra pergunta: posso colocar desenhos no plano de fundo da caixinha, tipo corações, fleres, etc?
Abraços♥

Resposta
avatar
admin
sexta-feira, 13 fevereiro, 2015 ×

Olá Sandreanny, que bom que gostou, você me deixa muito feliz com seu comentário. Espero que ache muito mais coisas para você aqui no site e se não achar, pode pedir! :-bd

Bom, em relação a sua pergunta; Eu nunca testei fazer dessa forma, mais o código em questão é você trocar background-color: #FFC0CB; por background: url ('IMAGEM') repeat;
Caso queira trocar só na pergunta troque somente a 1º se quiser na responta troque só a 2º e se quiser nas duas faça nas 2. Espero que tenha intendido! Beijinhos ♥
Se tiver algo mais é só perguntar =D

Resposta
avatar
admin
sexta-feira, 13 fevereiro, 2015 ×

Oi, sou eu novamente, rsrs. Muito obrigada pelas suas dicas. Vou testar aqui para ver como fica. :)
Muito obrigada mesmo, suas dicas são maravilhosas e sempre me ajudam!
Ah sim, já estou te seguindo.
Abraços♥

Resposta
avatar
admin


Que bom você reservou um tempinho para vir comentar. Você me deixa super feliz e desde já agradeço por sua colaboração.

Comente. Mais peço que leia antes:

1 - Devido a falta de tempo, não prometo responder a todos os comentários. Mais farei o possível.

2 - Educação sempre! Comentários com xingamentos entre outros, não serão publicados ou respondidos.

3 - Comentários não relacionados ao titulo, não serão publicados.

4 - Comentários somente URLs de terceiros, não serão publicados.

♥ - Caso queira divulgar seu blog gratuitamente, Acesse, Galeria de Blogs
♥ - Eu terei o maior prazer em colocar o link ou seu banner nesta galeria.

Muito obrigada por seu comentário e por sua vista.
Beijinhos ♥
Abrir Conversa em CódigoFechar Conversa em Código Abrir EmoticonFechar Emoticon

Obrigada por seu comentário! Ele é muito importante para mim.