Up next in 10
Custom Mouse Cursor Effect in Blogger & Wordpress (FREE)
1K 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鈥攊t'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 Kito Blogging and in this video I will show you how you can add a custom
0:04
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
0:12
cursor 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's 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 a backup
0:36
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 take it
0:56
Let me paste it here like this. And as you can see that we have set the type to one
1:01
So there is 4 type 1, 2, 3, 4. We can change that and so different cursor effect
1:06
So let me just quickly save the code fast. And there is this error showing in blogger platform Like we need to close the link tag here So let me just close it and let add a forward slash here And let check again So let click on save here
1:24
All right as you can see that the code is now saved. So let's go to the front end and let's press this page
1:31
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 an animation
1:40
like this. So this is a cool way to change the cursor in your website like this. So whenever
1:48
you click on something, it will show a clickable option like this. So let's click on here. And
1:54
as you can see that this is how the cursor effect looks like. And by default, the background
1:58
color is black here. So you can change the color here. So here you can change the hacks code
2:03
of the cursor here. So let me quickly change that. So let me pick a color from here. So I can
2:09
use a color Gila chrome extension and let me pick this color here like this and I will change
2:17
the color code here so I will select the has value here and I will change that now let's click on
2:24
save here all right now let's refresh this page and as you can see that the color is now changed
2:30
so suppose you don want to show the cursor anymore then you can also do that by changing this value remove default cursor from false to true So let me do that and let click on safe
2:44
Now let's refresh this page and as you can see that that cursor is gone now this
2:51
circle cursor is only showing here like that. So in this way you can change the type 2, let's change it to 2 and let's hit safe here
3:01
Now let's refresh this page and as you can see that the cursor type is changed to a solid
3:08
round or solid circle. So in this way you can change these to type 3
3:14
So let's save here. Now let's go to the front end and refresh this page
3:19
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.sp or footer
3:47
.p of your website. Just go to the appearance and you will see this option theme file editor Or you can use a code manager plugin as well Let me quickly show that So here let me search for footer Phpher
4:01
Here it is theme footer. Futter. 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
4:31
change the color of the cursor as your 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
this let's hit update now let's go to the front end and let's refresh the page
4:54
and as you can see that the color of the cursor is now changed so I hope this
4:58
video helps you change the cursor effect in your WordPress and blogger website
5:03
and if you found this video helpful then make sure to hit the like button and for
5:07
more videos like this do subscribe our channel I will see you in next one bye bye