Caixa de comentários para blog - opção de resposta - Modelo 2 | Quero Dicas | Tutoriais para seu blogs


Caixa de comentários para blog - opção de resposta - Modelo 2


Hoje eu trouxe para vocês, mais uma caixa de cometários para seu blog com a opção de resposta. Quer ver o modelo 1? Então clique aqui

Todo mundo que tem um blog ou site, sabe da importância de ter comentários em suas postagens, pois fica claro, que seu trabalho e dedicação estão sendo valoriza dos pelo seus visitantes. Por este fato, espero que gostem do modelos que deixo para vocês darem "Aquela" personalizada nesta área. =D

Abaixo, é a imagem do modelo 2

Você poderá mudar fonte, cor e tamanho da imagem do avatar se quiser e é muito fácil aplicar.

  Tutorial

1  - Acesse o painel do seu blog. Vá em "Modelo" e em "Editar HTML"

2 - Tecle Ctrl + F e procure por: 

]]></b:skin>

3 - Acima dele cole o código abaixo:


/* Comentários www.querodicasde.com.br*/
.comments{
width:90% !important;  /* área do comentários*/
margin:0 auto;
 font: 1em normal "verdana"!important;
background:#fff  !important/* cor de fundo */;
color:#fff;
border-radius:50px;
}
/*HEADING
.comments h3,.comments h4{
width:98%;
padding:7px;
margin-bottom:10px;
color:#8B8B83;             /* Cor do texto*/
font: 20px "Algerian"  !important;
}
/*BLOCO*/
.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 #FFD700 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
}
/* estilos para o nome do autor  */
.comments .comments-content .user a,.comments .comments-content .user{
 font-style:normal;
border:0;
color:#DAA520 !important; /* cor do nome */ 
font: 40px  "Edwardian Script ITC";
background: ; /* cor de fundo */ 
padding:4px 36px;
 margin-left:-18px;
 border-bottom-right-radius:10px;
margin-top:-2px
}
/* estilo da data */
.comments .comments-content .datetime a{
 background: transparent  !important;
font: 10px bold  courier new;
float:right;
color:#aaa;
border:0 !important
}
/* estilo do avatar */
.avatar-image-container {
position:absolute !important;
min-width:50px;
min-height:50px;
border:3px #00C5CD solid; /* cor da borda */
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:47px;
min-height:47px;
max-width:47px;
min-width:47px;
padding:0 !important;
border-radius:60px;
border:0 !important;
overflow:hidden 
}
/*TEXTO DO COMENTÁRIO*/
.comments p{
font:1em "Arial" !important;
text-shadow:0 0  !important;
padding-left:20px !important;
color:#9C9C9C !important
}
/* botao responder 2° nível */
.comments .continue a {
background:#1E90FF !important; /* cor do botao*/
color: #FFFAFA  !important;
float:right;
padding:2px 4px!important;
height:20px;
line-height:23px !important;
margin-top:-25px !important; 
 text-shadow:0 0 !important
}
/* botao responder 1° nível */
.comments .comment .comment-actions a,.comments .continue a {
font:1em  "helvetica" !important;
color:#FFFAFA;
padding:3px 6px;
border:0  !important;
line-height:30px;
margin:5px;
margin-left:10px;
text-shadow:  0 1px #999;
border-radius: .5em;
background: #1E90FF; /* cor do botao*/
font-weight:800;
box-shadow:inset 0 1px 2px #666
}
/* botao 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:4px #20B2AA double  !important /* cor da borda*/
}
.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;

overflow:auto;
width:98%;
position:relative;
border-radius:10px;
box-shadow:0  0 5px rgb(199,198,166);
color:#000;
display:block;
padding:5px  12px;
text-shadow:0 1px #fff;
line-heigth:18px;
font-size:12px
}

  


4 - Agora personalize na com sua cor, salve e pronto! Sua caixa de comentários personalizada está feita! (Para personalizar, deixei escrito ao lado de cada código)
Tabela de cores - Flextool

Espero que tenham gostado e se gostou, deixe seu comentário! Beijinhos
Me Contrate!

6 comentários

Clique e deixe seu comentários
sábado, 14 fevereiro, 2015 ×

Gente que legal♥ Estou amando as dicas desse site. Ele está me ajudando muito! :)
Eu queria perguntar mais uma coisa, rsrs. Sabe a opção Linkwithin? Tem como personalizá-la para colocar no blog, em outros formatos? tipo, formato de coração?
Abraços!

Resposta
avatar
admin
sábado, 14 fevereiro, 2015 ×

Olá Sandreanny. Que bom que esteja gostando do site, isso me dá mais ânimo de postar cada vez mais...muito obrigada! Em relação ao LinkWithin, não entendi muito bem o que você deseja, mais acho que este tutorial possa te ajudar: Como personalizar o Widgets do LinkWithin "Postagens Relacionadas"

Resposta
avatar
admin
segunda-feira, 19 outubro, 2015 ×

Nossa, que lindo esse modelo, amei

Resposta
avatar
admin
segunda-feira, 19 outubro, 2015 ×

Que bom que gostou. Precisando de um blog personalizado, é só entrar em contato.
Beijinhos ♥

Resposta
avatar
admin
terça-feira, 19 janeiro, 2016 ×

Me ajudou muito! Obrigada :*

Resposta
avatar
admin
terça-feira, 19 janeiro, 2016 ×

Precisando é só pedir =D Claro, se eu puder ajudar.
Beijinhos ♥

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.