Tutoriais Blogger Vanessa S.
Emoticons nos Comentários do Blogger
[alerta]ATENÇÃO:
O sistema de comentários do Blogger mudou!
Acesse o artigo atualizado e veja como proceder para Incluir emoticons animados nos novos comentários do Blogger.
[/alerta]
Navegando pela web, encontrei uma dica no My Blogger Tricks, que ensina a adicionar emoticons animados do Skype no formulário de comentários do Blogger.
Este hack é bem fácil de instalar e com ele você dá um visual diferente aos comentários no seu blog.
1º passo:
Incluir imagem com emoticons e símbolos sobre o formulário de comentários para que os visitantes saibam como usar cada emoticon.
1. Vá no menu “modelo”, entre na edição HTML do seu template, clique em “expandir modelos de widgets” e localize a seguinte linha:
<p><data:blogCommentMessage/></p>
e cole o seguinte código logo ABAIXO dela:
<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
 
<img border='0' src='http://lh6.ggpht.com/_7wsQzULWIwo/S6z7j2K2ixI/AAAAAAAAC8w/aBjS3JiC9fA/s800/emoticon-0101-sadsmile.gif'/> :b
 
<img border='0' src='http://lh4.ggpht.com/_7wsQzULWIwo/S6z7kDXfZsI/AAAAAAAAC80/JrDuueBH-mE/s800/emoticon-0102-bigsmile.gif'/> :c
 
<img border='0' src='http://lh3.ggpht.com/_7wsQzULWIwo/S6z7kQ8V_nI/AAAAAAAAC84/9WEQPmHLJiI/s800/emoticon-0105-wink.gif'/> :d
 
<img border='0' src='http://lh3.ggpht.com/_7wsQzULWIwo/S6z7kWgRFeI/AAAAAAAAC88/2jjlfg01MIA/s800/emoticon-0104-surprised.gif'/> :e
 
<img border='0' src='http://lh5.ggpht.com/_7wsQzULWIwo/S6z8FBbw3UI/AAAAAAAAC9A/8iSol6bUSDk/s800/emoticon-0106-crying.gif'/> :f
 
<img border='0' src='http://lh5.ggpht.com/_7wsQzULWIwo/S6z8FdrL9dI/AAAAAAAAC9E/rbB37xy1Ybw/s800/emoticon-0109-kiss.gif'/> :g
 
<img border='0' src='http://lh3.ggpht.com/_7wsQzULWIwo/S6z8FpL8dkI/AAAAAAAAC9I/p_OhzAyH-SQ/s800/emoticon-0111-blush.gif'/> :h
 
<img border='0' src='http://lh5.ggpht.com/_7wsQzULWIwo/S6z8FmT-INI/AAAAAAAAC9M/GOURDHmPe9E/s800/emoticon-0110-tongueout.gif'/> :i
 
<img border='0' src='http://lh5.ggpht.com/_7wsQzULWIwo/S6z8Fw5N1LI/AAAAAAAAC9Q/xY9rjSFroCY/s800/emoticon-0126-nerd.gif'/> :j
 
<img border='0' src='http://lh3.ggpht.com/_7wsQzULWIwo/S6z9DendQuI/AAAAAAAAC9U/jtRdRpcopRQ/s800/emoticon-0103-cool.gif'/> :k
 
<img border='0' src='http://lh5.ggpht.com/_7wsQzULWIwo/S6z9DcebxfI/AAAAAAAAC9Y/Xew2m0j1B9I/s800/emoticon-0130-devil.gif'/> :l
 
<img border='0' src='http://lh6.ggpht.com/_7wsQzULWIwo/S6z9DpaPbrI/AAAAAAAAC9c/M74FsmQxqrw/s800/emoticon-0133-wait.gif'/> :m
 
<img border='0' src='http://lh4.ggpht.com/_7wsQzULWIwo/S6z9D-KY1cI/AAAAAAAAC9g/PZppx2BcToc/s800/emoticon-0137-clapping.gif'/> :n
 
<img border='0' src='http://lh5.ggpht.com/_7wsQzULWIwo/S6z9D6YdKmI/AAAAAAAAC9k/io_WlgJQL2w/s800/emoticon-0136-giggle.gif'/> :o
 
