Corações, Estrelas, Brilhos, Flores, Notas no ponteiro do mouse do blog (Html)


Lembra quando há muito muito tempo postei aquele efeito de corações caindo do ponteiro do mouse para blog? E daquelas bolhinhas que animavam o cursor? Então, parecido com aqueles códigos, compartilho este do post de hoje, e, dando uma olhadinha no script, descobri que nesse há como usar outros símbolos para deixar o cursor com efeitos mais kawaii, como estrelas, notas musicais, flores, brilhinhos... Funciona assim:

1. Primeiro abra o script Love Heart Cursor do site http://www.mf2fm.com/rv em um editor de html (como sugestão, recomendo o Codepen, no qual vc já pode editar os scripts e ver como fica, veja outros editores aqui). 

2. Logo no início do código você encontra esse trecho:
var colours=new Array('#fee', '#fcc', '#f9b', '#fee', '#fcc', '#f9b'); // colours of the hearts
var minisize=10; // smallest size of hearts in pixels
var maxisize=15; // biggest size of hearts in pixels

Em que
No lugar de #fee, #fcc e #f9b são os códigos de cores, os quais podem ser substituídos por outros de sua preferência. Os números 10 e 15 são o tamanho dos símbolos que vão aparecer quando se move o mouse, quer dizer que eles terão 10 pixels e ficam maiores até 15 pixels, você pode mudar para deixá-los maiores ou menores ou sem mudar tamanho com valor igual.

3. Busque (Ctrl+F) no script por 9829. Esse número aparecerá 2 vezes e ele se refere ao código do símbolo de coração. Se mudar esse número, aparece outro símbolo. Sugestões:
♥ - 9829
❤ - 10084
♪ - 9834
♡ - 9825
✿ - 10047
✦ - 10022
✧ - 10024
★ - 9733

4. Depois de alterar o script, copie ele e cole no html do seu template antes de </head> ou em um novo gadget html/javascript, salve e veja como ficou.
Aqui no meu blog esse script funcionou mais ou menos, os efeitos apareceram apenas no topo do blog, quando deveriam aparecer por toda parte quando movesse o mouse, talvez porque ele seja responsivo, já que, testei o mesmo código em outro template responsivo e não deu certinho (๑˃́ꇴ˂̀๑)‧˚₊*̥ Testei em um modelo padrão do Blogger (não responsivo) e funcionou direitinho! Também fica lindinho no Tumblr, já vi muita gente usando esse código por lá.

E, para quem quiser usar alguns modelinhos que fiz testando lá no codepen, veja abaixo, copie apenas o que houver na área HTML e cole em seu template (mova o mouse nos quadrinhos coloridos em Result para ver o efeito).
Flores
See the Pen Efeito para Cursor (flores) by Rô (@kawaii) on CodePen.

Corações
Estrelas
See the Pen Efeito para cursor (stars) by Rô (@kawaii) on CodePen.

Notas Musicais
Brilhinhos Coloridos

Se vc curte esses efeitos para cursores que de vez em quando posto aqui no blog, saiba que tem como fazer quase igual no Windows, usando imagens e programas tipo CursorXP ou ClickStar ;3
E é isso!







Postar um comentário

7 Comentários

  1. faz um blog de como personalizar redes sociais no celular tipo,google,youtube,etc eu iria amar

    ResponderExcluir
  2. Ai que graça, gostei do de coração e o de notas musicais *w* é muito fofo! Acho que vou tentar colocar no Tumblr que vai combinar mais :3

    Apenas eu, Day

    ResponderExcluir
  3. Coloquei estrelinhas, adorei, obrigada - http://livroinfantilpersonalizado.blogspot.com/

    ResponderExcluir
  4. Obrigada, seu post foi muito útil e os símbolos lindos!

    ResponderExcluir
  5. Aliás, eu quis mudar o símbolo de florzinhas pra estrelinhas, achei esse site com os códigos dos símbolos: https://www.w3schools.com/charsets/ref_utf_symbols.asp
    É só fazer três substituições e dá pra colocar qualquer símbolo.

    ResponderExcluir
    Respostas
    1. Nossa que legal :D Vou tentar tbm depois. Obrigada

      Excluir

Muito obrigada por seu comentário e por sua presença! Ambos são super importantes para mim.

Apenas peço que:
- Comente a vontade, dê sua opinião, faça críticas, esclareça suas dúvidas e dê suas sugestões sobre o assunto referente às postagens;
- Use um vocabulário livre para todas as idades;
- Não ofenda ninguém em hipótese alguma.

Os comentários são moderados e não são permitidos comentários de pessoas que não se identifiquem. Algumas dúvidas podem ser previamente esclarecidas na F.A.Q, assim como créditos e outras coisas.

Por favor, entrem em contato por meio das redes sociais também para dúvidas, sugestões, pedidos ou outros:
Facebook - Twitter - Deviantart

up