, , ,

Habilitando o uso de emoticons nos comentários do Blogger

50 comentários
Blogger Hacks 

Enquanto o Blogger não aperfeiçoa seu sistema de comentários para algo mais decente, temos que apelar para a criatividade (e scripts). Um Hack bem interessante e que pode incentivar seus usuários a comentarem, é a inclusão de emoticons, aquelas carinhas que aparecem quando você digita determinados códigos – como “:)” –, nos comentários. Você vai aprender a inserir, além do próprio Hack, um painel com todos os códigos e imagens dos emoticons para servir como referência para o seu leitor. Este Hack não funciona no Internet Explorer 7 ou inferior.

Este Hack utiliza um arquivo JavaScript externo. O uso excessivo de scripts no seu blog pode torná-lo lento. Portanto, não exagere!

Para habilitar os emoticons nos comentários do seu blog, faça o seguinte:

Acesse o seu Painel do Blogger e selecione Layout, então clique em Editar HTML para entrar no modo de edição do código do seu Template. Então marque a opção Expandir modelos de widgets.

Não se esqueça de fazer o backup do seu template antes de realizar as alterações no código, clicando em Baixar modelo completo.

Encontre o seguinte código, utilizando o Ctrl+F do seu navegador: (Dependendo do template, podem haver algumas diferenças no trecho do código, então procure algo semelhante, olhando principalmente o início e fim)

<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'>
<h3><a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a></h3>
</b:if>
</b:if>
</p>
</b:if>

Então SUBSTITUA pelo seguinte código: 

<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
<div style='-moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; width: 370; text-align: center; border: 1px solid #bbbbbb; padding: 5px; background: #dddddd; height:90'>
<b>
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif' width='18'/> :))
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif' width='18'/> ;))
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif' width='18'/> ;;)
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif' width='18'/> :D
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif' width='18'/> ;)
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif' width='18'/> :p
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif' width='22'/> :((
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif' width='18'/> :)
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif' width='18'/> :(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif' width='18'/> :X
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif' width='18'/> =((
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif' width='18'/> :-o
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif' width='20'/> :-/
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif' width='18'/> :-*
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif' width='18'/> :|
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif' width='24'/> 8-}
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif' width='31'/> :)]
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif' width='44'/> ~x(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif' width='30'/> :-t
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif' width='18'/> b-(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif' width='18'/> :-L
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif' width='34'/> x(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif' width='30'/> =))
</b>
</div>
<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>
</b:if>

Dessa forma você estará inserindo as imagens e os códigos dos emoticons para que o seu leitor possa ver e utilizar. Você pode alterar a altura (height) e largura (width) do painel modificando as partes em laranja. Em seguida vamos inserir o script no Blog:

Encontre o seguinte código:

</body>

E cole o seguinte código ANTES:

<script src='http://br.geocities.com/neocrosser/blogger_emoticons.js' type='text/javascript'/>

Visualize para ver se não há erros no template e clique em Salvar Modelo. Agora os seus leitores poderão utilizar emoticons nos comentários.

Se o Hack não funcionar ou causar erros no seu template, desfaça as alterações clicando em Limpar Edições ou utilize o backup que você criou e clique em Fazer Upload, então refaça todo o processo.

Comentários (50)
Ulires 04/05/09 17:19

infelizmente nao funcionou no meu template, o blogger informou que a tag 'div' precisava ser fechada, eu inseri o código de fechamento e o blogger informou que o código 'if' precisava ser fechado...

iceBreakerSérgio Estrella04/05/09 21:59

@Ulires,
Tente fazer o código novamente, pois tentei aqui e deu certo. Tome cuidado com a primeira substituição de código pois é comum a gente selecionar mais texto do que o recomendado e aí ficam faltando partes.

crazyseawolf 04/05/09 23:27

Sérgio, há um erro no endereço do script, falta um t em htp://...

iceBreakerSérgio Estrella05/05/09 09:38

@crazyseawolf
Muito obrigado pelo aviso! Já está corrigido.

blogdozemarcos.com 05/05/09 14:31

