Lomeutec - Tutoriais e Informação
ESTE BLOG NÃO É MAIS ATUALIZADO. SUAS ATIVIDADES FORAM DEFINITIVAMENTE ENCERRADAS EM 2020.

Emoticons dentro dos posts no blogger com o Greasemonkey

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\">&nbsp;</span><span style=\"display: block;\" class=\"w\">&nbsp;</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.