Variety of Mouse Pointers with More Attractive Interfaces

Hi bloggy readers,

Replacing the interface of mouse pointers has been discussed in my recent post - Customizing the Mouse Pointer Hand Interface in Certain Column? -. In that article, i only showed you how to modify the appearance of mouse pointers and replace it with a crosshair mode. In fact, there are tons of other customizations that we can add to the mouse pointers, such as wait mode, move mode, and other modes that i didn't mention (or i forgot to mention) in my previous post. That's why, this can be the best time to continue that article. Okay, if you want to know how to modify the interface of mouse pointers with variety styles of pointers hand, here i'll show you.

1. Log in to Blogger account
Go to Blogger.com and sign in to your account.

2. Go to Edit HTML
After landing to the Dashboard, now press Layout/Design > Edit HTML.

3. Customize the Mouse Pointer of the Post Title
Okay, in this article, i will only show you how to replace the interface of mouse cursor on the post title area. Now find the CSS styling that controls the post title (Ctrl + F).

.post h3 {
.....
.....
}

If you cannot find the CSS styling .post h3 in your blog template, you can also find the CSS below:

.post h2 {
.....
.....
}

4. Add a new property in CSS styling
After locating the CSS class .post h3 or .post h2 in your template, now add a new property "cursor" inside the CSS styling. Look at the example below:

.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;

cursor:;

}

5. Customize the Mouse Cursor interface
Okay, as i mentioned earlier in this post, i want to give you all another options of mouse pointers that can be picked for your mouse pointers. Here they are.

Property	Values
cursor	nw-resize n-resize se-resize sw-resize s-resize w-resize auto crosshair default ne-resize text wait pointer move e-resize help

6. Paste the value to the property for mouse pointers
Now pick one of those values above, and then put your chosen value to the property "cursor". For example, if you want to use a value "wait", now put that value after the property "cursor".

.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;

cursor:wait;

}

7. Save the Template
Now save the changes by pressing the button Save template. As you can see in your blog, every time your mouse pointers move to the post title area, it will appear as a wait mode.

How to customize the interface of mouse pointers on other column?

Anyway, if you want to customize the interface of mouse pointers on other element/column, you can simply find the exact CSS style that controls that element/column, and then, add a new property "cursor" inside the CSS style. For example, if you want to customize the interface of mouse pointers on the sidebar title, you can simply find the CSS class .sidebar h3 or .sidebar h2, and then, add a new property "cursor" inside that CSS style. Isn't that simple?