Box flutuante para curtir a fanpage (aparece ao sair do blog e não ao entrar!)

Em 2016 eu ensinei aqui no blog como instalar um box flutuante que aparece ao sair do blog e não ao entrar.
Não sabe do que estou falando?
Veja:

Para ver o tutorial do box Assinar o feed clique sobre a imagem

No tutorial em questão eu prometi adaptar os códigos para exibir o box de curtir a fanpage, mas acabei esquecendo...
Até que um leitor do blog me perguntou se o tutorial havia sido feito, e por isso resolvi trazê-lo hoje.
Depois de pronto o resultado será este (claro que com a sua fanpage):


Demonstração do tutorial

Como instalar o Box de curtir a fanpage que aparece ao sair do blog e não ao entrar?

Para começar voce precisará do código da caixa de curtir a sua fanpage.
Vou deixar aqui o link que ensina como conseguir esse código, mas também vou deixar o código padrão na página com todos os códigos necessários, ok?
Então, para começar, acesse a página com os códigos necessários a execução do tutorial:

Copiar o código

Agora vá ao painel de seu blog e clique em Tema. A seguir clique em Editar HTML e dentro da caixa do código-fonte tecle Ctrl+F. Na barra de busca que expandir digite ]]></b:skin> e tecle Enter para localizar.
ACIMA de ]]></b:skin> cole o CÓDIGO CSS.
Salve.

A seguir, na barra de busca, digite </head> e localize.
ACIMA de </head> cole o CÓDIGO JAVASCRIPT.

Pausa para informação importantíssima!
Caso seu blog não use o protocolo HTTPS o arquivo javascript a ser usado é este:
<script src='http://yourjavascript.com/08011672710/ouibouncebyelainegaspareto.js'></script>

Mas caso seu blog use HTTPS no endereço o código javascript será este:
<script src='https://sites.google.com/site/codigoselainegaspareto/scripts/boxflutuantebyelainegaspareto.js'/>

Isso acontece por causa do sufixo http ou https.
Se for blog que começa com http tem que usar o arquivo que começa com http.
Se for blog que começa com https, precisa usar o arquivo que começa com https.
Sim, foram horas até sacar isso...
Fim da pausa

Inseriu o código correto?
Salve.

Localize agora </body> e acima disso cole o CÓDIGO HTML.
Salve e verifique se está tudo ok.
O box deve surgir ao levar o mouse para fechar a página, mas precisa rolar a mesma um pouco antes de clicar para fechar.
Tudo ok?
Então vamos trocar a minha fanpage pela sua.

Como o Blogger não aceita códigos não-parseados em seu código-fonte precisamos então converter esse código.
Calma, é simples!
Acesse essa página aqui do meu blog:
Conversor de códigos.

No primeiro campo cole o código completo de sua caixinha Curtir e clique em Converter.
Copie o conteúdo do campo abaixo (Código convertido) e cole no local determinado no CÓDIGO HTML.
Salve.
E tá feito!

Dicas extras importantes

Abaixo deixo algumas respostas para perguntas que podem surgir.
Antes de ficar frustrado por não dar certo releia o tutorial, certifique-se de haver entendido tudo e de não haver esquecido nada, e leia as dicas abaixo.
Testei em vários modelos diferentes e em todos deu certo, então pode crer: dá certo, basta fazer certinho, com paciência e persistência...


1- No CÓDIGO CSS você altera coisas como cores e fontes.
Cores eu deixei as oficiais do Facebook mas se quiser trocar fique à vontade. Sempre altere os códigos hexadecimais precedidos de # para trocar as cores que estão no código pelas cores que deseja.

2- A fonte Muli pode ser trocada pela fonte que desejar, e nesse caso precisa alterar também o CÓDIGO JAVASCRIPT dela, ok?

3- Aliás, falando em javascript: eu hospedei os arquivos que fazem o tutorial funcionarem uma conta minha mas sugiro que você baixe o arquivo e hospede em seu próprio servidor, ok?
Para baixar pé só clicar sobre o link e ele abrirá, daí é só copiar, colar em um bloco de notas, salvar na extensão .js e hospedar em seu host.

 Aqui tem um tutorial que ensina como hospedar arquivos javascript.

4- A largura ideal da caixa de curtir, nesse caso, é de 530px, ok? Caso queira alterar larguras precisa entender o básico de CSS. Mas faça testes até chegar onde deseja; é assim que passo horas pra chegar no resultado que partilho aqui.

5- Caso seu blog tenha algum outro script que use JQuery para funcionar pode dar conflito e ambos se anularem. Aí não tem jeito, tem que escolher...

6- Para finalizar: gostou do tutorial e acredita que ele será útil para seus leitores? Então me ajude a divulga-lo. Eu  agradeço muito!