Caso alguma imagem do blog não esteja aparecendo, por favor, avise nos comentários da postagem em questão!

18/05/2012

NOVO: Consertar a mensagem do Formulário de Comentários!!!

Lembram que na postagem da terça-feira, que ensina a personalizar os comentários no tipo incorporado à postagem eu disse: "Infelizmente ainda não tem jeito de consertar o bug que deixa a mensagem do formulário embaixo da caixa de comentários. Mas não se preocupem, estou investigando (e vocês sabem que quando eu investigo, eu acabo achando um jeito!)".
Adivinhem o que aconteceu??? EU ACHEI UM JEITO DE CONSERTAR ISSO!!! Depois de muito lutar e insistir, eu consegui!!!
Como estou me sentindo agora que consegui... Hehehe...

Desde que o Blogger adicionou a opção de responder comentários, vários erros apareceram nessa área. A maioria já estava consertada, apenas um erro irritante persistiu: o fato de que a mensagem (também conhecida como regras dos comentários) cismava de ficar na parte de baixo do formulário (a caixa onde escrevemos o comentário) quando era postado um ou mais comentários. No começo, isso só me incomodava levemente, mas desde segunda, quando comecei a personalizar os comentários, decidi declarar guerra à essa mensagem; e ela haveria de no final ficar em cima do formulário nem que fosse na marra!!! Ah ela ia!!!
Tentei muito na terça feira achar um código bom, mas minhas tentativas frustraram-se completamente.
Na quarta continuei mexendo e remexendo, mas só achei dois tutoriais que me ajudaram mas não muito, pois um deles ajudava a deixar a mensagem quando não tem nenhum comentário em forma de imagem e o outro deixava-a duplicada quando tinham comentários na postagem.
Então na quinta me veio a luz!!! Por que não juntar os dois tutoriais??? Tinha tudo para dar errado, mas para a minha surpresa deu certo!!!

O que nós vamos fazer é simples: vamos substituir a mensagem escrita por uma imagem e colocá-la em duas áreas do HTML, a primeira para quando não tiver comentário nenhum e a outra para quando já houver um ou mais comentários publicados. Se tudo der certo, suas regras dos comentários nunca mais vão sair de seu lugar original. Mas você tem que seguir à risca o tutorial a seguir, senão não vai dar certo.

Primeiros passos:

Antes de colocar o código, vamos fazer alguns preparativos preliminares muito importantes. Primeiro vá em Configurações > Postagens e Comentários (Configurações > Comentários no painel antigo) e copiar a atual "Mensagem do formulário de comentário". Cole no bloco de notas, ou no Word, ou em algum outro lugar. Depois apague-a e salve as alterações (não se esqueça de apagá-la).
Agora nós vamos fazer uma imagem que irá substituir essa mensagem. Para isso, basta tirar um PrintScreen da sua caixa de comentários, colar no seu editor de imagens, cortar apenas a caixa e fazer uma nova imagem na mesma largura (a altura pode ser diferente). É importante que você faça isso pois nem todos os templates tem a mesma dimensão. Faça essa imagem com fundo da mesma cor do seu blog ou transparente.
Agora pegue a mensagem que nós havíamos reservado (parece receita de bolo, não?) e coloque esse texto na sua imagem. Depois você pode enfeitar como quiser (coloque flores, borboletas, corações, unicórnios vomitando arco-íris, etc). Na minha primeira imagem eu coloquei uma borboleta voando, veja como ficou:


Agora hospede sua imagem no lugar de sua preferência. Eu usei o Google Sites, mas você pode hospedar no próprio Blogger, no Photobucket, num álbum do Facebook, no Imageshack, no Tinypic, etc.
Agora, entre em Modelo > Editar HTML (caixinha branca abaixo da miniatura do seu template), clique em qualquer ponto do seu HTML, aperte Ctrl+F e cole na caixinha que abriu (Search) o código: #comments h4 { e aperte a tecla "Enter".

Um trecho ficará em destaque. Substitua o que tiver dentro dos colchetes pelo código abaixo:

text-align: center;
display: block;
font-weight:bold; 

Vai ficar assim:

#comments h4 {
text-align: center;
display: block;
font-weight:bold;
  }

Agora procure por #comment-form, .comment-form { se tiver esse trecho no seu template, substitua todo ele (até fechar os colchetes) por:

#commnet-form, .comment-form{margin-bottom: 40px;}

Se não tiver, coloque o mesmo código em cima de ]]></b:skin> 

Colocando a imagem:

Ainda no código do seu template, procure por: <h4 id='comment-post-message'><data:postCommentMsg/></h4>
Substitua a parte em vermelho por <img src='URL_DAIMAGEM'/>
No lugar de URL_DA_IMAGEM coloque o endereço da imagem que acabamos de hospedar.

Por último, procure por: <script async='async' expr:src='data:post.commentSrc' type='text/javascript'/> e cole o código a seguir abaixo dele:

<script type='text/javascript'>
var ouy=document;
var regracima=ouy.createElement('style');
var recss='.comment-replybox-thread #comment-editor,.comment-replybox-single #comment-editor{background-image: url(URL_DA_IMAGEM);background-repeat: no-repeat;background-position:center top;padding-top:125px;}';
regracima.setAttribute('type','text/css');
if(regracima.styleSheet){
regracima.styleSheet.cssText=recss;
}else{
var oucss=ouy.createTextNode(recss);
regracima.appendChild(oucss);};
var ondcss=ouy.getElementsByTagName('head')[0];
ondcss.appendChild(regracima);
</script>

