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:
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.
<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>
<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.
Anterior
Assine o Feed
Adicione ao Google
Receba por Email
Twitter
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...
@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.
Sérgio, há um erro no endereço do script, falta um t em htp://...
@crazyseawolf
Muito obrigado pelo aviso! Já está corrigido.
Não funcionou no meu template também. Não apresentou problemas de erros, mas simplesmente não aparecem os emoticons...
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!
@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).
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!
@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 ;)
Não deu certo aqui ..snif sniff
Ps. Ótimo blog, parabens!!
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.
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...
Não consegui no meu template é todo alterado!
infelizmente meus amigos leitores irão ficar sem emoticons!
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?
@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
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?
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
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
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!
Sérgio, será que num tem um função pros emoticons aparecerem automaticamente no formulário com apenas um clique neles, tipo onclick?
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
Não fuciono no meu,porque?
www.carelpinheiro.blogspot.com
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
Atenção para todos que usam esse script!!! O geocities saiu do ar!!!
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
funcionou perfeitamente!
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 :)
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.
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
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?
script, perdão.
tem como reupar o java dos emotions do blog
não ta funfando. pow nenhum pega o unico que pegou foi de um site ai que ele pede para otar depois de ]]>
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.
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!
Bom pra mim deu certinho funcionou normal!
Parabens pelo tutorial!
Não Funcionou
Oi Acabei de colocar os emoticons. ''Deu certo'' mas fiz teste no comentario e não aparece.
ESSE SERVIDOR TA FUNCIONANDO: < script src='http://jonathanhess.110mb.com/smiley.js' type='text/javascript' />
(JUUNTEM OS ESPAÇOS)
SÓ SUBSTITUIR!! ^^
Dá para mudar as cores da caixinha que tem os smiles?
eu vou criar um personalizado pra min!
eu consegui colocar mas quando eu vou e coloco o '':)'' não aparece o emoticon =[