Não funcionou no meu template também. Não apresentou problemas de erros, mas simplesmente não aparecem os emoticons...

blogdozemarcos.com 05/05/09 14:34

Uma sugestão: você poderia ter um blog de testes para mostrar aos leitores como ficariam as dicas que passa. Essa dos emoticons, por exemplo, não há como saber como ficaria a não ser fazendo... Abração!

iceBreakerSérgio Estrella05/05/09 15:35

@blogdozemarcos.com
Atenção pois no Internet Explorer, este Hack só funciona a partir da versão 8. E bem lembrado quanto a sua sugestão! Adicionei no inicio do tutorial uma imagem de como deve ser o resultado esperado (a imagem reflete este Hack aplicado no template Mínima).

blogdozemarcos.com 07/05/09 14:07

Grande Sérgio, testei justamente no IE8 e no Firefox 3.0.10. Não funcionou. Talvez seja por causa da template que uso, a Selencar... E obrigado por ouvir minha sugestão. É por isso que sou seu fã. Abraços!

iceBreakerSérgio Estrella07/05/09 14:11

@blogdozemarcos.com
Que estranho, eu testei justamente nesses navegadores...
Pode ser que seja o seu template, mas de qualquer forma vou testar novamente. Se alguém mais não conseguiu que o Hack funcione, por favor avise aqui ;)

WaltinhO' 07/05/09 19:09

Não deu certo aqui ..snif sniff


Ps. Ótimo blog, parabens!!

Diêmerson 18/05/09 13:37

Olá Sérgio, no meu blog eu nem consigo achar o local a colar o código... O template é muito diferente.
O blog não mostra os smileys na página de comentários nos locais em que tentei inserí-las, mas, ao fazer um comentário com um código, elas funcionam normalmente.

Diêmerson 18/05/09 13:40

No que diz respeito a "comments", a estrutura é a seguinte:

/* Comments
----------------------------------------------- */
#comments h4 {
border-bottom: 1px solid #C2C1C0;
margin: 2px 0px 10px 0px;
padding-bottom: 2px;
color: #808080;
clear: both;
}

#comments .comment-author {
margin: 0px;
padding: 5px;
background-color: #E2DEDE;
font-size: 12px;
font-weight: bolder;
}

.comment-body {
border-bottom: 0px solid #e4f1fa;
background-color: #E3D8D8;
padding: 5px 5px 2px 5px;
margin: 0px;
font-size: 11px;
}

.comment-body p {
margin: 0px;
padding: 5px;
}

.comment-footer {
margin: 0px 0px 10px 0px;
padding: 5px 5px 5px 5px;
font-size: 10px;
background-color:#E2DEDE;
}
.deleted-comment {
font-style:italic;
color:gray;
}
#blog-pager-newer-link {
float: left;
}
#blog-pager-older-link {
float: right;
}
#blog-pager {
text-align: center;
}
.feed-links {
clear: both;
line-height: 2.5em;
margin-left: 15px;
}

...

Se puder ajudar...

JipaGito 29/05/09 02:40

Não consegui no meu template é todo alterado!
infelizmente meus amigos leitores irão ficar sem emoticons!

Dexter Hacker 10/06/09 23:17

ISSO E PORQUE VOCE NAO CLICKOU EM EXPANDIR!
EU COLOQUEI O CODIGO E APARECE AS EMOTIONS,MAS NAO DA PRA ADICIONA-LA NO COMENTARIO
TEM ALGUMA SOLUÇÃO?

jack's 13/06/09 20:23

@Sergio Estrella

Muda o Script de servidor, daqui a alguns dias o geocities vai sair do ar.
Flw.
http://br.geocities.com/neocrosser/blogger_emoticons.js

todomundonazona 16/07/09 15:12

parabéns pelo blog parceiro, está ótimo!
encontrei essa dica e achei ótima, mas não estou conseguindo... está dizendo que a div p tem que ser fechada e eu não sei como fecho-a.
como faço isso?

Gabriel Moura 10/08/09 21:03

Sérgio,
Isso não fucionou comigo tentarei fazer algumas mudanças em meu template para ver se consigo colocar achei muito interessante pois quase nenhum outro blog que eu já tenha visto tem estes emoticons

