Uma das principais coisas que fazem do Tumblr uma rede social única é a liberdade que temos para personalizar nossos blogs da forma como quisermos por conta do total acesso que a plataforma nos dá ao HTML dos nossos blogs. Com isso é possível expressar nossa personalidade até mesmo nos mínimos detalhes das nossas páginas.
Hoje eu vou mostrar como você pode personalizar o cursor do seu tema no Tumblr, para variar um pouco do padrão clássico branco com preto e usar algo que combine melhor com o tema que estiver usando.
O tutorial é focado em mostrar como usar cursores personalizados no Tumblr, mas o método que eu estarei mostrando aqui funciona para qualquer código HTML, independente de ser um tema para Tumblr ou não.
Se o tutorial for útil pra você, não esqueça de deixar um like e/ou reblogá-lo lá no meu blog do Tumblr, para me dar uma forcinha. 💕
Tutorial:
Primeiros passos:
1. Antes de tudo, você vai precisar de pelo menos duas imagens para o seu cursor: a primeira imagem vai ser a aparência padrão do cursor e a segunda vai ser a aparência do cursor ao passar por cima de links.
Para este tutorial, eu vou estar usando essas duas imagens abaixo, que são de um cursor personalizado que eu disponibilizei a algum tempo atrás aqui (se quiser, você pode utilizar essas imagens como base para fazer os seus cursores). A primeira é uma setinha e a segunda é uma mãozinha, mas você pode usar a sua criatividade e fazer os cursores no formato que quiser.
Eu não vou estar ensinando como fazer imagens para os cursores neste tutorial, mas você pode utilizar qualquer editor de imagens para isso, apenas certifique-se de salvar as imagens em formato PNG ou GIF com fundo transparente.
2. Depois você vai precisar hospedar (fazer upload/salvar) essas imagens em algum lugar na internet, pois para que o CSS do seu tema possa encontrar essas imagens elas vão precisar ter um endereço online (uma URL).
Você pode hospedar essas imagens em qualquer site que preferir, mas se não tiver nenhum site em mente, você pode utilizar o próprio Tumblr: faça o upload das imagens em um post e salve esse post como um rascunho no seu blog (se não souber como salvar e acessar rascunhos no Tumblr, confira este tutorial). Daí quando precisar copiar a URL das imagens, é só ir até os Rascunhos do seu blog.
DICA: Para pegar a URL de uma imagem basta clicar com o botão direito do seu mouse sobre uma imagem e escolher a opção "Copiar endereço da imagem". Exemplo:
CSS:
Com as imagens já preparadas, é hora de ir para a parte dos códigos.
Como funciona:
Você pode pular direto para a parte do post onde eu passo o código completo (aqui), mas se você quiser entender como ele funciona, aqui vai a explicação:
Em CSS nós tems a propriedade cursor para poder definir quê aparência o cursor do mouse deve mostrar ao passar sobre um determinado elemento da página. Sua sintaxe é assim:
cursor: auto;
E com essa propriedade é possível também definir uma imagem como a aparência do cursor, da seguinte forma:
cursor: url("URL_DA_IMAGEM"), auto;
Sendo que onde está escrito "URL_DA_IMAGEM" é onde a URL da imagem escolhida deve ser colocada. E o parâmetro "auto" deve ser incluído sempre, juntamente com a imagem, caso contrário, o código pode não funcionar.
OBS: Eu não estarei mostrando todas as funcionalidades da propriedade CSS "cursor" aqui, mas você pode ver uma documentação bem completa sobre ela aqui.
Então a lógica seria atribuir essa propriedade ao elemento "mestre" do HTML para que assim o cursor personalizado seja mostrado na página inteira. E o elemento mestre de uma página — basicamente — é a tag <body>, portanto iríamos escrever o código desta forma:
body {cursor: url("URL_DA_IMAGEM"), auto;}
Porém, existem situações em que a tag <body> e até mesmo a tag <html> podem não estar ocupando a tela inteira do navegador e assim vai ter uma parte no final da página onde o cursor não será mostrado com a aparência personalizada como queremos. Então para evitar isso, eu prefiro atribuir o cursor personalizado não apenas aos elementos "mestres" da página, mas à literalmente todos os elementos da página. E para selecionar todos os elementos de uma só vez em CSS utilizamos um asterísco (*), então o código ficará assim:
* {cursor: url("URL_DA_IMAGEM"), auto;}
Isso irá fazer com que o cursor tenha sempre a mesma aparência ao passar por cima de qualquer elemento da página/tema, incluindo ao passar sobre links, o que não é muito legal, porque assim pode ficar um pouco difícil entender o que é um botão e o que não é, na página/tema.
Então, se você quiser definir uma imagem diferente para o cursor quando ele estiver em cima de um link, você precisará indicar que ao passar o cursor especificamente sobre links ele deverá receber uma imagem diferente, ou seja:
a {cursor: url("URL_DA_IMAGEM_2"), auto;}
Porém, apenas para me certificar de que o cursor personalizado funcione em todos os links, eu gosto de selecionar mais algumas "condições" em que um link pode ser encontrado dentro de um tema no Tumblr, ao invés de selecionar apenas links soltos (como é o caso do código acima). Eu não vou explicar a função de cada uma das "condições" que eu uso para não deixar este tutorial imenso, então, se achar necessário, você pode apenas copiar e colar essa parte do código completo que você encontra a seguir.
Código:
Enfim, assim fica o código completo que eu utilizo:
* {cursor: url("IMAGEM_1"), auto;}
a, a li, a li i, a span, a span i, a i, a iframe, a div, a div i, a img, a p, a svg, a path, iframe a {cursor: url("IMAGEM_2"), pointer;}
Sendo que, onde está escrito "IMAGEM_1" você deve colocar a URL da imagem padrão do seu cursor e onde está escrito "IMAGEM_2" você deve colocar a URL da imagem que o cursor deve mostrar ao passar o mouse sobre um link.
No meu exemplo, a imagem padrão (IMAGEM_1) é a setinha verde e a imagem ao passar sobre links (IMAGEM_2) é a mãozinha verde:
Como instalar:
Agora você já tem o código pronto para instalar, mas se você não está familiarizado(a) com códigos HTML e CSS e não sabe como e onde instalar, eu vou te ajudar nisso agora.
Utilizando o CSS Personalizado do Tumblr:
1. Vá até a página Personalizar do seu blog do Tumblr, role a barra de rolagem até o final onde você encontrará o menu "Opções avançadas":
2. Abra as Opções avançadas e abaixo de todas as opções você encontrará um campo de código para incluir um CSS personalizado:
3. Cole o código do seu cursor personalizado ali, salve e pronto:
DICA: Você também pode incluir o código do cursor personalizado diretamente no HTML do tema (como eu mostrarei mais pra frente neste tutorial), mas a grande vantagem de utilizar o CSS Personalizado das Opções avançadas para isso é que você não vai precisar reinstalar seu cursor personalizado toda vez que trocar de tema. Pois o CSS Personalizado não é modificado quando você muda o HTML do tema principal do seu blog, assim o código do seu cursor ficará salvo a menos que você o remova do CSS Personalizado.
Porém, se você seguiu os passos corretamente e seu cursor personalizado não tiver funcionado, talvez seu tema não suporte o CSS Personalizado das Opções avançadas (obs: todos os meus temas atuais aceitam CSS Personalizado). Nesse caso, você tem duas alternativas: fazer com que o tema passe a aceitar o CSS Personalizado (o que é absurdamente fácil de se fazer) ou incluir o código do cursor diretamente no HTML do tema. E eu vou mostrar como fazer essas duas coisas agora...
Como incluir suporte à CSS Personalizado em temas que não o possuem:
1. Abra o HTML do seu tema, aperte CTRL+F e procure por </style> dentro do código:
2. Logo antes de </style> cole/digite o código {CustomCSS}:
E pronto! Isso é tudo o que é necessário para que um tema aceite CSS Personalizado, e a partir de agora qualquer código CSS que você incluir no CSS Personalizado das suas Opções avançadas será lido pelo seu tema.
Como instalar o cursor diretamente no HTML do tema:
Mas, se você não quiser instalar o cursor através das Opções avançadas e preferir fazer isso direto pelo HTML, basta seguir praticamente os mesmos passos:
1. Abra o HTML do seu tema, aperte CTRL+F e procure por </style> ou dentro do código.
2. Daí logo antes de </style> cole o código do seu cursor personalizado:
E é assim que se utiliza cursores personalizados usando apenas CSS.
Se o tutorial tiver sido útil, curta ou reblogue ele lá no Tumblr;
Se tiver ficado com alguma dúvida, envia sua pergunta aqui.
