Merubah Tampilan Kursor di Blog

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> :

<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