sexta-feira, 5 de agosto de 2011

Cute emoticons nos comentários

HoOy gente! Como todo mundo já sabe eu adoro dar dicas para deixar seus bloguitos mais cutes e personalizados <3 
Então hoje vou ensinar vocês como colocar esses emoticons acima super fofos na área dos seus comentários. É uma maneira de seus leitores se expressarem mais na hora de comentar, sem falar que é muiito cute.

É fácil mais precisa prestar bastante atenção para não errar. Caso contrário o código não irá funcionar. 

Lembre se, as alterações feitas na área dos comentários não é possivel visualizar antes de salvar então eu aconselho que você baixe seu modelo ou copie o código dele em algum bloco de notas, caso algo dê errado.

clique em Mini gif 58leia maisMini gif 58 e confira o post completo.

vá no seu HTML marque a opção ''Expandir modelos de widget " dê um CTRL   F na barra de pesquisa que apareceu pesquise por:                            </body> 

cole o código abaixo antes do código destacado(</body>)

<script type='text/javascript'>
//<![CDATA[
a = document.getElementsByTagName('LABEL');
if(a) {
for(i=0; i < a.length; i++) {
_str = b.item(i).innerHTML.replace(/:a:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-001.gif' alt='' class='smiley'/>");
_str = _str.replace(/:b:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-005.gif'' class='smiley'/>");
_str = _str.replace(/:c:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-009.gif' alt='' class='smiley'/>");
_str = _str.replace(/:d:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-013.gif' alt='' class='smiley'/>");
_str = _str.replace(/:e:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-014.gif' alt='' class='smiley'/>");
_str = _str.replace(/:f:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-020.gif' alt='' class='smiley'/>");
_str = _str.replace(/:g:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-018.gif' alt='' class='smiley'/>");
_str = _str.replace(/:h:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/emo-girl-001.gif' alt='' class='smiley'/>");
_str = _str.replace(/:i:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/emo-girl-002.gif' alt='' class='smiley'/>");
_str = _str.replace(/:j:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/emo-girl-005.gif' alt='' class='smiley'/>");
_str = _str.replace(/:k:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/emo-girl-007.gif' alt='' class='smiley'/>");
_str = _str.replace(/:l:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/emo-girl-009.gif' alt='' class='smiley'/>");
_str = _str.replace(/:m:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/emo-girl-008.gif' alt='' class='smiley'/>");
_str = _str.replace(/:n:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/emo-girl-012.gif' alt='' class='smiley'/>")


a.item(i).innerHTML = _str;
}
}

a = document.getElementById('comments');
if(a) {
b = a.getElementsByTagName("DD");
for(i=0; i < b.length; i++) {
if (b.item(i).getAttribute('CLASS') == 'comment-body') {
_str = b.item(i).innerHTML.replace(/:a:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-001.gif' alt='' class='smiley'/>");
_str = _str.replace(/:b:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-005.gif'' class='smiley'/>");
_str = _str.replace(/:c:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-009.gif' alt='' class='smiley'/>");
_str = _str.replace(/:d:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-013.gif' alt='' class='smiley'/>");
_str = _str.replace(/:e:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-014.gif' alt='' class='smiley'/>");
_str = _str.replace(/:f:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-020.gif' alt='' class='smiley'/>");
_str = _str.replace(/:g:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-018.gif' alt='' class='smiley'/>");
_str = _str.replace(/:h:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/emo-girl-001.gif' alt='' class='smiley'/>");
_str = _str.replace(/:i:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/emo-girl-002.gif' alt='' class='smiley'/>");
_str = _str.replace(/:j:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/emo-girl-005.gif' alt='' class='smiley'/>");
_str = _str.replace(/:k:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/emo-girl-007.gif' alt='' class='smiley'/>");
_str = _str.replace(/:l:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/emo-girl-009.gif' alt='' class='smiley'/>");
_str = _str.replace(/:m:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/emo-girl-008.gif' alt='' class='smiley'/>");
_str = _str.replace(/:n:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/emo-girl-012.gif' alt='' class='smiley'/>")
b.item(i).innerHTML = _str;
}
}
}

a = document.getElementById('comments');
if(a) {
c = a.getElementsByTagName("DD");
for(i=0; i < c.length; i++) {
if (c.item(i).getAttribute('CLASS') == 'owner-Body') {
_str = b.item(i).innerHTML.replace(/:a:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-001.gif' alt='' class='smiley'/>");
_str = _str.replace(/:b:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-005.gif'' class='smiley'/>");
_str = _str.replace(/:c:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-009.gif' alt='' class='smiley'/>");
_str = _str.replace(/:d:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-013.gif' alt='' class='smiley'/>");
_str = _str.replace(/:e:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-014.gif' alt='' class='smiley'/>");
_str = _str.replace(/:f:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-020.gif' alt='' class='smiley'/>");
_str = _str.replace(/:g:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-018.gif' alt='' class='smiley'/>");
_str = _str.replace(/:h:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/emo-girl-001.gif' alt='' class='smiley'/>");
_str = _str.replace(/:i:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/emo-girl-002.gif' alt='' class='smiley'/>");
_str = _str.replace(/:j:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/emo-girl-005.gif' alt='' class='smiley'/>");
_str = _str.replace(/:k:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/emo-girl-007.gif' alt='' class='smiley'/>");
_str = _str.replace(/:l:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/emo-girl-009.gif' alt='' class='smiley'/>");
_str = _str.replace(/:m:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/emo-girl-008.gif' alt='' class='smiley'/>");
_str = _str.replace(/:n:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/emo-girl-012.gif' alt='' class='smiley'/>")
c.item(i).innerHTML = _str;
}
}
}
//]]>
</script>


Em seguida localize o seguinte trecho :      
 <p class='comment-footer'> 
                      <b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>
</b:if>
</p> 
                         
cole o código abaixo após o código destacado (<p class='comment-footer'>)

<div style='-moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; width: 200; text-align: center; border: 0px solid #90be35; padding: 5px; background: #ffffff; height:350'>
<b>
<img border='0' height='30' src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-001.gif' width='30'/> :a:
<img border='0' height='30' src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-005.gif' width='30'/> :b:
<img border='0' height='30' src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-009.gif' width='30'/> :c:
<img border='0' height='30' src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-013.gif' width='30'/> :d:
<img border='0' height='30' src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-014.gif' width='30'/> :e:
<img border='0' height='30' src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-020.gif' width='30'/> :f:
<img border='0' height='30' src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-018.gif' width='30'/> :g:
<img border='0' height='30' src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/emo-girl-001.gif' width='30'/> :h:
<img border='0' height='30' src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/emo-girl-002.gif' width='30'/> :i:
<img border='0' height='30' src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/emo-girl-005.gif' width='30'/> :j:
<img border='0' height='30' src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/emo-girl-007.gif' width='30'/> :k:
<img border='0' height='30' src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/emo-girl-009.gif' width='30'/> :l:
<img border='0' height='30' src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/emo-girl-008.gif' width='30'/> :m:
<img border='0' height='30' src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/emo-girl-012.gif' width='30'/> :n:
</b>
</div>


Salve e vá conferir se deu certo!


para este código funcionar corretamente a  Posição do formulário de comentários deve estar na opção Postagem abaixo incorporada


para fazer isso vá no seu painel > detalhes > comentários.  e procure por Posição do formulário de comentários selecione a opção  Postagem abaixo incorporada.


Gente testei esse código em três Layouts inclusive o meu, apenas um não deu certo !! Caso dê incompatibilidade com seu layot , aconselho testar esse código novamente apenas quando você renovar o template.

Espero que gostem Bye Bye

92 comentários :

  1. aaa consegui ! huashuas .. fico otimo o post amiga Bjaooo : k:

    ResponderExcluir
  2. Ah q linduuuuuuuuus
    Bom fds!
    by: Veve Pink
    http://portal-pattys.blogspot.com

    ResponderExcluir
  3. Da um ar super cute com esses botãozinhos.
    Tô te seguindo.
    Visita e comenta?
    http://girlteen-s2.blogspot.com/

    ResponderExcluir
  4. Super cute *-*

    http://tecido-doce.blogspot.com/
    http://cerejadeneve.wordpress.com/

    ResponderExcluir
  5. Muito fofo, valeu pela dica! Bju xanda
    http://xandanatura.blogspot.com/

    ResponderExcluir
  6. O meu nem foi :i: poooxa.:(
    garotassuperfashions.blogspot.com

    ResponderExcluir
  7. Jackie não funcionou no meu eu fiz tudo cetinho,
    será que é porque eu uso o modelo Travel do blogger?
    se poder me ajudar fofa agradeço, meu email
    liss.baba@yahoo.com.br

    ResponderExcluir
  8. @b aliceGuria, realmente não sei pq não funcionou. Esse código é meio chatinho mesmo viu! tente fazer denovo quando vc for mudar seu lay :h:
    Beeeeeeijos

    ResponderExcluir
  9. Num deu certo no meu...
    outro dia eu tento, =D
    beijooooos

    ResponderExcluir
  10. :j: o meu naum deu certo também!!! :i:

    ResponderExcluir
  11. Om eu não tinha o código body
    mas tudo bem eu adoro meu blog e não tem por que ficar triste!
    Obrigado mesmo assim pelas dicas jackie arassou como sempre!
    Bjin lu ♥
    www.mymundinhocolorido.blogspot.com
    :l:

    ResponderExcluir
  12. Adoreiiiiiiiii, mais fácil do que eu imaginava rs. Vou ver se coloco no meu, mais com emoticons diferente que eu separei aqui. Obrigada por compartilhar flor. Bêzo

    ResponderExcluir
  13. tipo deu meio certo, mas quando eu escrevo por exemplo :n: não aparece o emoticon e sim ':n' :/
    cherry-miint.blogspot.com

    bjoos

    ResponderExcluir
  14. @Nathália Que pena guria! Olha esse código é meio chatinho mesmo!

    ResponderExcluir
  15. Put's fiz tudo certo mas no meu não rolou, sempre que tento incrementar algo na área dos comentários do meu blog não rola. :i:

    ResponderExcluir
  16. Pooooots o meeeu sempre que teento n consigoo, mais valeu do mesmo jeeito amei seeu blog

    www.coisa-de-pre-adolescente.blogspot.com

    entraa? valw :h:

    ResponderExcluir
  17. jakie eu ja tentei mais de 5 vezes o meu modelo e simples me ajuda e se eu te dar permissoes no blog vc pode colocar pfpfpfpfp?
    http://ffernandacardozo.blogspot.com

    ResponderExcluir
  18. Brigado Jackie, o meu deu certinho, na segunda tentativa...
    Beijinhos...
    http://garotaa-popstar.blogspot.com
    :l:

    ResponderExcluir
  19. jackie amo seu blog, ótimo tuto , hein ?

    :e:

    ResponderExcluir
  20. Jackie lindona!
    Perdoe minha burrice. rs

    Deu tudo certo com os códigos,
    agora me diga onde eu encontro isso: "para fazer isso vá no seu painel > detalhes > comentários. e procure por Posição do formulário de comentários selecione a opção Postagem abaixo incorporada."

    Mil Beijos
    http://maquiadatoda.blogspot.com.br/

    ResponderExcluir
  21. O 2° código não deu certo :n:

    http://patricinhasdorock2.blogspot.com

    ResponderExcluir
  22. serto jackie olha eu sou a dona do garota fashion star! Não vou fazer isso hj mais vou fazer quando der naum tenho tempo tenho q estudar e muito+ para provas!!! Olha obg por me dar o link!!

    http://garotafashionstar.blogspot.com/ :h:

    ResponderExcluir
  23. ctrl + f n da os favoritos? n percebi essa...me explique que eu sou burra ;)

    http://www.xicablog.blogspot.com

    ResponderExcluir
  24. Este comentário foi removido pelo autor.

    ResponderExcluir
  25. Jackie aparece e tal mais não fica não aparece no comentário me ajudaa :k:

    ResponderExcluir
  26. aaah, o meu não foooooi :a: poooxa

    ResponderExcluir
  27. jackie, se eu der a passe do blog vc pode fazer?? e que nao deu certo e eu ja tentei 24 vezes... (a contar com os links comente, postagens mas recetes ...) e se puder vc tb pode por essas imagens do comente e assim? e que nao entendo nada de html :a:
    por favor :i: ...
    http://www.xicablog.blogspot.pt/

    ResponderExcluir
  28. :k: adorei, obrigada pelo tutorial ajudo bastante

    ResponderExcluir
  29. oi jackie usei coisinhas daqui mas já dei créditos no post ok ? bjs

    ResponderExcluir
  30. :h:

    Jackiee, pq o blog não aceita mais selos e tags??

    ResponderExcluir
  31. Jackie, minha Diva!
    Eu fiz, deu tudo certinho.
    Maaaaaaas quando o leitor coloca o "codigo" nos comentários, não aparece nenhum dos emotions!
    E agora? ;/

    http://maquiadatoda.blogspot.com.br

    ResponderExcluir
  32. Jackie eu não consegui achar o detalhe no painel .. onde que isso fica ?

    ResponderExcluir
  33. @Bombom De Amora Se vc usa o painel antigo do blogger, é só seguir o tutorial ;D

    ResponderExcluir
  34. Não consegui fazer que coisa :e: não aparece de jeito nenhum,fiz tudo certo mais não tá funcionando já é a 2º vez que tento

    ResponderExcluir
  35. em qual dos modelos funciona http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/emo-girl-005.gif

    bjs

    ResponderExcluir
  36. @Adriele Modelo viagem (:
    mais se seu blog estiver carregado (com muuuitos scripts) é provável que não funcione (:

    ResponderExcluir
  37. :h:Amei o post mas ainda estou tentando colocar
    bjs de uma passadinha se vc puder
    somentegirls10.blogspot.com
    :l:

    ResponderExcluir
  38. O meu não funciona. Consegui colocar os códigos mas quando alguém comenta e pões as letras os bonecos não aparecem.
    :e:

    ResponderExcluir
  39. oie participa do meu blogger http://direitospessoai.blogspot.com.br/

    ResponderExcluir
  40. :a: testei no meu blog teste e não funcionou

    ResponderExcluir
  41. eu fui testar no meu blog de teste e deu certo , mais no meu blog não da , quando eu coloco um comentario não pega :e:

    ResponderExcluir
  42. :k: ai eu to super feliz, eu consegui colocar no meu blog ficou muito lindo adoreiii
    Brigada

    ResponderExcluir
  43. eu nem to na ultima etapa, eu não consigo achar a Posição do formulário de comentários :a:

    ResponderExcluir
  44. agora consegui, mas só aparece as letras, e não os emoticons :a:

    ResponderExcluir
  45. Esse código é bem chatinho mesmo :((

    ResponderExcluir
  46. Eu tentei duas vezes e não consegui
    :i: :n:

    ResponderExcluir
  47. oi o meu deu certo, flor e o tuto é muito bom
    :n:

    ResponderExcluir
  48. oie, não consegui, mas mesmo assim adorei o post...
    bjosss

    <<<queridanostalgia.blogspot.com

    ResponderExcluir
  49. Amei os emoticons..
    E Achei lindo o seu blog também!!
    Beijos! :l:

    ResponderExcluir
  50. :a: Tentei 5 Vezes no meu Blog,:e: 3 No meu de testes,:n: Pedi pra minha amiga tentar colocar no dela Também non deu :i: Jack,me da Uma Forcinha ae!!

    ResponderExcluir
  51. @Danny Diwa Esse código é bem chatinho de pegar mesmo dependendo do template nem adianta insistir!

    Esta fazendo todos os passos certinhos, tem alguma dúvida no tutorial?
    Desse modo posso ir te ajudando se tiver (:

    ResponderExcluir
  52. Bua não consegui :i: Mais vou tentar de novo :n:

    ResponderExcluir
  53. No meu foii :c:
    rsrs ... Useii um monte coisas que você disponibilica no meu layout novo,de tutoriais até um template que tu deu uma vez ... mas não te preocupa,você tá na lista de c´reditos

    ResponderExcluir
  54. Jakie,me ajuda não to achando o Posição do formulário e Postagem abaixo incorporada :a:

    ResponderExcluir
  55. Nem consegui fazer no meu, no meu eu troquei as imagens por outras :i:

    ResponderExcluir
  56. @Julia Fui nos blogs que encontrei no seu perfil:

    http://grachifanaticosdecoracao.blogspot.com.br/

    http://princesa-ironica.blogspot.com.br/

    Os dois já estão incorporados (:

    ResponderExcluir
  57. Não está prestando :(, já esta incorporado, mais mesmo assim ele nn aparece
    eu fiz td direitinho espero que me ajude :h

    ResponderExcluir
  58. @Biiah Martinsflor igual eu disse no post: Dependendo do seu template não vai pegar.

    (nem com macumba)

    beijus (:

    ResponderExcluir
  59. Já tentei de todas as maneiras, mais não consiqui eu acho que é por causa do Lay... :i:

    ResponderExcluir
  60. :h:
    gente curte ai minha comunidade no facebook aposto ki v6 vam amar!!!
    http://www.facebook.com/pages/O-amor-acontece/233960830068208?sk=photos_stream

    ResponderExcluir
  61. :j: no meu até aparece a barrinha com os animes .. mais tipo.. qnd comenta.. naum aparece o bunekinho

    ResponderExcluir
  62. ah Jack, nao deu certo no meu de testes, e é o modelo simples. bjs mas valeu o tuto! Danny Toledo

    ResponderExcluir

.