Tutorial:Emoticons na area de comentários

↑Demi Lovato arrasando no PCA*--*
Oiee pessoas lindas e maravilhosas,quanto tempo né,que vergonha rs,tudo bem com vocês meus amores?
Bom,primeiro eu queria agradecer os 154 seguidores,eu nunca imaginei que eu chegaria a essa número*--*
Ah e eu queria que vocês dassem uma passadinha no meu tumblr,é só clicar aqui e deram a suas opiniãos sobre o novo theme,pode ser em anonimo já que muita gente não tem tumblr e tal,é só avisar quem é^^
Ah e me seguissem no twitter,eu retribuo todos.
Bom a pedido de uma leitora,a carol do blog Do Jeito Que Sou ,hoje eu vou postar como colocar emoticons para os comentários do blog:
Emoticons nos comentários do blogspotBom,é meio complicado mas vamos lá,como o tuto é bem extenso é só clicar em leia mais para ver o tutorial↓

entre na pagina editar html, clique para expandir o modelo e procure por:
data:blogCommentMessage

Provavelmente estará assim:
<h4 id='comment-post-message'><data:postCommentMsg/></h4>

E logo abaixo coloque esse código:

<div style=' width: 370px; text-align: left; border: 2px solid #0084ce; background: #FEF9EA; padding: 10px; color:#0084ce; font-weight:bold; '>
<img border='0' src='http://lh3.ggpht.com/_7wsQzULWIwo/S6z7jnvQpuI/AAAAAAAAC8s/kgswZH3dAng/s800/emoticon-0100-smile.gif'/> :a
&#160;
<img border='0' src='http://lh6.ggpht.com/_7wsQzULWIwo/S6z7j2K2ixI/AAAAAAAAC8w/aBjS3JiC9fA/s800/emoticon-0101-sadsmile.gif'/> :b
&#160;
<img border='0' src='http://lh4.ggpht.com/_7wsQzULWIwo/S6z7kDXfZsI/AAAAAAAAC80/JrDuueBH-mE/s800/emoticon-0102-bigsmile.gif'/> :c
&#160;
<img border='0' src='http://lh3.ggpht.com/_7wsQzULWIwo/S6z7kQ8V_nI/AAAAAAAAC84/9WEQPmHLJiI/s800/emoticon-0105-wink.gif'/> :d
&#160;
<img border='0' src='http://lh3.ggpht.com/_7wsQzULWIwo/S6z7kWgRFeI/AAAAAAAAC88/2jjlfg01MIA/s800/emoticon-0104-surprised.gif'/> :e
&#160;
<img border='0' src='http://lh5.ggpht.com/_7wsQzULWIwo/S6z8FBbw3UI/AAAAAAAAC9A/8iSol6bUSDk/s800/emoticon-0106-crying.gif'/> :f
&#160;
<img border='0' src='http://lh5.ggpht.com/_7wsQzULWIwo/S6z8FdrL9dI/AAAAAAAAC9E/rbB37xy1Ybw/s800/emoticon-0109-kiss.gif'/> :g
&#160;
<img border='0' src='http://lh3.ggpht.com/_7wsQzULWIwo/S6z8FpL8dkI/AAAAAAAAC9I/p_OhzAyH-SQ/s800/emoticon-0111-blush.gif'/> :h
&#160;
<img border='0' src='http://lh5.ggpht.com/_7wsQzULWIwo/S6z8FmT-INI/AAAAAAAAC9M/GOURDHmPe9E/s800/emoticon-0110-tongueout.gif'/> :i
&#160;
<img border='0' src='http://lh5.ggpht.com/_7wsQzULWIwo/S6z8Fw5N1LI/AAAAAAAAC9Q/xY9rjSFroCY/s800/emoticon-0126-nerd.gif'/> :j
&#160;
<img border='0' src='http://lh3.ggpht.com/_7wsQzULWIwo/S6z9DendQuI/AAAAAAAAC9U/jtRdRpcopRQ/s800/emoticon-0103-cool.gif'/> :k
&#160;
<img border='0' src='http://lh5.ggpht.com/_7wsQzULWIwo/S6z9DcebxfI/AAAAAAAAC9Y/Xew2m0j1B9I/s800/emoticon-0130-devil.gif'/> :l
&#160;
<img border='0' src='http://lh6.ggpht.com/_7wsQzULWIwo/S6z9DpaPbrI/AAAAAAAAC9c/M74FsmQxqrw/s800/emoticon-0133-wait.gif'/> :m
&#160;
<img border='0' src='http://lh4.ggpht.com/_7wsQzULWIwo/S6z9D-KY1cI/AAAAAAAAC9g/PZppx2BcToc/s800/emoticon-0137-clapping.gif'/> :n
&#160;
<img border='0' src='http://lh5.ggpht.com/_7wsQzULWIwo/S6z9D6YdKmI/AAAAAAAAC9k/io_WlgJQL2w/s800/emoticon-0136-giggle.gif'/> :o
&#160;
<img border='0' src='http://lh3.ggpht.com/_7wsQzULWIwo/S6z99cfdl1I/AAAAAAAAC9o/aJP10AXzhGE/s800/emoticon-0141-whew.gif'/> :p
&#160;
<img border='0' src='http://lh3.ggpht.com/_7wsQzULWIwo/S6z99UcZMKI/AAAAAAAAC9s/p7NVe245uP4/s800/emoticon-0148-yes.gif'/> :q
&#160;
<img border='0' src='http://lh5.ggpht.com/_7wsQzULWIwo/S6z99sMaIFI/AAAAAAAAC9w/gIu5t9057us/s800/emoticon-0149-no.gif'/> :r
&#160;
<img border='0' src='http://lh6.ggpht.com/_7wsQzULWIwo/S6z9-FFVEeI/AAAAAAAAC94/T1IXnlT43-M/s800/emoticon-0178-rock.gif'/> :s
&#160;
<img border='0' src='http://lh5.ggpht.com/_7wsQzULWIwo/S6z99zPt4vI/AAAAAAAAC90/SOCwFsYa4M4/s800/emoticon-0155-flower.gif'/> :t
</div>


