Blogspot: Cara Membuat Bentuk Kursor Menjadi Keren Menggunakan CSS di Blog

Ingin mengubah bentuk cursor di blog atau situs Anda? Ini caranya..

Blogger.com-Yah kita kadang-kadang masih menggunakan kursor yang sama atau tema kursor yang sama di setiap situs web. Ingin mencoba beberapa atau membuat beberapa set kursor baru untuk situs web atau blog Anda? Inilah cara melakukannya menggunakan CSS.

Jadi kita mulai dari CSS. CSS memiliki atribut kursor di mana Anda dapat menentukan style kursor. Pada tanggal penulisan posting ini, kursor memiliki 36 jenis kursor yang dapat Anda gunakan. Mereka dapat diperpanjang dengan menggunakan kursor kita sendiri di file gambar atau .cur (file kursor mengetik).

1. auto
2. default
3. none
4. context-menu
5. help
6. pointer
7. progress
8. wait
9. cell
10. crosshair
11. text
12. vertical-text
13. alias
14. copy
15. move
16. no-drop
17. not-allowed
18. all-scroll
19. col-resize
20. row-resize
21. n-resize
22. s-resize
23. e-resize
24. w-resize
25. ns-resize
26. ew-resize
27. ne-resize
28. nw-resize
29. se-resize
30. sw-resize
31. nesw-resize
32. nwse-resize

Sintaks Untuk Kursor

Anda dapat menerapkan kursor di atas ke tag body Anda atau elemen HTML tertentu. Sintaks vaild di semua browser diberikan di bawah ini.

element{

    cursor: value;

}

Di bidang nilai, semua kursor yang Anda coba dengan melayang di atas dapat diterapkan. Misalnya,

element{

    cursor:cell;

}

Kursor didukung di semua peramban desktop (tentu saja, kursor tidak akan masuk dalam layar seluler atau layar sentuh). cursor:none; tidak didukung hingga dirilis Firefox 3, Safari 5, dan Chrome 5 dan tidak didukung sama sekali di Internet Explorer atau Opera. not-allowed, no-drop, vertical-text, all-scroll, col-resize, row-resize tidak didukung di Internet Explorer dan Opera.

Untuk info kompatibilitas browser lainnya, kunjungi Mozilla.

Kursor Menggunakan URL

Anda dapat menentukan atau mendesain kursor Anda sendiri untuk situs web Anda seperti di bawah ini atau mengunduh di situs web yang menyediakan kursor gratis.

Sekarang pertanyaannya adalah - Bagaimana menerapkan kursor kustom ke situs web?

Untuk itu Anda perlu menggunakan properti css cursor.

.element{

  cursor: url(images/cursor.png), auto;

}

di mana Anda perlu menambahkan URL file kursor gambar atau file .cur, dan otomatis adalah fallback di sini. Yang lain juga dapat digunakan tergantung pada situasi. Kursor URL gambar tidak didukung sama sekali di Opera sampai sekarang.

Untuk diterapkan ke seluruh halaman HTML, gunakan ini dalam body kodenya-

body{

  cursor: url(images/cursor.png), auto;

}

LIVE Demo

Contoh kursor bisa anda lihat di Result dibawah ini:

Ini bisa sangat berguna terutama di aplikasi web dengan tema-tema khusus. Terima kasih telah membaca ikuti CSS-Magz.