Jika mungkin anda ingin sesuatu yang berbeda dengan cursor di blog anda, dengan memanfaatkan cursor image atau cursor icon maka cursor default bisa langsung berubah menjadi cursor cantik dalam berbagai rupa. Semua tergantung selera! Anda bahkan bisa menggunakan foto profil sebagai cursor. Hanya perlu diperhatikan bahwa cursor image ini sekalipun dapat menggunakn image berukuran besar, namun sebaiknya gunakan saja yang berukuran relatif kecil sehingga tidak mengganggu pengunjung. Ya..., bisa-bisa jika kita tak berhati-hati malahan membuat pengunjung merasa malas karena terganggu tampilan icon cursor.
Mengganti cursor dengan sebuah image atau icon dapat dilakukan menggunakan kode css (bersifat permanen) atau bisa juga melalui kode html (berlaku khusus pada elemen tertentu).
Kode css untuk membuat custom cursors
Agar cursor image berfungsi menggantikan cursor default diseluruh bagian blog/web, maka kode css cursor harus diletakkan di syntax body. Ada beberapa kode css lain dalam tag body, tambahkan cursor property dengan URL diantara property css yang ada.Menambahkan cursor image melalui syntax body
body{
cursor:url(image-cursor.gif), url(image-cursor.cur), auto;
}
Contoh:
body{
cursor:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOH-_Y4y_wHJJKoJEvHGircWQ_TPaMSKBgqAD-LXoZVKkuAQ99uRKdT5uLC_k1rDCep4ZcKmWpre3K-MJs7Zvek6dG9hQNlV-xyuKo2bD4r2gQTb4wKO80FfKdN1K9vlBuziedpjm9LJM/h120/cursor-gray-custom.gif), url(https://sites.google.com/site/gubhugcss/icon/cursor/custom-grad-black-grey.cur), auto;
}
Menggunakan cursor pada elemen tertentu
Cursor image akan berfungsi/ditampikan hanya di elemen tertentu.<style type="text/css"> div.special{ cursor:url(image-cursor.gif), url(image-cursor.cur), auto; } </style> <div class="spesial"> Content here!</div>
Menggunakan cursor pada link
Dapat digunakan pada link tertentu dengan memanfatkan class atau id dan dapat juga digunakan di seluruh blog/web.Untuk link tertentu
<style type="text/css"> a.khusus{ cursor:url(image-cursor.gif), url(image-cursor.cur), auto; } </style> <a class="khusus" href="URL">Link Here</a>
Link di semuruh blog/web
a{
cursor:url(image-cursor.gif), url(image-cursor.cur), auto;
}
Contoh:
a{
cursor:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilWzX0QXuIyIkrw91hotEPQ5j973HrP2kQXFbt4DXQm6kuyd59f6J3O7gCrbLefZC2zEN-aV_zvQ-GhAe92tiSrbhPiMjn-kNtnyUeHYsuIWcpnO8wV-Xy7wkwf7FmwldAvfQuPOCl90Q/h120/red-transp-grad-32x32.gif), url(https://sites.google.com/site/gubhugcss/icon/cursor/red-transp-grad-17x22.cur), auto;
}
Keterangan :
penggunaan image dengan ekstensi .gif dan .cur bertujuan agar berfungsi di IE dan yang lain. Intuk Opera hingga detik ini belum support thd cursor image atau icon.Dalam tag html :
<a href="URL" title="titlte here" style="cursor:url(image-cursor.gif), url(image-cursor.cur), auto;">Link here !</a>
<p style="cursor:url(image-cursor.gif), url(image-cursor.cur), auto;">Content here!</p>
Dalam demo di bawah ini digunakan beberapa cursor sekaligus pada setiap elemen. Kode yang digunakan untuk menampilkan cursor image adalah kode css dan xHTML. Anda dapat melakukan berbagai percobaan thd penggunaan cursor sebelum memasangnya di blog!
Please click the button to display. Continue with editing code and click to see the results!
Tidak ada komentar:
Posting Komentar