Uma leitora aqui do Blog viu a publicação sobre emoticons nos comentários e me perguntou como colocar eles também dentro das publicações. No início, eu usava dentro dos posts também, mas já não me lembrava mais de como é que eu fiz para ter esse efeito. A única coisa de que me lembrava era que eu havia usado um plugin do Firefox para isso.
Blogueiro
Você vai precisar do Firefox. Pode baixá-lo no site da Mozilla.
Depois de instalado, vamos instalar o complemento que fará a mágica acontecer.
Vá à página de complementos do Firefox e digite "Greasemonkey" na pesquisa.
Clique no botão "ADD to Firefox" para baixar o dito cujo.
O arquivo é muito pequeno e assim que terminar de baixar vai aparecer uma janela com um botão em contagem regressiva de 5 segundos. Passado esse tempo o botão "Instalar" ficará disponível. Pode clicar nele sem medo.
Vai ser preciso reiniciar o Firefox.
Deve aparecer a cara de um macaco em algum canto do seu Firefox, certifique-se de que esteja acesso.
Esse recurso só vai funcionar no editor antigo do blogger, então vá até a aba "Básico" em "Configurações" e escolha "Editor antigo" nas "Configurações globais".
Salve as configurações.
É hora de adicionar os emoticons, é só clicar na imagem referentes aos emoticons que você quer.
Quando você clicar, vai aparecer uma janela como a que está abaixo.
Clique em "Install".
Já está pronto, os emoticons estarão disponíveis na aba "Escrever" do editor de postagens, desde que seja o editor de postagens antigo.
Veja um exemplo na imagem abaixo:
Está terminado, você já pode usar emoticons nas publicações, mas então se você quiser outros emoticons diferentes destes disponíveis, como fazer?
Primeiro você deverá colocar o seguinte código em um arquivo do bloco de notas e salvá-lo com um nome qualquer, mas com a extensão ".JS". Dê o nome de "emoticons.js", por exemplo.
// Baseado no tutorial original Emoticons para Blogger por Kuribo (http://www.kuribo.info/2006/04/emoticons-for-blogger.html)
// Modificado por Osmar Mesquita (http://bombadigital.com)
// TODO
// Script para adicionar emoticons apos texto
// ==UserScript==
// @name Emoticons para Blogger
// @namespace http://www.bombadigital.com
// @description Usando emoticons no blogger
// @include http://*.blogger.com/post-edit.g?*
// @include http://*.blogger.com/post-create.g?*
// ==/UserScript==
window.addEventListener("load", function(e) {
function setemoticons(domname)
{
var editbar = document.getElementById(domname);
if (editbar) {
var buttons = "<br />";
buttons += emoticonButton("(Y)", "http://mazinholovedidila.googlepages.com/agreement3.gif");
buttons += emoticonButton(":p", "http://mazinholovedidila.googlepages.com/aloofandbored0.gif");
buttons += emoticonButton(":@", "http://mazinholovedidila.googlepages.com/angry20.gif");
buttons += emoticonButton("8o", "http://smileyjungle.com/smilies/confused0.gif");
buttons += emoticonButton("¬¬", "http://smileyjungle.com/smilies/evil11.gif");
buttons += emoticonButton("><", "http://smileyjungle.com/smilies/doh0.gif");
buttons += emoticonButton("o.o", "http://mazinholovedidila.googlepages.com/doh17.gif");
buttons += emoticonButton(":s", "http://mazinholovedidila.googlepages.com/doh28.gif");
buttons += emoticonButton("x(", "http://mazinholovedidila.googlepages.com/evil15.gif");
buttons += emoticonButton("xau", "http://mazinholovedidila.googlepages.com/greetings10.gif");
buttons += emoticonButton(";)", "http://mazinholovedidila.googlepages.com/greetings15.gif");
buttons += emoticonButton("^)", "http://mazinholovedidila.googlepages.com/happy13.gif");
buttons += emoticonButton("2p", "http://smileyjungle.com/smilies/happy15.gif");
buttons += emoticonButton("8p", "http://smileyjungle.com/smilies/laughing10.gif");
buttons += emoticonButton("8)p", "http://smileyjungle.com/smilies/scared4.gif");
buttons += emoticonButton(":2", "http://mazinholovedidila.googlepages.com/love7.gif");
buttons += emoticonButton("db", "http://mazinholovedidila.googlepages.com/music1.gif");
buttons += emoticonButton(":(", "http://mazinholovedidila.googlepages.com/sad4.gif");
buttons += emoticonButton("xD", "http://mazinholovedidila.googlepages.com/smiling4.gif");
buttons += emoticonButton("S2", "http://mazinholovedidila.googlepages.com/infomilies41.gif");
buttons += separator();
editbar.innerHTML += buttons;
}
}
function emoticonButton(name, url) {
return "<span class='' style='display: block;' id='htmlbar_undefined' title='" + name + "' onmouseover='ButtonHoverOn(this);' onmouseout='ButtonHoverOff(this);' onmouseup='' onmousedown='CheckFormatting(event);(function() {var rich_edit = document.getElementById(\"richeditorframe\");var rich_body = rich_edit.contentDocument.getElementsByTagName(\"body\");rich_body[0].innerHTML+=\"<img class=\\\"emoticon\\\" src=\\\""+url+"\\\" width=\\\"\\\" height=\\\"\\\" alt=\\\"" + name + "\\\" title=\\\"" + name + "\\\" />\";})();ButtonMouseDown(this);'><img src='" + url + "' alt='" + name + "' border='0'></span>\n";
}
function separator() {
return "<div style=\"display: block;\" class=\"vertbar\"><span style=\"display: block;\" class=\"g\"> </span><span style=\"display: block;\" class=\"w\"> </span></div>\n";
}
setemoticons("formatbar");
}, false);
OBS: Eu não criei esse código e nem os scripts, apenas estou mostrando como você poderá usá-lo. Os créditos da criação estão no próprio código.
Depois de fazer isso, você deverá editá-lo.
No trecho acima, onde você vir a cor verde você deverá colocar os caracteres que irão representar o emoticon e onde você vir azul deverá colocar o endereço do emoticon já hospedado em algum lugar da net. Depois é só hospedar também o script.
Se tiver dúvidas de como fazer isso veja o tutorial - Como trocar a frase do OutBrain - e lá eu mostro como fazer uma hospedagem de arquivo no Google Sites.
Dê um clique no link gerado pelo upload do arquivo na sua conta no Google sites e instale o script com o Greasemonkey, seus emoticons personalizados estarão disponíveis.
Agora, se por um acaso você quiser desabilitar ou desinstalar algum script que foi adicionado ao Greasemonkey, basta clicar em "Manage User Scripts".
E gerenciar os scripts.
Agora você já pode dar um toque diferente e mais alegre às suas publicações.
