Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Criação de Blogs Profissionais e Redes Sociais.

Tutoriais Blogger Vanessa S.

Personalizar texto "Postar um Comentário"

Por padrão no blogger quando vamos deixar um comentário em algum blog, acima do formulário de comentário (campo onde digitaremos a mensagem), aparece o texto: “Postar um Comentário”.

Mas há maneiras de personalizarmos este texto, e substituí-lo por outro texto, ou substituir todo o texto por uma imagem personalizada, ou incluir uma imagem para que ela apareça junto com o texto.

Para isto você deverá fazer algumas modificações no código HTML do seu template, e incluir alguns estilos.
Vejamos.

1) Para aplicar estilos ao texto padrão, como cores, background, tamanho da fonte, bordas etc:

Entre na aba Design, vá até o modo “Editar HTML”, marque a caixinha “Expandir modelos de widgtes” e procure pela tag ]]></b:skin>
e cole logo ACIMA dela:


h4#comment-post-message{
background:transparent url(URL-DA-SUA-IMAGEM) no-repeat left center;
color:#fff; /*coloque aqui cor da fonte*/
font-size:20px; /*coloque aqui o tamanho da fonte*/
height:27px;
line-height:27px;
padding:0 0 0 35px;
border:1px solid #fff; /*coloque borda se quiser*/
}


Salve as Modificações e visualize para ver como ficou. Depois é só ir configurando os estilos de acordo com o seu gosto.
Em 'background' coloque o endereço da imagem, caso queira acrescentar uma imagem juntamente com o texto, se não quiser incluir imagem, basta apagar esta linha.

2)Se quiser alterar o texto padrão:

Procure por:


<a name='comment-form'/>
<h4 id='comment-post-message'><data:postCommentMsg/></h4>
<p><data:blogCommentMessage/></p>

e substitua o trecho:<data:postCommentMsg/> pelo texto que vc quer.

Se no seu template a àrea de comentários já foi muito modificada, e você não conseguir liocalizar o código acima, tente localizar por:


<a name='comment-form'/>
<h3><data:postCommentMsg/></h3>


e substitua o trecho: <data:postCommentMsg/> pelo texto que vc quer.

Veja um exemplo configurado com uma imagem decorativa e o texto alterado:

3)Se quiser substituir todo o texto por uma imagem personalizada:

Substitua o trecho: <data:postCommentMsg/>
pelo código a seguir:


<img src="url-da-imagen"/>

Salve as modificações!

Não esqueça que se caso você preferir utilizar a opção de personalização de nº3, você deverá criar uma imagem sua e hospedá-la no seu site preferido.



De um play no vídeo abaixo e aprenda a Criar blogs Profissionais




Gostou deste artigo? Ajude nosso projeto.
Compartilhe em suas redes sociais nos botões abaixo:

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

| Website

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

Desculpe, os comentários deste artigo estão encerrados.

