Home » » Membuat Animasi Kursor Pada Halaman Blog

Membuat Animasi Kursor Pada Halaman Blog

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

gambar CSS code
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 :

3 komentar:

  1. wahh mantap gan...
    yang smile ane suka tuhh...
    makasih ilmunya...
    ijin copas, mau praktek... hehe

    BalasHapus
  2. Html memang asyik.. Apalagi PHP.. :D

    BalasHapus

Diberdayakan oleh Blogger.

@My Follower

 
Support : TipsNgeblog
Copyright © 2013. Tips Dan Trik Ngeblog - All Rights Reserved
Template Created by Creating Website Used by TipsDanTrikNgeblog
Proudly powered by Blogger