Follow Us @soratemplates

quinta-feira, 10 de julho de 2014

Personalizar Comentários do Blogger

Olá! Hoje trouxe um tutorial muito útil sobre como personalizar a área de comentários no Blogger, deixando uma aparência agradável ao leitor no espaço em que se comunica conosco. Testei o código nos modelos Travel e Simple. E para montar o primeiro código minha fonte foi o Papo Garota. Os demais são resultados da minha curiosidade
1. Para funcionar, antes de acrescentar os códigos, vá em Configurações - Postagens e Comentários - e escolha em Comentários - Local do Comentário a opção Incorporado.
2. Agora vá em Modelo - Editar HTML e acrescente antes de </b:skin>:
 #comments {
background: #fff;
padding: 10px;
width: 95%;
}
.comments h4 {
background: #fff;
color:#fcc !important;
text-align: center !important;
font-size:22px;
font-family: 'Petit Formal Script', cursive;
text-shadow: 1px 2px 3px #fcc;
border-bottom: 2px dashed #eee;
}
.comments .comment-block {
margin-left: 60px;
}
.comments .comments-content .comment-content{
margin-top: -8px;
position: relative;
background: #fff;
padding: 5px;
color: #ccc;
font-size: 12px;
}
.comments .avatar-image-container {
max-width: 50px;
max-height: 50px;
min-height: 50px;
min-width: 50px;
background: #eeffff;
padding: 5px;
margin-top: -15px;
}

.comments .avatar-image-container img{
max-width: 50px;
max-height: 50px;
min-height: 50px;
min-width: 50px;
margin-top: 0px;
}
.comment-header {
background: #eeffff;
border-bottom: 5px solid #fee;
padding: 5px;
}
.comment-header a {
color: #81E6FF !important;
text-shadow: 1px 2px 3px #fff;
font-size: 15px;
}
.comment-header a:hover {
color: #fff !important;
text-decoration: none;
border-bottom: 1px dashed #fff;
}
.comments .comments-content .datetime a{
font-size: 11px !important;
float: right;
}

.comments .comment .comment-actions a {
padding: 5px;
background: #eeffff;
color: #fcc !important;
margin-right: 10px;
}

.comments .comment .comment-actions a:hover {
background: #eeffff;
color: #ccc !important;
text-decoration: none;
border-bottom: 1px dashed #fff;
} 

