Membuat Animasi Kursor Pada Halaman Blog

Written By Adsloko on Rabu, 25 Januari 2012 | Rabu, Januari 25, 2012

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"

HTML cursor codes - "Crosshair"

HTML cursor codes - "Move"

HTML cursor codes - "Smile"

HTML cursor codes - "Progress"

HTML cursor codes - "e-resize"

HTML cursor codes - "ne-resize"

HTML cursor codes - "nw-resize"

HTML cursor codes - "n-resize"

HTML cursor codes - "se-resize"

HTML cursor codes - "sw-resize"

HTML cursor codes - "s-resize"

HTML cursor codes - "w-resize"

Share this article :

Random Post

Contoh Kursor Animasi Pada Sebuah Posting Blog
Posted On Fri Jan 27 2012

Gambar 1 Kode CSS Kursor Selamat malam kawan-kawanku semua, judul kali ini adalah Contoh Kursor Animasi Pada Sebuah Posting Blog yang merupakan kelanjutan dari posting artikel me ...

NEOBUX - Paid To Click
Posted On Tue Jan 31 2012

Selamat siang teman-teman adsloko, pada kesempatan kali ini akan saya sampaikan mengenai NEOBUX - Paid To Click. Mungkin sebagian teman-teman sudah banyak yang tahu, tapi jika belu ...

Format Text HTML Dalam Tutorial Dan Aplikasi
Posted On Sat Dec 03 2011

Halo every body???!!!! selamat malam (malam migguan nieh yeeee!!!!), meski malam minggu tetap semangat untuk ngeblog ya!!!! pada malam yang sedikit gerimis ini akan Saya sampaik ...

Cara Membuat Templates Blog Versi Hand Phone (Seluler) Untuk Blog Blogspot
Posted On Wed Nov 23 2011

Hello pengunjung setia Adsloko pagi ini kita akan membahas mengenai bagaimana Cara Membuat Templates Blog Di Hand Phone (Seluler) Untuk Blog Blogspot. Mungkin ada beberapa orang ya ...

Tutorial Merancang Website :: Konsep Jalannya Data Dalam Sebuah Website/Blog
Posted On Thu Nov 17 2011

Selamat siang, teman-teman adsloko yang Saya hormati. Salam sukses dan bahagia. Kami berharap semua teman-teman yang sedang membaca tutorial kami selalu berada dalam Semangat ...