Clique para salvar, então procure por: </body> e coloque esse código antes dele:

<script type='text/javascript'>
//<![CDATA[
a = document.getElementById('comments');
if(a) {
b = a.getElementsByTagName("DD");
for(i=0; i < b.length; i++) {
if (b.item(i).getAttribute('CLASS') == 'Author-comment-body' , 'comment-body') {
_str = b.item(i).innerHTML.replace(/:j/gi, "<img src='http://lh5.ggpht.com/_7wsQzULWIwo/S6z8Fw5N1LI/AAAAAAAAC9Q/xY9rjSFroCY/s800/emoticon-0126-nerd.gif' alt='' class='smiley'/>");
_str = _str.replace(/:k/gi, "<img src='http://lh3.ggpht.com/_7wsQzULWIwo/S6z9DendQuI/AAAAAAAAC9U/jtRdRpcopRQ/s800/emoticon-0103-cool.gif' alt='' class='smiley'/>");
_str = _str.replace(/:l/gi, "<img src='http://lh5.ggpht.com/_7wsQzULWIwo/S6z9DcebxfI/AAAAAAAAC9Y/Xew2m0j1B9I/s800/emoticon-0130-devil.gif' alt='' class='smiley'/>");
_str = _str.replace(/:m/gi, "<img src='http://lh6.ggpht.com/_7wsQzULWIwo/S6z9DpaPbrI/AAAAAAAAC9c/M74FsmQxqrw/s800/emoticon-0133-wait.gif' alt='' class='smiley'/>");
_str = _str.replace(/:n/gi, "<img src='http://lh4.ggpht.com/_7wsQzULWIwo/S6z9D-KY1cI/AAAAAAAAC9g/PZppx2BcToc/s800/emoticon-0137-clapping.gif' alt='' class='smiley'/>");
_str = _str.replace(/:o/gi, "<img src='http://lh5.ggpht.com/_7wsQzULWIwo/S6z9D6YdKmI/AAAAAAAAC9k/io_WlgJQL2w/s800/emoticon-0136-giggle.gif' alt='' class='smiley'/>");
_str = _str.replace(/:p/gi, "<img src='http://lh3.ggpht.com/_7wsQzULWIwo/S6z99cfdl1I/AAAAAAAAC9o/aJP10AXzhGE/s800/emoticon-0141-whew.gif' alt='' class='smiley'/>");
_str = _str.replace(/:q/gi, "<img src='http://lh3.ggpht.com/_7wsQzULWIwo/S6z99UcZMKI/AAAAAAAAC9s/p7NVe245uP4/s800/emoticon-0148-yes.gif' alt='' class='smiley'/>");
_str = _str.replace(/:r/gi, "<img src='http://lh5.ggpht.com/_7wsQzULWIwo/S6z99sMaIFI/AAAAAAAAC9w/gIu5t9057us/s800/emoticon-0149-no.gif' alt='' class='smiley'/>");
_str = _str.replace(/:t/gi, "<img src='http://lh5.ggpht.com/_7wsQzULWIwo/S6z99zPt4vI/AAAAAAAAC90/SOCwFsYa4M4/s800/emoticon-0155-flower.gif' alt='' class='smiley'/>");
_str = _str.replace(/:s/gi, "<img src='http://lh6.ggpht.com/_7wsQzULWIwo/S6z9-FFVEeI/AAAAAAAAC94/T1IXnlT43-M/s800/emoticon-0178-rock.gif' alt='' class='smiley'/>");
_str = _str.replace(/:a/gi, "<img src='http://lh3.ggpht.com/_7wsQzULWIwo/S6z7jnvQpuI/AAAAAAAAC8s/kgswZH3dAng/s800/emoticon-0100-smile.gif' alt='' class='smiley'/>");
_str = _str.replace(/:b/gi, "<img src='http://lh6.ggpht.com/_7wsQzULWIwo/S6z7j2K2ixI/AAAAAAAAC8w/aBjS3JiC9fA/s800/emoticon-0101-sadsmile.gif' alt='' class='smiley'/>");
_str = _str.replace(/:c/gi, "<img src='http://lh4.ggpht.com/_7wsQzULWIwo/S6z7kDXfZsI/AAAAAAAAC80/JrDuueBH-mE/s800/emoticon-0102-bigsmile.gif' alt='' class='smiley'/>");
_str = _str.replace(/:d/gi, "<img src='http://lh3.ggpht.com/_7wsQzULWIwo/S6z7kQ8V_nI/AAAAAAAAC84/9WEQPmHLJiI/s800/emoticon-0105-wink.gif' alt='' class='smiley'/>");
_str = _str.replace(/:e/gi, "<img src='http://lh3.ggpht.com/_7wsQzULWIwo/S6z7kWgRFeI/AAAAAAAAC88/2jjlfg01MIA/s800/emoticon-0104-surprised.gif' alt='' class='smiley'/>");
_str = _str.replace(/:f/gi, "<img src='http://lh5.ggpht.com/_7wsQzULWIwo/S6z8FBbw3UI/AAAAAAAAC9A/8iSol6bUSDk/s800/emoticon-0106-crying.gif' alt='' class='smiley'/>");
_str = _str.replace(/:g/gi, "<img src='http://lh5.ggpht.com/_7wsQzULWIwo/S6z8FdrL9dI/AAAAAAAAC9E/rbB37xy1Ybw/s800/emoticon-0109-kiss.gif' alt='' class='smiley'/>");
_str = _str.replace(/:h/gi, "<img src='http://lh3.ggpht.com/_7wsQzULWIwo/S6z8FpL8dkI/AAAAAAAAC9I/p_OhzAyH-SQ/s800/emoticon-0111-blush.gif' alt='' class='smiley'/>");
_str = _str.replace(/:i/ig,"<img src='http://lh5.ggpht.com/_7wsQzULWIwo/S6z8FmT-INI/AAAAAAAAC9M/GOURDHmPe9E/s800/emoticon-0110-tongueout.gif' alt='' class='smiley'/>")
b.item(i).innerHTML = _str;
}
}
}
//]]>
</script>

