How to Create a Custom Anime Cursor for Blogger

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 
  • Pinterest
  • 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.



Upload your custom anime cursor image online to use it on your Blogger blog.


Step 5: Add the Cursor to Your Website 

Now it’s time to add your custom cursor using CSS! 


For Blogger (Blogspot) Go to Blogger > Theme > Edit HTML. Find </head> and paste this code above it:

Add your custom anime cursor to your Blogger website using CSS for a personalized touch.





 
<style type="text/css">
body {
    cursor: url("YOUR_IMAGE_URL_HERE"), auto;
}
</style>


Replace YOUR_IMAGE_URL_HERE with the direct link to your PNG. 




Replace YOUR_IMAGE_URL_HERE with the direct link to your custom PNG cursor image.




Here is the code for the custom Gojo cursor:



<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>



Save and preview your blog! 


Step 6: Enjoy Your Anime Cursor

That’s it! Now your website will have a custom anime cursor featuring your favorite character. 




0 comments