Em que:
#comments { = área geral dos comentários;
.comments h4 { = título com número de comentários;
.comments .comment-block { = espaço entre a caixa do comentário e foto;
.comments .comments-content .comment-content{ = caixa do comentário;
.comments .avatar-image-container { = background da foto;
.comments .avatar-image-container img{ = foto;
.comment-header { = background do nome do autor do comentário;
.comment-header a { = texto do nome do autor do comentário;
.comment-header a:hover { = texto do nome do autor do comentário quando passa o mouse;
.comments .comments-content .datetime a{ = data;
.comments .comment .comment-actions a { = botões responder e excluir;
.comments .comment .comment-actions a:hover { botões responder e excluir quando passa o mouse.
Caso queira usar a fonte Petit Formal Script, cole isso antes de </head>:
<link href='http://fonts.googleapis.com/css?family=Petit+Formal+Script' rel='stylesheet' type='text/css'/>
Salve. Quando você for ver como ficou, pode acontecer de ainda ter que fazer algumas alterações em alguns trechos nas respostas:
 
No caso da imagem acima, é um modelo Simple, vamos mudar a imagem do lado do nome, tirar o background e a linha. Encontre /* Comments e substitua tudo o que houver nesse código até /* Accents, por isso:

 /* Comments
----------------------------------------------- */
.comments .comments-content .icon.blog-author {
  background-repeat: no-repeat;
  background: url("http://4.bp.blogspot.com/-ep5F3fGqOKY/UGnpjAPuiKI/AAAAAAAAFeo/K_5DdjuzRIA/s1600/tumblr_lw99pbqLZL1qcfn0j.gif");
}

.comments .comments-content .loadmore a {
border: none;
}

.comments .comment-thread.inline-thread {
  background: #transparent;
}

.comments .continue {
  border: none;
} 

Vai ficar assim (e você poderá trocar a url da imagem da My Melody por qualquer outra que quiser; os links ficarão da cor que definiu para seus links ou em a:link { ):
Já em um modelo Travel, poderia ocorrer isso:
Encontre /* Comments e substitua tudo o que houver nesse código até /* Widgets por:
 /* Comments
----------------------------------------------- */
#comments a {
  color: #fcc;
}

.comments .comments-content .icon.blog-author {
  background-repeat: no-repeat;
  background-image: url("http://4.bp.blogspot.com/-wnR_6JSmSEE/UGnpV3P15iI/AAAAAAAAFbQ/v_PUmizfQlk/s1600/tumblr_lnlbid3urQ1qcfn0j.gif");
}

.comments .comments-content .loadmore a {
  border: none;
}

.comments .comment-thread.inline-thread {
  background: $(post.background.color);
}

.comments .continue {
  border: none;
} 

Ficando assim (e você pode mudar a imagem da patinha de gato e cor dos links):
E ainda é possível mudar até a seta que fica ao lado de Respostas, que nem fiz no meu:
Para isso, acrescente também antes de /b:skin:
 .comments .thread-expanded .thread-arrow {
    background: url('URL-DA-IMAGEM') no-repeat scroll 0px 0px transparent;
    -moz-animation: alternate;
}
.comments .thread-collapsed .thread-arrow {
    background: url('URL-DA-IMAGEM') no-repeat scroll 0px 0px transparent;
}

Adicione uma imagem com tamanho 7x7 ou menor que 10px de largura. Espero que lhes seja útil.

11 comentários:

  1. Roberta,pode me tirar uma dúvida?? como você coloca esse negócio em baixo de comente com o facebook??

    ResponderExcluir
    Respostas
    1. São os comentários do Facebook; para isso tem que criar uma API no Face e depois inserir o plugin. Vou postar depois como isso é feito ok :3
      Bjus...

      Excluir
    2. aahhh e eu também não estou conseguindo mudar a seta dos comentários e também não estou achando outros tutos disso,me ajuda?

      Excluir
    3. Bom, essa forma que postei é a que uso...não conheço outras formas :( Nos templates nativos do Blogger que testei e até em alguns personalizados, deu certo. Tente de novo :)

      Excluir
  2. Roberta não quero que fique com o desenho da patinha do gato queria que ficasse sem como o teu como faço???

    ResponderExcluir
    Respostas
    1. Aí não precisa do código que tem essa imagem. Ou use uma imagem, por exemplo, um quadradinho pequenininho, da cor do plano de fundo dos nomes dos autores.

      Excluir
  3. É normal quando aparece o código no inicio do blog?

    ResponderExcluir
    Respostas
    1. o meu tbm ficou assim eu qeuria saber melhor como eu faço :/
      Roberta vc não poderia fazer um video para nos ensinar ? por favor ?

      Excluir
  4. Bonito blog olha o meu loucurasdabrina.blogspot.com

    ResponderExcluir
  5. Yup! Consegui depois de muita luta >w<
    Personalizei e estou apaixonada. Muito obrigada ^^

    ResponderExcluir

Muito obrigada por seu comentário e por sua presença! Ambos são super importantes para mim.

Apenas peço que:
- Comente a vontade, dê sua opinião, faça críticas, esclareça suas dúvidas e dê suas sugestões sobre o assunto referente às postagens;
- Use um vocabulário livre para todas as idades;
- Não ofenda ninguém em hipótese alguma.

Os comentários são moderados e não são permitidos comentários de pessoas que não se identifiquem. Algumas dúvidas podem ser previamente esclarecidas na F.A.Q, assim como créditos e outras coisas.

Por favor, entrem em contato por meio das redes sociais também para dúvidas, sugestões, pedidos ou outros:
Facebook - Twitter - Google+ - Deviantart