Would you like to add a fun anime cursor to your website? If you love Jujutsu Kaisen, Naruto, One Piece, or any other anime, you can easily make a cursor featuring your favorite character!
In this tutorial, I’ll guide you through each step to create your own custom anime cursor, including how to remove the background from an image and apply it to your Blogger website.
Step 1: Choose an Anime Character Image
First, select an image of your favorite anime character. You can use:
- Google Images
- Your own screenshots
For this tutorial, I’ll be using Satoru Gojo from Jujutsu Kaisen as an example.
Step 2: Remove the Background
Since we want a clean cursor, we need a transparent PNG. I used Canva to remove the background. (Note: This feature is only available with the Pro version.)
Download the image as a PNG.
Step 3: Resize the Image for a Cursor
Browsers work best with small cursor sizes like 32x32 px or 48x48 px. Again, I used Canva to resize it.
Step 4: Upload the Image Online
Now, you need to host your image online.
If you use Blogger, upload the image to a post (don't publish it) and copy the direct link.
Step 5: Add the Cursor to Your Website
Now it’s time to add your custom cursor using CSS!
<style type="text/css">
body {
cursor: url("YOUR_IMAGE_URL_HERE"), auto;
}
</style>
<style type='text/css'>
body {
cursor: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEge1tvoUyn56kQ11fnRBtkLAD3YgE972MsVAWZE90UPdirSzpTZSiDfvqEuDaslh77vY7_-yDLvFXav3it7mTM4hz9mm69V5tHXZWFCRf_zOL-ln7iJOYFp-4L_RfRIzcP0AeaOCqO6pN0a33kpxoNdogqCns2D1zx5sswHhVQVmzDImezY4V5jolKemrc/s16000/satoru%20gojo.png"), auto;
}
</style>
0 comments