Up next in 10
Custom Mouse Cursor Effect in Blogger & Wordpress (FREE)
3K views
Jan 23, 2024
Elevate your website's user experience with this video tutorial on creating a custom mouse cursor effect in both Blogger and WordPress platforms, and the best part—it's completely free! Whether you're a blogger or website owner, this tutorial provides step-by-step instructions on implementing a unique and eye-catching mouse cursor effect to add a touch of creativity to your site. Dive into the customization process and discover how to enhance user engagement with this free and impactful feature. Tune in to make your website stand out with a personalized and stylish cursor effect that captivates your audience. 🖱️✨
View Video Transcript
0:00
Hi everyone welcome to K2 blogging and in this video I will show you how you can add
0:04
a custom cursor effect to your blogger and wordpress website. So whether it is blogger or wordpress or any other CMS platform you can add a custom cursor
0:13
effect to your website by following this video. So first of all we need to add a code snippet to our website and then it will start changing
0:22
the cursor to a different effect. So let me just show you how it works
0:27
So first of all let me just show you how to implement it in blogger website
0:31
So for this let's go to blogger dashboard go to the theme here and you need to take
0:35
a backup of your theme first and then you need to click on the edit html here
0:41
Now all you have to do is scroll down all the way to the bottom and search for the closing
0:45
body tag and you need to paste a code like this. So let me just quickly copy this code from here
0:52
So this is the code for the custom cursor. So let me copy it and let me paste it here like this
0:58
And as you can see that we have set the type to 1. So there is 4 types 1, 2, 3, 4 we can change that and show different cursor effects
1:06
So let me just quickly save the code first. And there is this error showing in blogger platform like we need to close the link tag here
1:16
So let me just close it and let's add a forward slash here and let's check again
1:22
So let's click on save here. Alright as you can see that the code is now saved
1:27
So let's go to the front end and let's refresh this page
1:33
And as you can see that there is this cursor effect. So whenever I move my cursor it will follow a circle like this and it will show a animation
1:40
like this. So this is a cool way to change the cursor in your website like this
1:47
So whenever you click on something it will show a clickable option like this
1:52
So let's click on here and as you can see that this is how the cursor effect looks like
1:57
And by default the background color is black here. So you can change the color here
2:02
So here you can change the hex code of the cursor here
2:05
So let me quickly change that. So let me pick a color from here
2:09
So I can use a colorzilla chrome extension and let me pick this color here like this
2:16
and I will change the color code here. So I will select the hash value here and I will change that
2:23
Now let's click on save here. Alright now let's refresh this page
2:28
And as you can see that the color is now changed. So suppose you don't want to show the cursor anymore then you can also do that by changing
2:36
this value remove default cursor from false to true. So let me do that and let's click on save
2:44
Now let's refresh this page. And as you can see that that cursor is gone
2:50
Now this circle cursor is only showing here like that. So in this way you can change the type to let's change it to 2
2:59
And let's hit save here. Now let's refresh this page. And as you can see that the cursor type is changed to a solid round or solid circle
3:10
So in this way you can change this to type 3. So let's save here
3:16
Now let's go to the front end and refresh this page. And as you can see that it is showing a square type cursor instead of that circle
3:24
So in this way you can change the cursor effect by changing the type
3:29
So let's check how you can change this cursor effect to your WordPress website as well
3:35
So whether you are using Elementor or any other theme it will work in WordPress as well
3:39
So for this I will go to WordPress here and I will go to the dashboard here
3:43
Now you can directly paste this code in the header.php or footer.php of your website
3:49
Just go to the appearance and you will see this option theme file editor
3:53
Or you can use a code manager plugin as well. Let me quickly show that
3:57
So here let me search for footer.php. Here it is theme footer, footer.php
4:04
Now let me paste the same code just before the closing body tag
4:09
So let me quickly copy it. And I will paste it here like this
4:16
Now let's hit update. Now the file is updated. Now let's go to the front end
4:22
And as you can see that our cursor is changed now in our WordPress website
4:26
So it will work throughout the website. And you can again change the type of this cursor and change the color of the cursor
4:33
as you wish. So let me change this color to this color
4:38
So let me copy this color code here. And I will change this color code here
4:48
Like this. Let's hit update. Now let's go to the front end and let's refresh this page
4:55
As you can see that the color of the cursor is now changed. So I hope this video helps you change the cursor effect in your WordPress and blogger
5:03
website and if you found this video helpful then make sure to hit the like button
5:07
And for more videos like this do subscribe our channel. I will see you in next one
5:11
Bye Bye