Cara Mengganti Cursor Mouse Pada Halaman Blog


Trik Cara Mengganti Cursor Mouse Pada Halaman Blog yaitu dengan menggunakan kode CSS standar untuk mengatur tampilan kursor pada halaman web. Tipe dan gambar cursor mouse pada halaman web atau elemen HTML dapat diganti sesuai kebutuhan. Secara default pada kode CSS terdapat 32 tipe cursor mouse sedangkan untuk gambar cursor mouse dapat diganti dengan gambar berformat PNG dan PNG64, kecuali pada browser IE (Internet Explorer) mampu menggunakan gambar berformat [ani] (animated cursor). Contoh cursor mouse yang menggunakan gambar seperti yang terlihat pada halaman blog ini jika dilihat menggunakan browser PC, Laptop, Netbook dan sejenisnya. Apabila dilihat menggunakan browser mobile maka cursor mouse tidak akan terlihat.

Mengganti cursor mouse standar baik tipe maupun gambar dengan cursor pilihan sendiri merupakan salah satu cara agar tampilan blog semakin unik dan menarik, apalagi jika cursor mouse tersebut menyatu dengan tema blog yang digunakan semakin tambah kece aja tampilan halaman blog tersebut. Harap diperhatikan juga untuk penggunaan dari tipe dan gambar cursor mouse jangan sampai membingungkan dan menyulitkan pengunjung untuk melakukan navigasi pada halaman web / blog. Gunakan trik ini dengan bijak.

Sebelum anda mulai berkreasi dengan kode CSS cursor mouse ada baiknya anda mempertimbangkan beberapa faktor berikut ini.

  • Gunakan gambar cursor mouse yang memiliki ujung lancip agar memudahkan pengunjung dalam melakukan navigasi elemen HTML.
  • Gunakan gambar yang menarik dengan ukuran yang tidak terlalu besar ataupun kecil.
  • Pastikan tipe cursor yang digunakan tidak membingungkan pengunjung web / blog anda.
  • Pastikan penggunaan tipe cursor mouse disesuaikan dengan elemen HTML yang ditampilkan.
  • Jangan menggunakan Javascript untuk memanipulasi penggunaan animasi pada cursor mouse, karena apabila ada browser yang memblokir penggunaan Javascript maka cursor mouse tidak akan berfungsi dan halaman web / blog anda tidak akan bisa di navigasi.

Itulah beberapa faktor yang perlu anda pertimbangkan sebelum menerapkan pengaturan kode CSS cursor mouse pada halaman web / blog anda. Jika sudah memahami dasar konsep di atas maka selanjutnya adalah menerapkan kode CSS cursor mouse pada halaman web / blog anda.

Informasi Singkat
Dalam komputasi, kursor atau kursor mouse (sebagai bagian dari komputer pribadi gaya interaksi WIMP) adalah simbol atau gambar grafis pada monitor komputer atau perangkat layar lain yang menggemakan pergerakan perangkat penunjuk , biasanya mouse, touchpad, atau pena stylus. Ini menandakan titik di mana tindakan pengguna dilakukan. Ini dapat digunakan dalam antarmuka pengguna berbasis teks atau grafis untuk memilih dan memindahkan elemen lain. Ini berbeda dari kursor, yang merespons input keyboard. Kursor juga dapat direposisi menggunakan pointer.

