How To Change Your Blogger Blog's Mouse Cursor Using CSS!

 You must have noticed that when you bring your cursor inside the area of this post, it changes to a cute little smiley! Similarly, after implementing this tutorial, whenever someone will visit your blog, their mouse cursor will be automatically transformed to what
you want! Cool, isn't it?

Okay, before I tell you how to implement the cursor hack, let me make some things clear.

• We are achieving this using CSS. Hence, there will be literally no effect on your blog's page speed whatsoever (You'll laugh out loud when you'll see how small the code really is!)
• This is CSS and hence, it works on any platform. Be it Blogger, Wordpress or even your own personal website. The codes works for all!
• The cursor is nothing but an image! So you can select any image you want!

Steps to implement on Blogger:

1. Go to your blogger dashboard >> Template >> Edit HTML

2. Search for the following code:

]]></b:skin>

3. Past the below code directly above/before ]]></b:skin>

body{
cursor: url(your-image-url), auto;
}

Replace your-image-url with, obviously, your image's URL! This image will act as the cursor when somebody comes to your blog. It can be any image like PNG or JPG. You can also use GIF images to make the cursor animate!

4. Hit Save template and you're done!

Look at the beauty of CSS, such a thing achieved by literally 1 line of code!

For other platforms

The above steps were for specifically for Blogger. The fact that this cursor hack works in all the platforms is because it's pure CSS! So no matter on which platform you are, you simply have to add the above given CSS code between <style> tags like this:

<style>
body{
cursor: url(your-image-url), auto;
}
</style>

It's not a compulsion but to makes things easy to understand, paste this code directly above/before your website's closing </head> tag.

Some pro tips

• Make sure that the image you use is small in size, both memory-wise and pixel-wise! It should not take much space as cursor are usually small.
• You can upload that image on Picasa Web Albums >> Copy it's URL >> And paste it in the above given CSS code.
• You see that little auto written at the end of the code? That's nothing but back-up! If something were to happen (like your visitor is using an old browser which doesn't support the cursor property or the image you hosted is deleted or something like that!), the default cursor will automatically be displayed!
• If you are familiar with the basics of HTML and CSS, you can also use the cursor property on specific areas of your website [using <div> tags] and not the entire body (like I did for this post!)

Have fun!