Lomeutec - Tutoriais e Informação

Emoticons dentro dos posts no blogger com o Greasemonkey

  • Publicidade: Powered by Google

    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.

    Nilton (LOMEUTEC)
    É formado como técnico em informática com ênfase em análise de sistemas e programação comercial. No entanto gosta mesmo é de fazer publicações para o blog lomeutec.blogspot.com onde compartilha grande parte do pouco conhecimento autodidata que adquire através de experiências, estudos diários e até mesmo de tudo aquilo que descobre enquanto navega despreocupadamente pela internet em seus momentos de ócio. Aqui no LTI acumula funções de publicador, moderador, editor, administrador e o que mais for possível e necessário.