Pointer biasanya muncul sebagai panah bersudut (miring karena secara historis meningkatkan penampilan pada layar beresolusi rendah, tetapi dapat bervariasi dalam berbagai program atau sistem operasi. Penggunaan pointer digunakan ketika metode input, atau perangkat penunjuk, adalah perangkat yang dapat bergerak dengan lancar melintasi layar dan memilih atau menyorot objek di layar. Dalam GUI di mana metode input bergantung pada tombol keras, seperti tombol lima arah pada banyak ponsel, tidak ada pointer yang digunakan, dan sebaliknya GUI bergantung pada status fokus yang jelas.
Sumber : Wikipedia


DAFTAR ISI
  1. Kode CSS Tipe Cursor Mouse Standar
  2. Kode CSS Merubah Gambar Cursor Mouse Standar
#1 Kode CSS Tipe Cursor Mouse Standar


Tipe cursor mouse dalam aturan CSS secara default memiliki 32 tipe cursor mouse yang dapat digunakan pada halaman web / blog dan juga pada elemen HTML tertentu. Tipe cursor mouse ini dalam penggunaannya dapat dirubah dari kondisi default menjadi tipe cursor mouse yang disesuaikan. Berikut 32 tipe cursor mouse yang bisa anda lihat secara langsung pada tabel di bawah ini. Agar tipe cursor mouse terlihat pastikan anda menggunakan browser dari PC, Laptop, Netbook dan sejenisnya. Silakan anda dekatkan cursor mouse pada masing-masing kotak tersebut.

Tipe Cursor Mouse

auto
default
none
context-menu
help
pointer
progress
wait
cell
crosshair
text
vertical-text
alias
copy
move
no-drop
not-allowed
all-scroll
col-resize
row-resize
n-resize
s-resize
e-resize
w-resize
ns-resize
ew-resize
ne-resize
nw-resize
se-resize
sw-resize
nesw-resize
nwse-resize

Kode CSS untuk merubah tipe cursor mouse pada elemen HTML

<style>
/* Elemen ID */
#ID-Elemen {cursor:tipe-cursor;}

/* Elemen Class */
.Class-Elemen {cursor:tipe-cursor;}

/* Elemen HTML */
body, html {cursor:tipe-cursor;}
p {cursor:tipe-cursor;}
</style>

KETERANGAN
Pada kode di atas merupakan kode CSS umum untuk merubah tipe kursor baik untuk keseluruhan kode HTML maupun untuk elemen HTML tertentu. Silakan anda sesuaikan sesuai kebutuhan.

Tipe cursor mouse bisa dilihat pada kotak tabel contoh di atas, contoh apabila anda ingin menggunakan tipe mouse not-allowed maka pada tipe cursor mouse silakan anda tuliskan sesuai tipe yang ingin digunakan.

CSS Style
.Class-Elemen {cursor:not-allowed;}

Inline Style Element
<div style="cursor:not-allowed;">Contoh Inline Style</div>

Kode CSS tersebut bisa anda taruh di dalam kode template, kotak widget ataupun di dalam postingan artikel. Sedangkan untuk inline style element bisa langsung digunakan didalam semua kode elemen HTML.

#2 Kode CSS Merubah Gambar Cursor Mouse Standar


Gambar cursor mouse default bisa diganti dengan gambar yang memiliki format PNG dan PNG64. Bagi anda yang sudah memiliki gambar cursor mouse sendiri silakan anda taruh gambar tersebut di server dan salin URL dari gambar yang akan digunakan. Namun apabila anda ingin menggunakan gambar cursor mouse lainnya bisa anda lihat di situs www.cursors-4u.com, pada situs tersebut menyediakan berbagai gambar menarik yang bisa digunakan sebagai cursor mouse.

Pastikan URL gambar menggunakan protokol https agar tidak diblokir oleh browser modern, jika anda menggunakan URL gambar langsung dari situs www.cursors-4u.com maka anda perlu mendownload terlebih dahulu gambar cursor yang ingin digunakan kemudian pindahkan gambar tersebut ke server anda atau server google (bagi pengguna blogger) agar bisa menggunakan protokol https.

Kode CSS untuk merubah gambar cursor mouse pada elemen HTML

<style>
/* Elemen ID */
#ID-Elemen {cursor:url(https://tipe-cursor.ani), url(https://tipe-cursor.png), auto;}

/* Elemen Class */
.Class-Elemen {cursor:url(https://tipe-cursor.ani), url(https://tipe-cursor.png), auto;}

/* Elemen HTML */
* {cursor:url(https://tipe-cursor.ani), url(https://tipe-cursor.png), auto;}
body, html {cursor:url(https://tipe-cursor.ani), url(https://tipe-cursor.png), auto;}
p {cursor:url(https://tipe-cursor.ani), url(https://tipe-cursor.png), auto;}
</style>

KETERANGAN
Kode CSS menyesuaikan antara browser IE (Internet Explorer) dan browser lainnya, jadi apabila pengunjung web / blog anda menggunakan browser IE maka gambar cursor mouse yang muncul adalah cursor berformat [ani] jika pengguna menggunakan browser lainnya maka gambar cursor mouse yang digunakan adalah yang menggunakan format [PNG].

Jika anda hanya menggunakan gambar cursor mouse berformat [PNG] maka kode CSS diatas cukup menggunakan satu URL saja. Jadi penggunaan kode seperti yang di bawah ini jika yang digunakan hanya satu tipe gambar cursor mouse.

<style>
/* Elemen ID */
#ID-Elemen {cursor:url(https://tipe-cursor.png), auto;}

/* Elemen Class */
.Class-Elemen {cursor:url(https://tipe-cursor.png), auto;}

/* Elemen HTML */
* {cursor:url(https://tipe-cursor.png), auto;}
body, html {cursor:url(https://tipe-cursor.png), auto;}
p {cursor:url(https://tipe-cursor.png), auto;}
</style>

Kode CSS tersebut bisa anda taruh di dalam kode template, kotak widget ataupun di dalam postingan artikel. Sedangkan untuk inline style element bisa langsung digunakan didalam semua kode elemen HTML.


Demikian artikel tentang Trik Cara Mengganti Cursor Mouse Pada Halaman Blog apabila ada pertanyaan, kritik maupun saran silakan menggunakan kotak komentar yang ada di bawah. Akhir kata semoga bermanfaat.

Keyword


CSS, CSS3, HTML, Code, Script, Javascript, Blog, Blogger, Blogspot, Cursor, Mouse, Change, Animated, Animation, Image, PNG, ANI, Cara, Merubah, Kode, Animasi, Kursor, Halaman, Web, Inline, Style

Incoming Search Term


Cara merubah kursor mouse pada halaman blog, Cara mengganti mouse cursor dengan gambar animasi, Cara merubah bentuk kursor mouse dengan gambar lain, How To Change Mouse Cursor With Image, CSS Code about mouse cursor, Kode CSS mengganti kursor mouse, Cara memasang kustom mouse cursor

Komentar

Posting Komentar

Postingan populer dari blog ini

Cara Pasang Widget ASTROLOGI Online Lengkap Terbaru

Gambar
A strologi berasal dari bahasa Yunani yang terdiri dari dua kata, yakni: "astron" yang artinya bintang dan "logos" yang artinya ilmu; jadi, astrologi adalah ilmu yang mempelajari tentang posisi bintang-bintang dan benda-benda luar angkasa lainnya, di mana benda-benda tersebut mempunyai keterkaitan dengan nasib, peruntungan, kepribadian, perilaku, asmara, interaksi, kondisi logis dan batin manusia. Astrologi menunjuk kepada yang mana pun di antara beberapa sistem pengetahuan untuk mengerti, dan menterjemahkan tentang kenyataan dan keberadaan manusiawi, berdasarkan posisi dan gerak-gerik relatif berbagai benda langit, terutama Matahari, Bulan, planet, dan lunar node seperti dilihat pada waktu dan tempat lahir atau lain peristiwa dipelajari. Bagi banyak astrologer, hubungan itu tidak perlu sebab musabab. Astrologi berbeda dengan astronomi, ilmu astronomi mempelajari tata letak bintang-bintang dan planet-planet pada sistem tata surya tertentu dan tidak dikaitkan dengan ...
Baca selengkapnya

Terjawab ! Ini yang Terjadi pada Manusia Jika Tewas di Luar Angkasa

Gambar
S alah satu impian umat manusia adalah mampu menjelajah luar angkasa yang tidak memiliki batas luas dan jarak. Di sana, jutaan misteri masih tersimpan dengan rapi hingga manusia wajib menguaknya dengan sempurna. Tapi, sesuatu yang berada di luar angkasa kadang susah untuk diteliti. Permasalahan yang dihadapi adalah susahnya akses untuk mendekat, ilmuwan harus menggunakan pesawat atau satelit. Kedua adalah tak ada manusia yang mampu ke sana dan mengamatinya dengan mata dan kepalanya langsung. Yang kita tahu, luar angkasa adalah sesuatu yang luas dan indah. Dari apa yang telah diketahui ilmuwan saja, banyak hal menakjubkan yang menarik untuk diketahui dari luar angkasa. Banyak yang berpendapat kalau luar angkasa adalah hal yang sangat misterius. Sejumlah hal yang saat ini telah dipelajari ilmuwan, masih sangat jauh dari apa yang belum kita tahu. Segala hal di luar angkasa memang penuh dengan jutaan misteri sehingga ilmuwan berambisi menempatkan banyak astronot ke luar angkasa di masa dep...
Baca selengkapnya

#Keren ! Tombol Share Facebook Menggunakan Animasi Spiderman

Gambar
W idget Tombol Share Animasi Spiderman, merupakan widget tombol yang menggunakan kode javascript untuk membuat animasi yang atraktif dan dinamis. Pada gambar spiderman apabila di klik maka secara otomatis akan membuka popup window yang men-share artikel blog ke situs facebook. Link yang dibagikan merupakan URL artikel yang sedang dilihat oleh pengunjung blog. Widget tombol animasi spiderman ini merupakan widget lama yang sudah pernah saya buat, namun saya hadirkan kembali dengan merombak total kode scriptnya agar animasi ini bisa lebih fungsional dengan tampilan yang super keren dan dinamis. Kode script khusus dibuat untuk menghadirkan konsep dari karakter spiderman agar terlihat sedikit lebih atraktif. Contoh dari implementasi widget tombol share animasi spiderman seperti yang terlihat pada artikel blog ini. Jika tidak terlihat silakan refresh browser anda. Bagi anda yang tertarik dengan widget ini silakan disimak cara pemasangannya. Informasi Singkat Spider-Man (bahasa Ind...
Baca selengkapnya