Clique novamente para salvar e depois é só fazer os testes, lembre-se que os comentários do blogger podem demorar uns minutos para aparecer, normalmente não demora, então se não aparecer na hora é normal, mas isso não quer dizer que deu errado, nos testes que fizemos demorou uns 2 minutos para ser visível o comentário com emoticons no blogger.

E o melhor de tudo sobre esses emoticons para colocar no blog é que você pode criar os seus emoticons facilmente, repare que os trechos que se repetem varias vezes:

_str = _str.replace(/:k/gi, "<img src='http://lh3.ggpht.com/_7wsQzULWIwo/S6z9DendQuI/AAAAAAAAC9U/jtRdRpcopRQ/s800/emoticon-0103-cool.gif' alt='' class='smiley'/>");

<img border='0' src='http://lh3.ggpht.com/_7wsQzULWIwo/S6z9DendQuI/AAAAAAAAC9U/jtRdRpcopRQ/s800/emoticon-0103-cool.gif'/> :k
&#160;

Cada um numa parte do código é repetido apenas trocando o endereço da imagem e o código para o emoticon (estão em destaque), portanto se trocar o endereço da imagem: http://lh3.ggpht.com/_7wsQzULWIwo/S6z9DendQuI/AAAAAAAAC9U/jtRdRpcopRQ/s800/emoticon-0103-cool.gif'