Abraço

Gabriel Moura 10/08/09 21:10

Sergio,
Só apareceu as figuras dos emoticons mas quanto eu coloco o código não aparece dá uma passadinha no meu blog deicha um comentário e vê o possível erro!

Obrigado

internetando Blogger

Márlon Silva 24/08/09 17:59

Acho que não tá dando certo por causa do script que deve ter expirado. Pq vc não hospeda em outro lugar? Adorei isso e queria colocar no meu blog!



Ah, ótimo blog!

Charles 29/08/09 00:50

Sérgio, será que num tem um função pros emoticons aparecerem automaticamente no formulário com apenas um clique neles, tipo onclick?

Ítalo 12/09/09 09:00

Sérgio Estrella, Amigo eu conssigo fazer tudo certinho ate apareçe la os emoction so que coloco ex: :)) e o emoctin nao apareçe no comentario ='x como faço isto? podes ajudar? Abraços

CarelPinheiro 19/09/09 12:33

Não fuciono no meu,porque?

www.carelpinheiro.blogspot.com

Mateus' Blog 30/09/09 18:16

eh, no meu blog funciona corretamente, até agora não deu problema, o endereço: http://e-mateus.blogspot.com/ e eu uso o mozilla firefox versão 3.5.1 mais conhecida como VERSÃO FINAL. no baixaki tem, foi lá q eu baixei

Mateus' Blog 29/10/09 15:03

Atenção para todos que usam esse script!!! O geocities saiu do ar!!!

Mateus' Blog 30/10/09 16:13

Sérgio Estrella, você ainda tem o arquivo do script dos emoticons em JAVASCRIPT, em seu PC??? Por favor se tiver, hospeda em outro lugar (uma dica é o dropbox) Por favor.

Agradece
Mateus

Guilherme Sousa 14/11/09 19:55

funcionou perfeitamente!

alezandri 13/12/09 21:44

Olá Ice :)

Pelo que percebi, aquele código longo que é para colocar sobre o antigo existente, serve apenas para mostrar os caracteres de desenho dos emoticons.

Nao seria muito mais simples colocar somente uma imagem dos simbolos?

div img .... div

(Seu HTML não pode ser aceito: Tag is not allowed: DIV)

porque a funcionalidade essencial é o link para o script que fica no final.

certo?


Abraço :)

Ronny 08/01/10 19:22
Este comentário foi removido pelo autor.
Ronny 08/01/10 20:18

No meu deu tudo certo...
mais não está funcionando pelo fato do Script ter saido do ar...
Por favor alguém coloca outro! por favor.

Jumper 19/01/10 13:28

Olá...! O Geocities saiu do ar... o que podemos fazer para este hack funcionar? Existe outro endereço onde este script possa estar hospedado? Desde já Muito obrigado!
Adm:Jumper.
jumperwebdesign.blogspot.com

Jana Barreto 31/03/10 10:53

o geosites saiu do ar faz séculos, mas o scrip ainda funciona no meu blog. acho que não tem nada a ver não...
Ah, pessoal do blog, queria saber se ao invés de usar nos comentários, tem como usar esse mesmo scrip na área de postagem... :) tem?

Jana Barreto 31/03/10 10:53

script, perdão.

rank-ptc 30/05/10 02:21

tem como reupar o java dos emotions do blog

+-+-+juao+-+-+ 25/06/10 09:43

não ta funfando. pow nenhum pega o unico que pegou foi de um site ai que ele pede para otar depois de ]]>

Sonia Boni 20/07/10 19:45

Não funcionou, Sérgio. Fiz tudo certinho, o quadro com as carinhas apareceu lá. Mas só são publicados os sinais, as caras não.
Resgatei o template salvo antes e desisti. Vim só pra lhe informar que não deu certo comigo.

Kamboro 22/08/10 17:26

Exelente, parabéns IceBreaker por isso, sempre ajudando os mais necessitador =D eu estava realmente procurando por isso e achei aqui, e ainda por cima muitas outras coisas! Obrigado!

