Cara Merubah Tampilan Cursor Blog. Dalam teknologi komputer, kursor adalah suatu petunjuk atau indikator posisi pada monitor komputer atau peranti tampilan lain yang akan merespons masukan dari suatu masukan teks atau peranti penunjuk. Kursor secara umum dapat dibagi menjadi dua jenis: kursor teks dan kursor tetikus. Kursor teks adalah petunjuk pada antarmuka baris perintah (CLI) atau editor teks yang menunjukkan tempat teks akan diletakkan sewaktu dimasukkan (titik penyisipan) dan biasanya berupa garis bawah, segi empat, atau garis vertikal yang dapat berkedip atau stabil. Kursor tetikus adalah petunjuk sekunder yang ditambahkan oleh tetikus atau peranti penunjuk komputer lain untuk menunjukkan posisi penunjuk tersebut yang bisa berbentuk seperti tanda panah pada sistem GUI atau kotak pada sistem CLI.
Kursor pada halaman Blog juga dapat disesuaikan dengan keinginan kita. Bagi anda yang senang mengedit template blog, mengubah kursor pada blog mungkin sudah sering dilakukan. Ternyata untuk mengubah tampilan kursor tersebut ada beberapa cara yang dapat dilakukan, ada yang menambahkan kursor melalui widget, ada pula yang menggunakan cara edit template. Pada tulisan ini, saya akan mencoba menggunakan edit template. Untuk melakukan edit template dapat dilakukan dengan cara sebagai berikut :
1. Login ke blog anda.2. Klik Template > Edit HTML.
3. Cari kode </head> dan tempatkan kode css (di bawah ini) di atas kode tadi (</head>).
<style type="text/css">body, a:hover {cursor: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_1Zsp_Wm47u2QJTFxQ9XgzfjgmLRtG5X8bGnR8CUFrAdUl_4hvOnxGo-dCBbhCbnyG-VXnAIJ83l0onRJMyHFwHuLFIw-v1By-pk8hF7VomWoaD-9XGQpktiEN8VZtoTmqYoVMzQ2gHt1/s1600/zoom_out.png), progress;}</style>
"Simpan Template". Url gambar di atas (warna biru) bisa anda ganti dengan gambar cursor yang anda suka, anda bisa membuatnya sendiri. Anda juga dapat menggunakan gambar yang ada pada tabel di bagian bawah tulisan ini. Caranya, letakan mouse di atas gambar, klik kanan mouse dan pilh copy image location (Firefox) atau copy image URL (Google Chrome). Catatan, sebaiknya gambar yang digunakan diunggah ke blog milik kita. Karena apabila gambar yang kita gunakan tersebut dihapus oleh si pemilik gambar, Eror.
Cara kedua adalah dengan cara mengubah kode css kursor tersebut. Biasanya apabila kursor tidak diatur, akan tampil kursor standar (
). Berikut kode css bentuk kursor, letakkan kode css (di bawah ini) di atas kode </head> :
Cara kedua adalah dengan cara mengubah kode css kursor tersebut. Biasanya apabila kursor tidak diatur, akan tampil kursor standar (
). Berikut kode css bentuk kursor, letakkan kode css (di bawah ini) di atas kode </head> :<style type="text/css">body, a:hover {cursor: progress;}</style>
Untuk merubah bentuk kursor yang lain tulisan progress silahkan anda ganti dengan kode yang ada di bawah ini :
Misal :<style type="text/css">body, a:hover {cursor: help;}</style>
"Simpan template" dan lihat hasilnya. Silahkan anda coba dengan kode yang lain, pada tulisan ini saya sajikan kode kursor dan contoh gambar kursornya. Semoga bermanfaat.
| Kode | Keterangan | Gambar |
|---|---|---|
| alias | Kursor menunjukkan sesuatu yang akan dibuat. |  |
| all-scroll | Kursor menunjukkan sesuatu dapat digerakan ke segala arah |  |
| auto | Kursor standar | |
| cell | Kursor menunjukkan sel dapat dipilih. |  |
| col-resize | Kursor menunjukkan kolom dapat dirubah secara horizontal |  |
| copy | Kursor menunjukkan sesuatu yang akan disalin |  |
| crosshair | Kursor crosshair |  |
| default | Kursor standar | |
| e-resize | Kursor menunjukkan bahwa tepi kotak dapat digeser ke kanan |  |
| ew-resize | Kursor menunjukkan dapat digeser dua arah. | |
| help | Kursor menunjukkan bahwa bantuan tersedia |  |
| move | Kursor menunjukkan bahwa sesuatu dapat dipindahkan | |
| n-resize | Kursor menunjukkan bahwa tepi kotak dapat digeser naik |  |
| ne-resize | Kursor menunjukkan bahwa tepi kotak dapat digeser naik & ke kanan |  |
| nesw-resize | Kursor menunjukkan dapat digeser dua arah. | |
| ns-resize | Kursor menunjukkan dapat digeser dua arah. | |
| nw-resize | Kursor menunjukkan bahwa tepi kotak dapat digeser naik & ke kiri |  |
| nwse-resize | Kursor menunjukkan dapat digeser dua arah. | |
| no-drop | Kursor menunjukkan item tidak dapat diseret. |  |
| none | Tidak ada kursor | Blank |
| not-allowed | Kursor menunjukkan tindakan tidak dapat dilakukan | |
| pointer | Kursor pointer menunjukkan suatu tautan/link. |  |
| progress | Kursor menunjukkan bahwa suatu program sedang sibu |  |
| row-resize | Kursor menunjukkan bahwa tepi kotak dapat diubah ukuranya secara vertikal |  |
| s-resize | Kursor menunjukkan bahwa tepi kotak dapat digeser ke bawah | |
| se-resize | Kursor menunjukkan bahwa tepi kotak dapat digeser ke bawah & ke kanan | |
| sw-resize | Kursor menunjukkan bahwa tepi kotak dapat digeser ke bawah & ke kiri | |
| text | The cursor indicates text that may be selected |  |
| vertical-text | Kursor menunjukkan bahwa suatu teks vertikal dapat di blok |  |
| w-resize | Kursor menunjukkan bahwa tepi kotak dapat digeser ke kiri | |
| wait | Kursor menunjukkan bahwa suatu program sedang sibuk |  |
| zoom-in | Kursor menunjukkan bahwa sesuatu dapat diperbesar |  |
| zoom-out | Kursor menunjukkan bahwa sesuatu dapat diperkecil |  |
