HackingUniversity - Hacks . Tricks . How-To's

26 May 2014

How to Change Cursor in Blogger or Wordpress Websites

change cursor bloggerHave you already dreamed of customizing your blog or website to something really unique, adding contrasts, background and adding some cool widgets, well than its time to change your mouse cursor for giving any interesting effect to your wiggling mouse.

We have also posted other effects related to mouse like adding falling stars effect and many more well changing mouse cursor does not include any typical scripting or anything but just a small CSS is added to change your mouse to any image or .cur file.

So now you can follow the below tutorial on how it can be done in your blogger or Wordpress blogs, and soon you will have your cursor changed to the one you have desired to be as your blogger icon. Well if you are searching for the demo, you might be able to see the BIG Mouse Cursor live on this post.

  1. Go to Blogger > Template > Edit HTML. (Well if you are wordpress you can simply jump into your CSS stylesheet and follow below step.)
  2. Press Ctrl + F and search for </head> tag and paste the below code above it.

    <style type='text/css'>body,a,a:hover{cursor:url(https://googledrive.com/host/0B6-apgHh7s2tbXV4MFJrUFljWW8/aero_arrow_xl.cur),progress}</style>

  3. Now your code is placed and you can save your template, the .cur provided in the above code is basically the enlarged size of normal one you can change that URL to your cursor URL.

Note Well I have tried using the .GIF image and it works pretty well too, so in place of .cur file above you can also paste the .GIF image link.

Uploading Cursor Files to Google Drive

Now its really hard to find a reliable online source where you can easily upload and host your .cur files, but obviously going with google could solve all that problem. Well as you can see above I have hosted the .cur file on google drive so lets see how you can upload too for faster loading.

  1. Well make sure you have a nice .cur or .GIF file with full edge to edge height and width parameters.
  2. You can use the Windows Cursors, I have used the default windows cursor that comes loaded with the windows.
  3. Navigate to C: > Windows > Cursors, now just copy the one you like to your desktop.
  4. Now open Google Drive account and then upload the .cur or .gif file you have.
  5. Now right click on the file and under Share make sure the file is set to Public else it won't load on your site.
  6. Now right click once again and choose Details and Activity and now under Details you will get the direct link to your file.
    google-drive-direct-link
  7. Now just copy that link and replace it in the above code, that's it now your new cursor will get loaded.

That’s it this will work like a charm, if you are on Wordpress you can follow the same procedure and paste the code right above the </head> tag I cannot explain about Wordpress in brief as I do not use it. So I hope this tutorial will give a pretty nice look to your blog, well you can even add some animated stuff, depends on your creativity, so have fun exploring and experimenting.