How to Add a Custom Cursor to WordPress and Blogger website using CSS?

In this article, You will learn how to add a custom cursor effect to the Website and makes your website looks more professional. 

This is super helpful for Portfolio and design websites but you can use it on any website without compromising on the speed performance.

To change the cursor effect, you need to add a small CSS code to your website.  This is done with the CSS cursor property.

What is the Cursor property in CSS?

The cursor property of CSS allows us to specify the type of cursor shown in the webpage. 

There are more than 36 cursor properties that you can use in the CSS like alias, auto, copy, crosshair, grab, etc.

By default, most websites use the default auto cursor property, but in this tutorial, you will learn how to add a custom cursor property by adding an icon through the URL. 

Video Guide

How to Add Custom CSS Cursor in Blogger?

To add the custom Cursor in Blogger follow the below steps. 

1. Go to Blogger dashboard and click on Theme section. 
2. Take a backup of your theme and click on the Edit HTML option. 
3. Now scroll down to the bottom and search for the </body> tag. 
4. Now paste the below CSS code and paste it just above the </body> tag. 

<style>
html,body{cursor:url("https://img.icons8.com/fluency/48/000000/cursor--v1.png"), auto;}
</style>

Now your custom CSS cursor is added to the Blogger website. 

Here, you can further change the cursor icon of your own by changing the URL field in the CSS code. 

How to Add Custom CSS Cursor in Wordpress?

To add the custom CSS cursor in Wordpress follow the below step. 

Step-1: Go to WordPress dashboard and click on Appearance > Customize option. 

Step-2: Now click on the Additional CSS section and paste the below code in it. 

Step-3: Now save the code and the custom cursor is applied to your wordpress website. 

html,body{cursor:url("https://img.icons8.com/fluency/48/4a90e2/cursor--v1.png"), auto;}

Note: Here you don’t need to add the style tag as you are pasting the code on the CSS stylesheet.

Here you can change the Icon of the CSS cursor by changing the URL.

To get the icons for your CSS cursor you can use some websites given below.

• Iconmonstr
• Icons8

I hope you got the idea of how to add a custom cursor effect to both blogger and Wordpress websites.

If you have any doubts regarding this, you can ask me in the comment section or you can join our Telegram discussion Group.

Read More: Top 10 CSS tricks for Wordpress customization.