No lugar de URL_DA_IMAGEM coloque o mesmo endereço de imagem que usamos no código anterior. No trecho em vermelho, substitua o número 125 pela altura exata da sua imagem.
Visualize para ver se não der nenhum erro (não vai dar para ver diferença nenhuma na visualização). Se não der erro, Salve o Modelo.
Pronto!!! Agora a sua imagem ficará sempre localizada acima da caixa de comentários, tendo ou não comentários publicados!!!
Os tutoriais que me auxiliaram foram esse e esse.

Você também pode personalizar as cores do seu formulário de comentários, saiba como clicando aqui!!!

Mil Sweetkisses,
16 Comentários
Comentários

16 comentários:

  1. haha que bom que resolveu, você é como eu, não desiste até ver tudo certinho!!! uahsuash
    Parabéns!
    Beijos Pri.
    http://www.metamorfoseparalela.com.br/

    ResponderExcluir
  2. Ahh antes que eu esqueça copiei tua logo pra divulgar, tava sem divulgações decidi criar algumas rsrs
    Beijos!

    ResponderExcluir
  3. Aai, esse 'tutorial' era o que eu estava querendo! *-*

    Adorei o seu blog e principalmente as caveirinhas dos gadgets, super fofas! Estou seguindo, se puder dar uma passadinha no meu blog, eu ia amar!

    http://chicklitobsession.blogspot.com.br/

    ResponderExcluir
  4. hum interessante... sabia que você ia descobrir como em breve vou fazer no meu...kkkk segunda-feira mais precisamente....kkkkkkkk
    Sabe o q também não sei fazer, personalizar o comente pra não ficar poste um comentário onde esta esse tutorial eu sei q vc já deve ter feito...kkkkkkk

    beijos!
    http://simplismenteedanny.blogspot.com.br/

    ResponderExcluir
  5. Metida haha'
    brincadeira kkkkk não sei como consegue fazer sasparadas de html, eu tento tento teno e ão entendo nada .-.

    http://vitaminadepimenta.blogspot.com.br/

    ResponderExcluir
  6. Sheila tu é mesmo expert em computação, hein? Quem dera eu soubesse um por cento do que sabe seria uma racker.
    Vou aproveitar as dicas.
    Um xero!!!

    ResponderExcluir
  7. O que eu sofri pra descobrir isso, tudo porque não conhecia você.
    Agora antes passo aqui.

    Bjos!

    Cida

    http://www.moonlightbooks.net/

    ResponderExcluir
  8. Oiii flor ...
    Eu amei muito seu blog *---*
    e ja estou seguindo...

    Obrigada pela visita!
    siga o meu?
    http://ppumpitup.blogspot.com.br/

    Beijinhos ;*

    ResponderExcluir
  9. Sheila, essa era a minha dúvida e a da minha irmã! Nem precisa falar que ajudou, né? rs

    Seguindo de volta!

    Beijos,
    Caroline, do http//criticandoporai.blogspot.com

    ResponderExcluir
  10. Minha amiga é feraaaa... podem dizer... o que dizer do meu genioooo... rsrsrsrs... puxou a amiga aqui viu!!
    Kkkkkkkkkkkkk... brincadeira... eu amei que vc corrigiu, agora eu vou ver como arrumarei tempo pra fazer o novo lay do meu Blog... ideias... me falta ideias.
    Acho que vou fazer como vc disse na postagem de fazer template, vou fazer no papel e depois faço no pc... rsrsrsrs... Bjs amiga, vou terminar as coisas aqui em casa!!
    =D

    ResponderExcluir
  11. Oii amei teu blog o seguindoo hein!!!!!
    http>\\bnc-blogpopular.blogspot.com

    ResponderExcluir
  12. Oi Sheila, muito obrigada pelo contato =x mas sinto dizer que mesmo com o ponto e virgula não funcionou :( não sei o que está acontecendo todos os seus códigos funcionam SUPER bem no meeu blog =x

    Ah fora esse tenho outra dúvida... eu coloquei o balaozinho com numero de comentários do lado do titulo da postagem, e no final da postagem tem outro balaozinho indicando "comente aqui".
    O de cima (junto do post) atualiza o número de comentários mais se clicar não vai para os comentários. e o do fim da postagem vai, sabe me dizer porque?
    Obrigada mesmo pelo contato! sou sua fã >.<

    ResponderExcluir
  13. Lá venho eu te aperriar novamente rsrs (: a imagem tá no meu blog sim, só que ela fica quando não tem nenhum comentário.. ai quando alguém comenta ela sai... entendeu? =x
    tipo as postagens que tem 0 comentários ela aparece. ai só a primeira pessoa a comentar é que ver a mensagem de formulário =x

    ResponderExcluir
  14. Caramba esse deu trabalho... ufaa!!! mais conseguir... ebaaaaa

    ResponderExcluir
  15. Olá Sheila querida.
    Já são quase tres horas da manhã e desisto.
    Fiz tudo direitinho como minha prof manda e deu certo. Porém....
    a frase em vermelho"deixe um recado" não saiu. A mensagem que você diz para apagar, eu consegui tirar, a imagem eu consegui colocar, mas esta frase continuou lá. Então voltei a mensagem anterior até encontrar uma solução. Você pode ajudar?
    Um beijo nesse lindo coração.
    Fica com Deus!

    ResponderExcluir
  16. Amei...
    MUITO OBRIGADA...
    Realmente assim fica muito mais bonito...rsrsrsrs...
    Só que o meu não ficou centralizado qi nem o seu, vc usou uma omagem q vao de ponta a ponta???
    E a minha caixa de comentário não ocupou toda a largura da área do post.
    Mais tirando isso tá perfeito...

    To te seguindo, se puder e gostar do meu blog segue tbm...

    Bjuss...

    http://mimiycosmeticos.blogspot.com.br/

    ResponderExcluir

Related Posts Plugin for WordPress, Blogger...
Posts relacionados