30 Comentários

  1. Fernanda disse:

    Então meu bem, tenho uma dúvida mortal… Gostaria muiiito de ter um designer de caixa de mensagens igual a sua, que precisa sde nome, e-mail e outras coisas mais! Se você puder me ajudar, ficarei muiiiiiiito grata contigo. Parabéns pela página, sempre que preciso de algo, encontro aqui! ^^

  2. Julio disse:

    Como coloco uma caixa de comentarios como esta em meu blog?

  3. Rebeldes Do Brasil disse:

    oi tentei fazer o de imagem mais não achei o texto que esta escrito lá

  4. .:: Clau ::. disse:

    Nova Nuno
    Esses trechos são padrões do blogger. Acho que para modificar a linguagem vc terá que modificar a linguagem do seu blog, ou colocar um tradutor no seu blog, assim o leitor pode traduzir todo o seu blog para a lingua que preferir.

  5. Nova Suno disse:

    Muito legal o blog!

    Uma dúvida: tem como modificar também os textos dos botões mais embaixo para uma lingua estrangeira? (Postar comentário, visualizar,Sair,Inscrever-se por e-mail, comentar como:

    grato

  6. Holtz disse:

    Vlw… Deu certinho ^_^

  7. Swallow disse:

    Só Posso dizer uma coiza Parabes \o/

  8. confissões de uma adolescente disse:

    oi, fiz tudo direitinho e salvei, mas quando fui ver, ñ tinha acontecido nada. o que eu faço?

  9. NUMINIS Eventos disse:

    Olá Clau,

    Estou com um template novo que está me dando dor de cabeça! rsrs

    Quando o baixei, não percebi que todos os botões estavam em inglês. Alguns consegui alterar para o português, outros não.

    Os que eu não consegui foram da parte do comentário: "leave a reply", "one response so far" e "read more".

    O problema é que, tentei seguir os passos que ensinou no tutorial, e não achei nenhum! Nem mesmo algo relacionado com h4, comments msg e os outros. No html, consegui achar somente a imagem de fundo, mas as letras não! O que faço??

    Agradeço a sua atenção e dedicação com nós leitores! Seu blog é excelente!

  10. .:: Clau ::. disse:

    Psicologia Academica
    Sugiro que vc utilize o Fórum Oficial do Blogger para reportar esse problema. Não tenho como te ajudar.

  11. Psicologia Academica disse:

    Olá eu meu blog esta aparecendo, tres mensagens, 0 Deixe um comentario:

    Postar um comentário

    POSTAR UM COMENTÁRIO

    Então eu fui e removi o pensei que isto iria retirar o 2 itens acima, mas não.
    Por gentileza gostaria que você me ajude.
    Desculpe-me mas estou começando, neste assunto de códigos HTML.
    Fico muito grato, pela ajuda!
    Abração

  12. Marcelo Souza disse:

    Verdade Clau. Achei super estranho quando mudei esse código mencionado e deu certo. Eu nunca tinha mudado ele, justamente por estar aparentemente não relacionado com a área de comentários.
    Obrigado.

  13. ::Clau:: disse:

    @Marcelo Souza:
    Que bom que deu certo…fico feliz que vc tenha conseguido solucionar essa questão.
    Tá vendo, não te falei que cada template é diferente do outros? Geralmente esta linha não fica perto de "body" como vc falou, mas no seu template estava =]
    Eu quem agradeço por sua presença aqui. Volte sempre!

  14. Marcelo Souza disse:

    Clau, eu te AMO!!!
    rsrs
    Caramba, nossa última tentativa mais que valeu.
    FINALMENTE consegui, graças a seu apoio.
    Segui a sua dica e tive uma idéia, baseada nela. Em um blog de testes, upei o modelo do template e substituí TODOS os códigos que estavam com a cor branca que você me indicou. Depois disso fui voltando uma a uma até encontrar a exata cor que mudava a área de comentários. E finalmente achei. Estava próximo de "body".
    Enfim, agora sim!
    MUITÍSSIMO obrigado Clau.
    Você é demais!
    Abração.
    No que precisar (não imagino como você possa precisar de mim) pode contar comigo.
    Mais uma vez obrigado!

  15. ::Clau:: disse:

    @Marcelo Souza:
    Nossa que estranho…sua áre de comentários deve estar bem modificada mesmo, ou é problema no seu template.
    Bom, então vamos a última alternativa, espero que esta dê certo:
    tente localizar no CSS do seu template algum código referente a h3 ou h4. Assim que localizar, verifique se há configuração pra cor de fonte no trecho que vc encontrou e veja se está definida a cor branca, que seria: color:#fffff;
    Se tiver cor branca, troque a cor pra outra que vc quiser, e faça o teste pra ver se modificou algo nessa parte.

  16. Marcelo Souza disse:

    Já li todos os tutoriais publicados aqui, mas nada Clau. Tentei voltar a parte de comentários para o "original" do template mínima, mas como você costuma ressaltar essa área costuma ser muito mudada.
    Ainda assim agradeço muito por tudo.
    Um dia eu consigo, ou não… rsrs
    Abração Clau.
    Valeu!

  17. .:: Clau ::. disse:

    @Marcelo Souza:
    Para mudar a cor da fonte nesta parte que vc quer (Postar um comentário)vc deve incluir os estilos que vc quer em h4#comment-post-message. Leia o item 1 do tutorial acima.
    Se quiser entender mais sobre a área de comentários, leia também:
    Desmembrando a área de comentários

  18. Marcelo Souza disse:

    Oi Clau!
    Dessa vez não consegui… 🙁
    Já tentei de tudo e não consigo mudar a COR da fonte que aparece nos comentários. Consegui mudar até o background (ficou preto agora). Isso ajudou e muito pois antes não era possível ler os comentários, que ficavam na mesma cor do background. Porém a mensagem do campo "Deixe um comentário", como esse seu, não aparece pois está na cor branca (a mesma do background). Já testei trocando várias cores, mas nenhuma aplica a esta parte.
    Você saberia como fazer pra mudar a COR da fonte que aparece nos comentários?

    No mais, obrigado por toda a ajuda dada até agora com seus maravilhosos tutoriais.
    Abração Clau.

  19. Monica Barcelos disse:

    Obrigado pela atenção ^.^ Eu entendi :/ eh realmente complicado mexer nessa área.

  20. ::Clau:: disse:

    @Moon:
    Para colocar isso teria que ser através de um tutorial explicando como faz, pq para quem não entende muito é um pouco complicado mexer na área de comentários. Eu ainda não preparei um tutorial tentando ensinar isso e outras coisas, pq a maioria dos templates possuem area de comentários muito "mexida" e diferente uns dos outros…e eu não consegui encontrar uma maneira que pudesse repassar essas informações de forma genérica, que pudesse ser aplicada em qualquer template.

  21. Monica Barcelos disse:

    Oie o/
    Amei suas dicas \o/
    So q eu to com uma duvida o.o…
    Como faz para por o nome de quem comentou e a data do comentário, dentro do quadradinho?

    Eu ja apliquei a borda, mas o nome de quem comentou e a data ficam de fora :/

    Poderia me ajudar?

  22. Das disse:

    \o/ Viva!!!!
    Você é 10!!!!!!!!!!!!!!!
    Valeu, querida!!
    Beijos!
    Dani

  23. ::Clau:: disse:

    @Das:
    Realmente, no seu blog não aparece nem a opção para deletar comentário do autor…Oo
    Nossa que estranho!
    Faz o seguinte:
    Procura por esse código:
    <dd class='comment-body'>
    e cole o código a seguir, logo abaixo dele, antes de </dd>

    <b:if cond='data:comment.isDeleted'>
    <span class='deleted-comment'><data:comment.body/></span>
    <b:else/>
    <p><data:comment.body/></p>
    </b:if>

    Depois, logo abaixo de <dd class='comment-footer'>
    cole este:

    <b:include data='comment' name='commentDeleteIcon'/>

    Veja se dá certo…=)

  24. Das disse:

    Oi, Clau! o/
    Nossa, fiquei muito feliz por ter gostado! Muito mesmo!
    Prometo não sumir mais! rsrsrs
    E sim, falo dessa 'lixeirinha'.
    A danada não aparece e não consigo excluir os comentários. Fiz um teste e tive que repostar pra poder desaparecer!
    O mais louco é que quando eu tava usando esse layout no teste, tudo funcionava direitinho, mas agora não!
    Quando tiver um tempinho, amiga, você pode dá uma olhada?
    Obrigada!

    Beijo grandão!
    Dani

  25. ::Clau:: disse:

    @DAS:
    Tb estava com saudades de vc…
    seu novo layout está lindo…adorei!
    Sobre o q vc perguntou..vc está se referindo aquele ícone da "lixeirinha" que aparece no final de cada comentário, é isso?

  26. Das disse:

    Oi, Clau! Saudades de vc!
    Voltei às visitas ao seu blog e às dúvidas pra tirar, também! rsrs
    Mudei o layout do meu blog, quando tiver um tempinho gostaria que desse uma olhada e dissesse o que achou, tá?
    Claro, dei créditos a você, que está sempre me ajudando!

    Minha dúvida: Não consigo apagar comentários.
    Suei um pouco, mas consegui fazer com que os avatares apareçam, é possível que eu tenha mudado algum código que não devesse?

    Obrigada!
    Beijos, amiga!
    Dani

  27. Lord V disse:

    olá bem legal essa dica, mais eu vim até aki para falar outra coisa. e a respeito do templeste red black 3 colunas.
    vc disse que tem um arquivo XML eu baixei o 'dalod'mais não salvou em pasta zipada eu enviei para a pasta zipada depois extrair e fui postar no blogsport só que não deu certo apareceu um monte de quadradinhos no lugar da letra do HTML… pode me ajudar? meu msn: lord.vampyre@hotmail.com

  28. .:: Clau ::. disse:

    @Dani:
    Eu não sei qual o código que vc conseguiu localizar no seu template, se for o que tem o <h3> </h3>
    tenta apagar esse trecho e substitui normalmente o "data:postCommentMsg/".

  29. Das disse:

    Clau, não consegui! =/
    Faço tudo direitinho… até já decorei de tanto tentar! ¬¬
    Eu queria só trocar o texto padrão (2), mas dá um erro toda vez!
    E tão simples, não é? E não consigo… =/

    Beijo, amiga!

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.