Vinicius 26/08/10 18:23

Bom pra mim deu certinho funcionou normal!

Vinicius 26/08/10 18:23

Parabens pelo tutorial!

Matheuss 22/10/10 12:35

Não Funcionou

Oi Acabei de colocar os emoticons. ''Deu certo'' mas fiz teste no comentario e não aparece.

Sid 29/03/11 23:34

ESSE SERVIDOR TA FUNCIONANDO: < script src='http://jonathanhess.110mb.com/smiley.js' type='text/javascript' />
(JUUNTEM OS ESPAÇOS)
SÓ SUBSTITUIR!! ^^

Inês 14/04/11 20:35

Dá para mudar as cores da caixinha que tem os smiles?

HENRIQUEMASTER 15/06/11 16:41

eu vou criar um personalizado pra min!

olgawinx 03/01/12 16:37

eu consegui colocar mas quando eu vou e coloco o '':)'' não aparece o emoticon =[

Izayoki 26/02/12 21:22

meu template tá legal, a caixinha apareceu, porém os eoticons simplesmente nao funcionam...
(caraca ja é o 8 site q eu tento...)

Juliana Sousa 21/04/12 16:50

Consegui pessoal! é só trocar o servidor do script, pelo último que foi dado os comentários.


ESSE SERVIDOR TA FUNCIONANDO: < script src='http://jonathanhess.110mb.com/smiley.js' type='text/javascript' />
(JUUNTEM OS ESPAÇOS)
SÓ SUBSTITUIR!! ^^

Anônimo 08/12/12 16:56

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

Coach Factory 30/08/14 03:33

longchamp handbags, prada outlet, ray ban, true religion jeans, longchamp handbags, true religion, michael kors outlet, toms shoes, tory burch outlet, gucci outlet, michael kors handbags clearance, louis vuitton outlet online, nike air max, oakley sunglasses, jordan shoes, louis vuitton handbags, coach factory, longchamp outlet, louboutin, kate spade handbags, michael kors outlet online, nike air max, kate spade outlet, oakley sunglasses, polo ralph lauren outlet, louboutin, ray ban sunglasses, michael kors, michael kors, michael kors outlet online, coach purses, cheap michael kors, tiffany and co, prada handbags, polo ralph lauren outlet, coach outlet store, nike shoes, oakley sunglasses, true religion outlet, ray ban sunglasses, burberry outlet online, coach outlet, air max, chanel handbags, nike free

Coach Factory 30/08/14 03:34

birkin bag, timberland, air jordan, hollister, converse shoes, longchamp, ralph lauren, hogan, ferragamo shoes, supra shoes, mcm handbags, nike air max, north face jackets, ray ban pas cher, louboutin, lululemon, north face outlet, air max, nike huarache, giuseppe zanotti, longchamp, wedding dresses, louis vuitton, hollister, juicy couture outlet, instyler ionic styler, roshe run, hermes, reebok outlet, montre pas cher, beats by dre, nike trainers, new balance shoes, insanity, rolex watches, abercrombie and fitch, air max, mulberry, m a c cosmetics, babyliss pro, louis vuitton, karen millen, ralph lauren, nike roshe, yoga pants, nfl jerseys, vans, louis vuitton, abercrombie and fitch, nike free, lancel, oakley pas cher,

Coach Factory 30/08/14 03:36

ugg boots, moncler outlet, moncler, cheap oakley sunglasses, ghd, louboutin, oakley sunglasses outlet, oakley sunglasses cheap, soccer shoes, ugg, uggs on sale, jimmy choo, gucci, canada goose, canada goose, cheap oakley sunglasses, oakley sunglasses outlet, moncler, tn pas cher, bottega veneta, canada goose outlet, oakley outlet, cheap oakley sunglasses, asics gel, canada goose, oakley sunglasses cheap, oakley outlet, cheap sunglasses, ray ban, ugg boots, cheap sunglasses, p90x3, ralph lauren, canada goose outlet, canada goose, ugg boots, oakley vault, celine handbags, soccer jerseys, oakley vault, moncler, herve leger, oakley, valentino shoes

Postar um comentário