How to Change - Mouse Cursor on Blogger?

We can change the cursor display to some customized cursor on blogger. This makes the routine cursor image changed to some customized cursor image when the visitor places the cursor on blogger to which the routine cursor image is changed to some beautiful cursor image.

Let us see the process of changing the routine cursor image to some beautiful cursor image on blogger.



1. Go to: Dashboard -> Template -> Edit HTML

2. Find the below code from template HTML code.
</head>

3. Add the below mentioned code just before </head>

<style type='text/css'>body, a, a:hover {cursor: url(CURSOR IMAGE URL HERE), progress;}</style>

NOTE: Replace the code highlighted in red with the actual cursor image URL (cursor image size should be 16 x 16).

4. Save template and View blog to see the changes.

Now the blogger should display the new cursor image on blogger.

=========================================================================


Where do we get the cursor images of size (16 x 16)?

Use images.google.com website to get the customized images of size 16 x 16.

NOTE: The image we use for the cursor can't be any size, it must be 16 x 16 or else the cursor won't change.


Get the image from images.google.com as mentioned below:



Select the Image exact size = 16 x 16



Click on "View Original Image" and copy the image URL.



Image url: http://www.lovablelabels.ca/images/blogger_logo.png




Change the cursor image URL in the code and add the code just before </head> tag


<style type='text/css'>body, a, a:hover {cursor: url(http://www.lovablelabels.ca/images/blogger_logo.png), progress;}</style>

 

Now Save the and View blog to see the changes.

The cursor should have been changed to the new cursor image added to blogger HTML code.


If you like the post, take a couple of minutes to comment and share.
Your comments are most valuable and would help me come up with better posts.