Cara Membuat Animasi Kursor Di Blog
Modjopahit! - Cara membuat animasi kursor di blog adalah sebuah cara bagaimana membuat tanda kursor berubah ketika digerakkan di dalam sebuah objek yang ada di dalam halaman blog. Dan cara membuatnya sangatlah mudah yaitu dengan bantuan tag HTML.
Kursor yang berbeda dari biasanya dapat membuat seorang pengunjung betah berlama-lama di dalam blog, jadi kenapa tidak kita mencoba dan menerapkannya kedalam blog kita. Di dalam beberapa cara ini kita bisa menggunakan animasi kursor yang bertipe gambar untuk merubah gambar kursor sesuai dengan keinginan.
Untuk lebih jelasnya mari kita ikuti langkah-langkah berikut ini dan langsung mencobanya.
<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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiHFGtG4WOFAP22nVYNEa3HaYvJ__nqQvg5mDkjRENiYRFlcKhQmGDr49POgw9IJ7AdfTFqxl_VsO4wctmO7sWeWo7MGkyij3i-0gVud62PTcjplSO_qk1YItlc_Np3P8KDsaVwAn9fRs/s1600/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>(Tempelkan kursor Anda pada tulisan dibawah ini).</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>
Dan perlu diketahui bahwa kita bisa merubah bentuk kursor ketika melewati seluruh dokumen atau sebagian teks (link teks). Dan berikut adalah hasil kode HTML tersebut diatas jika blog atau web sudah dijalankan.
(Tempelkan kursor Anda pada tulisan dibawah ini).
Kursor yang berbeda dari biasanya dapat membuat seorang pengunjung betah berlama-lama di dalam blog, jadi kenapa tidak kita mencoba dan menerapkannya kedalam blog kita. Di dalam beberapa cara ini kita bisa menggunakan animasi kursor yang bertipe gambar untuk merubah gambar kursor sesuai dengan keinginan.
Untuk lebih jelasnya mari kita ikuti langkah-langkah berikut ini dan langsung mencobanya.
Cara membuat animasi kursor di blog
Kode HTML<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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiHFGtG4WOFAP22nVYNEa3HaYvJ__nqQvg5mDkjRENiYRFlcKhQmGDr49POgw9IJ7AdfTFqxl_VsO4wctmO7sWeWo7MGkyij3i-0gVud62PTcjplSO_qk1YItlc_Np3P8KDsaVwAn9fRs/s1600/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>(Tempelkan kursor Anda pada tulisan dibawah ini).</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>
Dan perlu diketahui bahwa kita bisa merubah bentuk kursor ketika melewati seluruh dokumen atau sebagian teks (link teks). Dan berikut adalah hasil kode HTML tersebut diatas jika blog atau web sudah dijalankan.
(Tempelkan kursor Anda pada tulisan dibawah ini).
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"
Nah, mudahkan cara membuatnya. Coba Anda perhatikan dan coba ganti untuk kursor dengan menggunakan gambar animasi yang Anda miliki. Selamat mencoba dan semoga berhasil dalam cara membuat animasi kursor di blog.
Cara Membuat Animasi Kursor Di Blog
Reviewed by Admin BelajarCuan.Com
on
20.18
Rating:
Reviewed by Admin BelajarCuan.Com
on
20.18
Rating:
makasih tipsnya...
BalasHapus