How To Change Mouse Cursor on Blog & Website

Customizing every part of the website or blog is a good trend now a day. Every section of the web or blog page, if have a combination or matching with the colour scheme of the website or blog, leaves a pleasant effect on the visitor. Consider a web page designed in the dark grey or hot black colour scheme. The whole website or blog is giving a nighty dark effect except the scroll bars and the cursor or pointer. The default white scrollbars and pure white mouse pointer will surely give a nasty outcome and will dump the whole beauty of the website or blog.

This is in the case of the dark themed blog or website, even in the lighter colour scheme’ website or blog the normal white mouse cursor and the default scrollbars do not create a better influence on the viewer.

There are many ways to change the default scrollbars and mouse pointers with your own. But in this post I will only describe the shortest and easiest method of changing the mouse pointer on the web or blog page. Since this post is only about the changing of the cursor therefore the scroll bar customization will be define in other post.

To change the mouse cursor on you website or blog the first thing you need is the mouse pointer or cursor itself. There are many website online that provide free cursors and pointers animated and non-animated both. If you want to use your own designed cursor you can surely do that. To do so you have to just upload your cursor at a web hosting service.

The better way is to use the online free cursors, since there are thousands of cursors already available at them. But still if you are not satisfied with them you can use your own as described earlier. Here I am using the mouse pointers from the most popular cursor site Cursors-4u. I can easily change the cursor when I need it by simply changing the URL of the cursor in the code with the URL of my next choice.

The code used is same for both the website and blog. For the website just go to your .css file and paste the following code in the end of the CSS file. If you want a cursor that change on the hover than use the second code instead of the first. The first URL in the second code is for the normal cursor that will be shown on the whole page, while the second URL in the second code is for the cursor shown when the mouse is overlying on a linked object.

Code

body, a, a:hover {
cursor: url(http://cur.cursors-4u.net/cursors/cur-2/cur116.cur), progress;
}

Code

body {
cursor: url(http://cur.cursors-4u.net/cursors/cur-2/cur116.cur), progress;
}
a, a:hover {
cursor: url(http://cur.cursors-4u.net/cursors/cur-2/cur117.cur), progress;
}

For installing the customized cursor in the blogger paste one of the above codes (what suits you best) in the style tag in the header section of the blogger HTML. For example:

Code

<style type='text/css'>
body {
cursor: url(http://cur.cursors-4u.net/cursors/cur-2/cur116.cur), progress;
}
a, a:hover {
cursor: url(http://cur.cursors-4u.net/cursors/cur-2/cur117.cur), progress;
}
</style> 

Feel free to ask any queries.