Cara Mengubah Cursor dengan CSS

Mempunyai blog yang unik merupakan impian banyak blogger. Mulai tampilan header, gaya bahasa dan penulisan, hingga hal-hal terkecil dan detail seperti cursor. Terkadang kita ingin mengubah cursor bawaan menjadi cursor sesuai keinginan kita. Sangat menarik memang ketika sampai cursor pun senada dengan tema yang kita usung di blog kita. Misal blog cewek yang bertema lembut, biasanya akan ingin menganti cursor-nya dengan bentuk "love". Berikut ini adalah cara mengubah cursor dengan CSS.

Cara Mengubah Cursor dengan CSS

Hal yang pertama harus kamu siapkan adalah gambar yang akan menggantikan cursor bawaan browser kamu. Setelah itu, tentukan bagian mana yang jika diarahkan berubah menjadi cursor yang kamu siapkan. Di bawah ini merupakan demo cursor yang berubah ketika mengarah pada bagian tertentu (pada kasus ini, cursor berubah pada DIV ber-class ".ubah").

See the Pen Caewp by Iskandar Dzulkarnain (@iskael) on CodePen

Menarik bukan? Jika kamu ingin memberlakukannya ke seluruh bagian, maka letakkan properti cursor pada body, contoh:

body { cursor: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_BuDgNGYU6ipmCilc5sy2skDYXOFWs3nkKsjueO-F-PAkr0Ras-nKCLRCkBBsXwqUN6XyZ2qIwL5Wu3KgoJfE_5DK3wkVKBXaDslcn4JFgZojGEXkAUG86enpn-uPPdKhVmClZc2yVBw/s1600/cursor.png); }


Kamu juga bisa mengubah "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_BuDgNGYU6ipmCilc5sy2skDYXOFWs3nkKsjueO-F-PAkr0Ras-nKCLRCkBBsXwqUN6XyZ2qIwL5Wu3KgoJfE_5DK3wkVKBXaDslcn4JFgZojGEXkAUG86enpn-uPPdKhVmClZc2yVBw/s1600/cursor.png" dengan URL gambar yang lainnya sesuai keinginanmu. Mudah bukan? Selamat mencoba :)