Hi angels, I recently figured out how to create your own custom cursor for Tumblr and thought I’d share what I learned with you. In this little guide, I’ll walk you through the process step by step. ♡
You need: - a PNG image you want to use as your cursor (recommended size: 32×32 or 40×40 otherwise your cursor will be huge) - the ability to read this guide
Step 1: Decide which picture you want to use, remove the background (you can easily do this with Canva), and resize it to the correct dimensions (recommended: 32×32 or 40×40 - you can try other sizes but there is a high chance it looks weird or huge). I used an image I found online and added a small cursor in the upper-left corner.
Example:
Step 2:
Upload your PNG to Tumblr and post it privately. You can also use any other platform that allows you to host images - the important thing is that you need a direct link to the picture. If you’re using Tumblr, simply right-click the image after posting it privately and select "Open image in new tab." The link from that tab will be your direct image link.
Step 3: Now we do a little "coding" but no worries it is very easy! The code for a custom cursor is:
<style> * { cursor: url("YOUR DIRECT IMAGE LINK") 0 0, auto !important; } </style>
Copy the whole code with YOUR direct link in it. The 0 0 is where your cursor clicks, 0 0 is the left upper corner of your picture.
Step 4: Go to your desktop version of your blog - edit - edit HTML. Your code needs to be right over the <head> section, the <head> section should be on top of your custom HTML but if you can't find you can press ctrl + f and search <head>.
It should look like this in your HTML: <style> * { cursor: url("YOUR DIRECT IMAGE LINK") 0 0, auto !important; } </style> <head>
This is it! I can’t promise it will work for everyone, but it worked for me, so I wanted to share it with you. Always make a backup of your HTML before trying, and please don’t tag me if it doesn’t work. Of course, if you have any questions, feel free to ask me! ♡