E o código :k irá criar um novo emoticon, apenas tome cuidado para não apagar nem colocar nada a mais no código e não usar o código de imagem repetido ou seja :k só poderá haver um deles, então escolha outros caracteres para ser o atalho para os novos emoticons.

Achamos esse tutorial sobre emoticons do Skype no blog My Blogger Tricks 
Muito obrigada ao blog Dicas pra blogs pelo tutorial^^
Espero que tenham gostado.

33 comentários:

  1. oi flor to triste não por causa de vc sabe a dona do miss girl os prêmios atrasando e ela fico me cobrando e rejeitou o lay ja começo assim!!e agora ela deixou esse comentário!!
    tudo pq não dei os prêmios o premio principal ela rejeitou problema dela e eu não postei os outros prêmios que era divulgação e entrevista!!
    amanha vou postar e vc posta no blog e divulga para acabar logo!!
    --------------------------------------------
    Já abriu outro concurso e ainda não finalizou o último!! Perdi a confiança em ti e na tua amiga lá do haus of teen, blogs que eu gostava tanto... Mas e os meus prêmios?? E a outra participante?? Era uma fraude o concurso??

    ResponderExcluir
  2. achei bem legal o tutorial ! (:

    tem post novo, passa lá ? http://coisas-de-diva.blogspot.com

    ResponderExcluir
  3. Tentei miais nao consegui! Depois tento de novo!
    Ja estou seguindo seu blog! Segue de volta!
    Estou participando de um concurso se nao se incomodar vota em mim! O nome e* Space friends o 2º da lista!
    Nesse link http://s2meh.blogspot.com/p/parcerias.html
    Muitoo Lindo seu blog!
    http://blogdanicknaves.blogspot.com

    ResponderExcluir
  4. Conseguii! Uhuuu! :n
    Nossa seu blog e* lindoo!
    Ja estou seguindo vc poderia seguir o meu?
    Vota em mim em um concurso? http://s2meh.blogspot.com/p/parcerias.html
    Agradeço por tudo!
    Um beijo Nicole

    ResponderExcluir
  5. Tutorial super util!
    Que lindo aqui!Esse lay da Demi ta super fofo!
    Seguindo >.<
    se puder seguir de volta,agradeço :D
    http://blogportalteen.blogspot.com

    Bjs :3

    ResponderExcluir
  6. como voce sabe tudo isso ? cara, fico impressionada! voce fez algum curso de html?

    hahaha beijos gata ;*

    ResponderExcluir
  7. Bem legal o tutorial! :c

    http://tvfabulous.blogspot.com

    Beijinhos

    ResponderExcluir
  8. Vejam, não é nem por publicar ou não meu blog, só que eu fiquei muito chateada com o fato da sua amiga ter aberto outro concurso, o que penmsaria vc? Imagine-se no meu lugar. Vc ganha um concurso, vai visitar um blog que gosta e nota que estão fazendo um concurso, mas como assim? Esqueceram de mim?? E a entrevista tava pronta, ela disse que já ia postar e passou dias e nada. Como se sentiriam?

    ResponderExcluir
  9. oi flor acabo nossa briga resolvemos e eu tambem vou fazer um post especial mas vc também pq o premio era nos dois blogs a divulgação e coloque o link-me dela né??kkk #ai mandona
    bom sobre a outra ganhadora ela tinha mudado de endereço ou de blog não lembro tenta entrar em contato com ela ta?vamos resolver isso caso ela não queira ou mudou de sei la endereço blgo vamos ver outra!! :) o novo endereço é esse
    http://br-agitatudo.blogspot.com/

    ResponderExcluir
  10. Adorei o tutorial, sempre quis saber como colocá-los.
    Obrigada pela visitinha, volte sempre !

    beeijos,
    http://girliethingspt.blogspot.com/

    ResponderExcluir
  11. oown que nada aqui tbm é perfect!
    sempre que puder vou estar sempre marcando presença aqui :D

    Bjs
    http://blogportalteen.blogspot.com

    ResponderExcluir
  12. Oi flor.. Seguindo aqui.. Seu blog é muuito lindo!! Parabéns..

    Visita? cabeca-garotaa.blogspot.com

    Beijoos

    ResponderExcluir
  13. Amei,muito mesmo você é muito criativa beijos Gaby e Bia

    blog--esmaltevermelho.blogspot.com

    ResponderExcluir
  14. Oi, Gabi :)
    Obrigada pelo layout, tá liiindo mesmo.

    ResponderExcluir
  15. Oiii! Uall! Que blog perfect *-* To seguindo, ok? Retribui! Aceita parceria? Bjs!

    www.smilingofficialpage.blogspot.com

    ResponderExcluir
  16. Otimo tutorial :n bjsssssss
    http://mundodemeninasteen.blogspot.com/

    ResponderExcluir
  17. ootimo tutorial . ((:
    oobg pela visita amr , já estou te seguindo de vlt . espero que volte smp *-*
    garotainverno.blogspot.com :33
    2bjo :*

    ResponderExcluir
  18. gostei bastante do blog,ja to seguindo..Segue lá também? ;3
    www.ilovecantores.blogspot.com :D
    Bjoo *-*

    ResponderExcluir
  19. oiii faço parte do BLOGS PARCEIROS
    e estou passando aqui para seguir seu blog e te convidar para conhecer o meu http://www.jolinoivas.blogspot.com/
    um bjo!!!!

    ResponderExcluir
  20. ooi flor , ameeeei o seu blog ta ? ee ja estou seguindo . beeeeeeeeijos

    www.garota-maravilhosa.blogspot.com

    ResponderExcluir
  21. Amei o blog!!Seguindo, segue de volta?
    http://www.gossipgirlrj.blogspot.com/

    ResponderExcluir
  22. Ameeei o seu blog! Esse layout é a coisa mais fofa do mundo!

    Estou seguindo! Se puder dar uma passadinha no meu, vou amar!

    Beijos :*

    http://geracaoglam.blogspot.com/

    ResponderExcluir
  23. peguei o leia mais e coloquei os creditos viu?
    beijos

    http://variationsminhas.blogspot.com/

    ResponderExcluir
  24. :n ótimo tutorial
    Flor, mil desculpas, mas não poderei seguir seu twitter, não tenho twitter :f
    inspiracaodeumagarota.blogspot.com
    encomendas-idug.blogspot.com
    Obrigada pelo elogio, comentário e visitinha!

    ResponderExcluir
  25. Oi, visitei seu Tumblr, e segui seu twitter e curti o tutorial! Obrigada por passar lá no Sweet Machine, fico feliz que tenha gostado do Layout.

    Beijinhos

    http://sweetmachine.blogspot.com/

    ResponderExcluir
  26. Oi, amor nem tenho twitter do blog ): Porque nã oesta mais postando ?

    beijos, duda; http://coisas-de-diva.blogspot.com

    ResponderExcluir
  27. ahh, voce quer postar sobre tutoriais ou outra coisa? hah

    beijos, duda; http://coisas-de-diva.blogspot.com

    ResponderExcluir
  28. Ah, esse tuto é muito legal :c
    alem de dar uma personalizada nos comentários fica uma graça! :)
    Fiquei muito feliz quando recebi seu email, eu tinha fechado o blog porque desativei ele por uns tempos :b Mais depois abri de novo, mais mesmo assim o blog vai continuar desativado por enquanto... Se você der uma passadinha lá e ler o primeiro post vai entender o porque.
    Fico feliz em saber que você gosta do meu blog. Também adoro o Haus Of Teen :D
    Mesmo eu não estando postando lá, sempre que puder passarei por aqui, viu? Gosto por demais do seu blog!
    Xeru <3

    www.ponhaglitter.tk

    ResponderExcluir
  29. Oii, estou seguindo seu blog e gostei muitodele, visita o meu blog e se gostar me segue tbm, bjos

    http://toquaseprontaprasair.blogspot.com/

    ResponderExcluir
  30. Tudo o que vooc falou eu vi no blogger anterior num me ajudou muito ainda :b

    ResponderExcluir
  31. oi gabriela! eu sou iniciante ( entao claro, tenho muitas duvidas... ) e queria saber se editar o HTML danifica o blog, pq sempre q eu tento editar o HTML, aparece isso:

    "A edição direta de HTML pode afetar o funcionamento de alguns recursos e é recomendada somente a usuários avançados. A edição de modelos HTML pode afetar de forma imprevisível outros recursos do Blogger. Recomendamos primeiro a utilização do Designer de modelo, a partir do qual você pode usar a opção "Adicionar CSS" da seção "Avançado".

    ai eu to com medo q danifique o blog! me ajuda, por favor!

    Amanda

    ResponderExcluir

Muito obrigada pela visita*--*
Siga e deixa o seu link que seguirei de volta^^
Ah e me sigam pelo Twitter também,sigo todos de volta.
Twitter:@heeysmile
Volte sempre!
Beijoos Gabriela