Header Ads

  • 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

    No comments

    Post Top Ad

    Post Bottom Ad