5 Jan 2014

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(http://1.bp.blogspot.com/-Yqeh-8Ows7U/UserO9oFLoI/AAAAAAAAB4E/bPqhivuKKQw/s1600/cursor.png); }


Kamu juga bisa mengubah "http://1.bp.blogspot.com/-Yqeh-8Ows7U/UserO9oFLoI/AAAAAAAAB4E/bPqhivuKKQw/s1600/cursor.png" dengan URL gambar yang lainnya sesuai keinginanmu. Mudah bukan? Selamat mencoba :)

Tidak ada komentar:

Poskan Komentar

Populer Terbaru Komentar

Entri Terbaru

Komentar Terbaru

Creative Commons License
All contents by Iskael is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
Based on a work at Iskael.
Permissions beyond the scope of this license may be available at Iskael.
© 2013 Belajar Ngeblog bersama Iskael. All Right Reserved. Powered by Blogger. Iskael Template by Iskael. Submitted on TopBlogIndonesia