Cara Mengganti Image Atau Icon Cursor Di Blog

Langsung saja langkah-langkah yang perlu ditempuh jika anda ingin mengganti gambar atau icon cursor default dengan gambar cursor lainnya:

1. Persiapkan terlebih dahulu gambar cursor yang akan digunakan, jika anda ingin mencari referensi gambar cursor silahkan berkunjung ke alamat:

   http://www.totallyfreecursors.com/

   Jika memang sudah mempunyai gambar cursor sendiri, tinggalkan langkah pertama ini.

2. Saya beramsumsi bahwa anda sudah menghostingkan gambar cursor yang akan digunakan. Jangan lupa salin URL gambar cursor anda di hosting.
3. Masuk ke halaman Layout atau Tata Letak blog anda.
4. Dihalaman Layout tambahkan widget HTML/JavaScript, kemudian paste kode berikut:

   <style type="text/css">
   html, body {
   cursor:url("URL_Dari_Gambar_Cursor_Anda"), auto;
   }
   </style>
   

   Sebelum disimpan ganti URL_Dari_Gambar_Cursor_Anda dengan URL gambar cursor anda yang ada di hosting.

   Sebagai uji coba silahkan gunakan ini:

   <style type="text/css">
   html, body {
   cursor:url("http://cursors4.totallyfreecursors.com/thumbnails/bananacape.gif"), auto;
   }
   </style>
   

   Sebenarnya anda juga bisa menetapkan cursor image itu hanya akan tampil pada elemen tertentu, misalnya contoh kode dibawah ini cursor image hanya ditampilkan ketika pointer tepat diatas area elemen div berID 'demo':

   <style type="text/css">
   div.demo {
   cursor:url("URL_Dari_Gambar_Cursor_Anda"), auto;
   }
   </style>
   
   <div class="demo">Content here!</div>
   

   Contoh lagi kode dibawah ini menetapkan cursor image hanya tampil ketika pointer tepat diatas elemen a:

   <style type="text/css">
   a {
   cursor:url("URL_Dari_Gambar_Cursor_Anda"), auto;
   }
   </style>
   

   Masih banyak lagi, silahkan belajar HTML dan CSS.

5. Selesai.