<img border='0' src='http://lh3.ggpht.com/_7wsQzULWIwo/S6z99cfdl1I/AAAAAAAAC9o/aJP10AXzhGE/s800/emoticon-0141-whew.gif'/> :p
</div>
Salve as modificações.
2º Passo:
Incluir o script que permitirá o uso dos emoticons nos comentários do Blog.
2. Volte no menu “modelo” >> “editar HTML”, não precisa clicar em “expandir modelos de widgets”, copie o código abaixo e cole-o antes de </body>
<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(/: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>
Nota: Você também pode tentar adicionar o código javascript logo acima de </head>
Salve!
Se você preferir, você poderá alterar o layout onde ficam os emoticons (acima do formulário), para personalizá-lo de acordo com as cores do seu template,editando cores de borda, fonte, background etc.
Procure pela linha do código:
<div style=' width: 370px; text-align: left; border: 2px solid #0084ce; background: #FEF9EA; padding: 10px; color:#0084ce; font-weight:bold; '>
Veja os campos que você pode editar e personalizar de acordo com sua preferência:
width: 370px --/*largura total*/
border: 2px solid # 0084ce --/*borda*/
background: # FEF9EA --/*cor de fundo*/
cor: # 0084ce; --/*cor do texto dos simbolos*/
[dica]Importante:
este hack só irá funcionar em formulários incorporados abaixo das postagens, se você utiliza o metodo de “pop up” não vai funcionar.
Caso queira ativar: entre em “configurações” >> “comentários” >> escolha a opção: “postagem abaixo incorporada“.[/dica]
no meu template não encontra nem um
o q faço???
No meu também não dá, quando comento só aparece :a em vez do smile
Ah, da um quê a mais nos comentários, mas é muito bobo.
Ah esqueçe! Eu já notei meu erro! Obrigada beijos!
mas estou com um problema a caixinha tá lá com os emoticons mas quando digita o código, não apareçe o emoticon nos comentários e agora?
Funcionou bonitinho, obrigada! ^^
não consegui fazer os emoticons não apareceram
bem, só dando uma passada para revisar a minha dica,
Onde está dizendo : *** p/p *** é na verdade
p data:blogCommentMessage p
só você acrescentar os "< >" no código
e na outra parte do comentário que foi cortado a linha de comando, foi onde diz o seguinte:
Procure essa: e não apareceu =/
bem, está aqui a linha de comando:
b:if cond='data:post.embedCommentForm'
só você acrescentar os "< >" no código para funcionar no seu blog
P.s 1: essa linha de comando acima é mais usadas em novos templates do blogger
Espero que dessa vez apareça o comentário por completo =)
valeu a todos, fiquem com Deus o/
clau, a caixinha de emoticons nao apareceu em meu blog o que fazer? ja que voce nao fornece ajuda, o webmaster tentou explicar ai mais nao deu para ver que linha que ele falou da uma ajuda ai
Infelizmente, não funciona no meu template, apesar de ficar tudo bonitinho. Tks na mesma
Olá Clau!
Como já é de praxê mais um bom artigo publicado por você ;D
Bem, eu uso os emoticons do Yahoo, mas agora depois de ver esse Artigo vou usar os do Skype xD
————————————-
Queria deixar uma dica ^^'
Para aqueles que estão seguindo esse tutorial e a caixinha com os emoticons não apareceu no seu blog =/ com certeza é o seu modelo de template ¬¬' Mais e ai, como resolvo?
bem, se em seu template não tiver a linha :
*** p/p ***
Ou se mesmo tiver essa linha e a caixinha ainda não está aparecendo, tem outra Opção =Dsegue logo abaixo.
Procure essa:
E dê continuidade na leitura do artigo dessa mesma página publicado pela Clau.
essas duas linhas de código são as mais comuns em diversos templates ^^'
Pronto, parei… era essa a dica o/
Muito Obrigado Clau, por esse excelente trabalho que você desempenha com MundoBlogger!
Abraço a todos, fiquem com Deus.
P.s: não esqueça de colocar o "< >" não coloquei devido a tag: "Script" não ser permitida aqui nos comentários.
Amanda
Como você pode verificar , isso não aconteceu no blog onde fiz o teste, inclusive varios leitores vão lá testar. Tais recursos variam de template para template. Sendo assim, não tenho como te ajudar.
Olá Clau, gostaria de saber se você pode me ajudar, segui os passos corretamente, aparece a caixinha com os emoticons só que quando a pessoa comenta os emoticons não aparecem no comentário, só o que aparece são seus atalhos tipo: ":a" , ":b"…
O que fiz de errado? =/
Num pegou no meo blogger naum
ótimo, valw linda ficou muito legal olha ai no meu site http://www.downbrazukas.com vs é muiito gata viu
ola,sim tudo bem clau isso eu sie fazer,eu estou dizendo que tipo,não aparece a categoria no post,exemplo: eu publico um arquivo e tudo mais ai coloco a categoria certa,so que la,na pagina principal,não aparece o nome da categoria,tem como você me ajuda nisso? aguardo resposta….
adiministrador do site
Dá uma lida no tutorial:
"Inserir marcador em posts já publicados"
talvez te ajude.
ola,eu tenho um problema,e não sei se esse é o post certo para publicar,mas quem sabe voce me ajude,é o seguinte,eu tenho um site e tudo mais http://www.needmundovista.blogspot.com e tipo,nos posts,não aparecem as categorias,eu ja fiz de tudo,de TUDO mesmo,e queria saber se você pode me ajudar com esse problema,desde já agradeço pela compreensão.abraços e aguardo resposta, se possivel teria como você mandar pelo meu e-mail?
jhoniad@hotmail.com
linda maravilhosa, estou personalizando meu blog graças a seus titoriais, o melhor blog da net neste aspecto, muito obrigado por sua ajuda.
Eduardo Montanari
certifique-se q vc inseriu os endereços das imagens corretamente. Eu aconselho que vc salve cada emoticom e hospede no seu site de sua preferencia, e altere os endereços das imagens. As vezes as imagens podem sair do ar mesmo qdo ocorre de ultrapasar a banda do servidor q as hospeda, muita gente usando o mesmo servidor as vezes dá nisso tb.
Fiz tudo certinho, mas no meu não aparece nada. Só as letras.
@?? Mel ? mendes? ? ?:
Não faço ideia do pq no seu ficou assim. Pode ser algo relacionado ao seu template. Não tenho como ajudar.
Oi,Clau. Os emoticons não aparecem um ao lado do outro,mas sim um em cima do outro,visualmente não ficou muito legal…Por que será que isso aconteceu? Tentei fazer tudo tão direitinho…Tem como corrigir? Obrigado!
Adorei a dica! Já estou usando. Wlw.
@Rafael, @Psicologia em Foco :
Obrigada pelo comentário e pela visita. Volte, sempre!
@Clube da risada:
No IE8 funciona sim. =)
Mas este hack funciona em todos navegadores? Já vi alguns hacks q não funcionam no IE8 esse funciona? Abs!
Obrigada, querida!
Já tentei tantos scripts para pôr emoticosn nos comentários, mas nada funcionava! Só o seu deu certo…
Bjiin
muito boa essa dica, coloquei no meu blog e ficou otimo 😉
@' DeeJaay iFilezinho:
Olha o do passo 1 eu acho que não..mas o do passo 2, acredito que funcione sim. Não custa nada tentar né?
se eu pegr os códigos dos passos 1 e 2 e colocar como arquivo1.js e arquivo2.js (ex.)e hospedar, no blog vai funcionar?
Perfeito
Janaina Barreto:
Esse emoticon q uso no post não é script…eu simplesmente coloco uma imagem no post mesmo…é feito manualmente..não é script não…
Agora sobre os seus script no seu blog, conforme vc citou, eu recomendo que leia este artigo:
Por que alguns scripts não funcionam no meu blog.
Irá te ajudar a entender melhor sobre o funcionamento dos script no template.
Obrigada pela visita e volte sempre!
Olá! Sou eu de novo…
Bom, é que queria saber que script você usa pra pôr emoticons nos seus posts pois eu vi em alguns. Estou com um probleminha nos script que uso no meu, sempre que aponto o blog para o dominio no UOL Host, eles só aparecem se eu estiver logada, vê se pode?!
Se você puder responder… De qualquer forma, volto pra dar uma olhada.
Obrigada 🙂
Ótima dica Clau!
Já tinha um tempo que eu estava procurando uma maneira de colocar emoticons nos coments do meu blog, vou tentar depois.
Parabéns pelo seu site, sempre passo por aqui e encontro dicas ótimas que ajudam a melhorar cada vez mais o template e a usabilidade do meu blog =D
Que Deus te abençoe hoje e sempre
abraços
@$il@a$!:
sim tem e é facilimo de instalar. =)
Tem Emoticons animados?
ah que legal, adoro emoticons, vou tentar depois.