Beranda » Blogger » Membuat Animasi Kursor Pada Halaman Blog

Membuat Animasi Kursor Pada Halaman Blog

Kita akan membuat sebuah kursor animasi pada halaman posting blog kita, dan salah satu contoh adalah pada judul posting Membuat Animasi Kursor Pada Halaman Blog. Tapi sebelumnya kita bahas terlebih dahulu dasar kode HTML yang digunakan untuk merubah-rubah jenis kursor.

Kode HTML ini saya dapat dari http://www.quackit.com/html/codes/html_cursor_code.cfm sehingga teman-teman dapat juga mengunjungi situs ini untuk belajar kode HTML lainnya berhubung saya tidak membahasnya secara detail dari dasar.

<html>
<head>
<style type="text/css">
.auto { cursor: auto }
.default { cursor: default }
.text { cursor: text }
.help { cursor: help }
.pointer { cursor: pointer }
.wait { cursor: wait }
.crosshair { cursor: crosshair }
.move { cursor: move }
.smile { cursor:url(http://www.quackit.com/pix/smile.gif),auto }
.progress { cursor: progress }
.e-resize { cursor: e-resize }
.ne-resize { cursor: ne-resize }
.nw-resize { cursor: nw-resize }
.n-resize { cursor: n-resize }
.se-resize { cursor: se-resize }
.sw-resize { cursor: sw-resize }
.s-resize { cursor: s-resize }
.w-resize { cursor: w-resize }
</style>
</head>
<body>
<p>(Hover over each heading to see the cursor effect).</p>
<h3 class="auto">HTML cursor codes - "Auto"</h3>
<h3 class="default">HTML cursor codes - "Default"</h3>
<h3 class="text">HTML cursor codes - "Text"</h3>
<h3 class="help">HTML cursor codes - "Help"</h3>
<h3 class="pointer">HTML cursor codes - "Pointer"</h3>
<h3 class="wait">HTML cursor codes - "Wait"</h3>
<h3 class="crosshair">HTML cursor codes - "Crosshair"</h3>
<h3 class="move">HTML cursor codes - "Move"</h3>
<h3 class="smile">HTML cursor codes - "Smile"</h3>
<h3 class="progress">HTML cursor codes - "Progress"</h3>
<h3 class="e-resize">HTML cursor codes - "e-resize"</h3>
<h3 class="ne-resize">HTML cursor codes - "ne-resize"</h3>
<h3 class="nw-resize">HTML cursor codes - "nw-resize"</h3>
<h3 class="n-resize">HTML cursor codes - "n-resize"</h3>
<h3 class="se-resize">HTML cursor codes - "se-resize"</h3>
<h3 class="sw-resize">HTML cursor codes - "sw-resize"</h3>
<h3 class="s-resize">HTML cursor codes - "s-resize"</h3>
<h3 class="w-resize">HTML cursor codes - "w-resize"</h3>
</body>

Yang perlu diingat bahwa contoh aplikasi kode HTML ini tidak merubah seluruh teks yang ada di sebuah dokumen tetapi hanya pada bagian teks yang ingin diubah bentuk kursornya (contoh sehari-harinya pada text link). Sehingga contoh penggunaannya menggunakan class

(Contoh Aplikasi Kode HTML, Coba arahkan kursor pada masing-masing judul dibawah).

HTML cursor codes - "Auto"

HTML cursor codes - "Default"

HTML cursor codes - "Text"

HTML cursor codes - "Help"

HTML cursor codes - "Pointer"

HTML cursor codes - "Wait"

Belum ada tanggapan untuk "Membuat Animasi Kursor Pada Halaman Blog"

Post a Comment