Menampilkan Kursor Animasi pada Blog

Skrip populer kali ini mengenai cara menampilkan kursor animasi di blog. Dengan skrip ini sobat dapat mengganti kursor default menjadi kursor sendiri, yaitu berupa gambar unik atau dengan tambahan objek yang mengikuti pointer mouse. Objek di sekitar pointer mouse tersebut dapat berupa tulisan atau gambar kecil yang umumnya disimpan dalam format file .PNG, .GIF, .ANI, dan .CUR.

Jika format file adalah .GIF, .ANI, dan .CUR, maka gambar kursor dapat dibuat animasi bergerak, tetapi jika gambar kursor dalam format file .PNG atau format lain tanpa animasi gerak, maka dengan bantuan program JavaScript dapat dibuat animasi kursor yang mengikuti pointer mouse.

Di bawah ini saya share tiga cara untuk menampilkan kursor animasi pada blog berupa kursor animasi bintang berjatuhan, tulisan berputar pada kursor, gambar mengikuti pointer mouse, teks berputar mengelilingi pointer mouse, dan mengganti kursor dengan gambar sendir.

Animasi Kursor Bintang Berjatuhan

Skrip ini berfungsi untuk menampilkan animasi bintang berjatuhan ketika mouse digerakan, Caranya sebagai berikut:

1.Login ke Blogger.

2.Masuk ke halaman "Layout" atau Tata Letak.

3.Add Gadget (Tambah Gadget) kemudian pilih HTML/JavaScript.

4.Salin kode berikut dan simpan di jendela tersebut tanpa perlu diberi judul, kemudian simpan.

<script type='text/javascript'> 
// <![CDATA[ 
var colour="#52D8ED"; 
var sparkles=100; 
var x=ox=400; 
var y=oy=300; 
var swide=800; 
var shigh=600; 
var sleft=sdown=0; 
var tiny=new Array(); 
var star=new Array(); 
var starv=new Array(); 
var starx=new Array(); 
var stary=new Array(); 
var tinyx=new Array(); 
var tinyy=new Array(); 
var tinyv=new Array(); 
window.onload=function() { if (document.getElementById) { 
var i, rats, rlef, rdow; 
for (var i=0; i<sparkles; i++) { 
var rats=createDiv(3, 3); 
rats.style.visibility="hidden"; 
document.body.appendChild(tiny[i]=rats); 
starv[i]=0; 
tinyv[i]=0; 
var rats=createDiv(5, 5); 
rats.style.backgroundColor="transparent"; 
rats.style.visibility="hidden"; 
var rlef=createDiv(1, 5); 
var rdow=createDiv(5, 1); 
rats.appendChild(rlef); 
rats.appendChild(rdow); 
rlef.style.top="3px"; 
rlef.style.left="0px"; 
rdow.style.top="0px"; 
rdow.style.left="3px"; 
document.body.appendChild(star[i]=rats); 
} 
set_width(); 
sparkle(); 
}} 
function sparkle() { 
var c; 
if (x!=ox || y!=oy) { 
ox=x; 
oy=y; 
for (c=0; c<sparkles; c++) if (!starv[c]) { 
star[c].style.left=(starx[c]=x)+"px"; 
star[c].style.top=(stary[c]=y)+"px"; 
star[c].style.clip="rect(0px, 5px, 5px, 0px)"; 
star[c].style.visibility="visible"; 
starv[c]=50; 
break; 
} 
} 
for (c=0; c<sparkles; c++) { 
if (starv[c]) update_star(c); 
if (tinyv[c]) update_tiny(c); 
} 
setTimeout("sparkle()", 40); 
} 
function update_star(i) { 
if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)"; 
if (starv[i]) { 
stary[i]+=1+Math.random()*3; 
if (stary[i]<shigh+sdown) { 
star[i].style.top=stary[i]+"px"; 
starx[i]+=(i%5-2)/5; 
star[i].style.left=starx[i]+"px"; 
} 
else { 
star[i].style.visibility="hidden"; 
starv[i]=0; 
return; 
} 
} 
else { 
tinyv[i]=50; 
tiny[i].style.top=(tinyy[i]=stary[i])+"px"; 
tiny[i].style.left=(tinyx[i]=starx[i])+"px"; 
tiny[i].style.width="2px"; 
tiny[i].style.height="2px"; 
star[i].style.visibility="hidden"; 
tiny[i].style.visibility="visible" 
} 
} 
function update_tiny(i) { 
if (--tinyv[i]==25) { 
tiny[i].style.width="1px"; 
tiny[i].style.height="1px"; 
} 
if (tinyv[i]) { 
tinyy[i]+=1+Math.random()*3; 
if (tinyy[i]<shigh+sdown) { 
tiny[i].style.top=tinyy[i]+"px"; 
tinyx[i]+=(i%5-2)/5; 
tiny[i].style.left=tinyx[i]+"px"; 
} 
else { 
tiny[i].style.visibility="hidden"; 
tinyv[i]=0; 
return; 
} 
} 
else tiny[i].style.visibility="hidden"; 
} 
document.onmousemove=mouse; 
function mouse(e) { 
set_scroll(); 
y=(e)?e.pageY:event.y+sdown; 
x=(e)?e.pageX:event.x+sleft; 
} 
function set_scroll() { 
if (typeof(self.pageYOffset)=="number") { 
sdown=self.pageYOffset; 
sleft=self.pageXOffset; 
} 
else if (document.body.scrollTop || document.body.scrollLeft) { 
sdown=document.body.scrollTop; 
sleft=document.body.scrollLeft; 
} 
else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) { 
sleft=document.documentElement.scrollLeft; 
sdown=document.documentElement.scrollTop; 
} 
else { 
sdown=0; 
sleft=0; 
} 
} 
window.onresize=set_width; 
function set_width() { 
if (typeof(self.innerWidth)=="number") { 
swide=self.innerWidth; 
shigh=self.innerHeight; 
} 
else if (document.documentElement && document.documentElement.clientWidth) { 
swide=document.documentElement.clientWidth; 
shigh=document.documentElement.clientHeight; 
} 
else if (document.body.clientWidth) { 
swide=document.body.clientWidth; 
shigh=document.body.clientHeight; 
} 
} 
function createDiv(height, width) { 
var div=document.createElement("div"); 
div.style.position="absolute"; 
div.style.height=height+"px"; 
div.style.width=width+"px"; 
div.style.overflow="hidden"; 
div.style.backgroundColor=colour; 
return (div); 
} 
// ]]> 
</script>

Gambar Animasi Mengikuti Mouse

Skrip ini akan menampilkan mouse yang selalu diikuti gambar animasi seperti per bergoyang dan selalu berat ke bawah, sehingga apabila mouse diam (kursor tidak bergerak),  gambar animasi kursor pun akan diam seolah ada gravitasi ke bawah. Caranya pasangnya sebagai berikut:

1.Login ke Blogger.

2.Masuk ke halaman "Layout" atau Tata Letak.

3.Add Gadget (Tambah Gadget) kemudian pilih HTML/JavaScript.

4.Salin kode berikut dan simpan di jendela tersebut tanpa perlu diberi judul, kemudian simpan

<style>.dot{position:fixed; padding:0;margin:0;border:0 solid;border-radius:6px;box-shadow:0 0 0 #fff;z-index:10;}
#dot0{visibility: hidden;}</style>
<script type="text/javascript">
//<![CDATA[
function elastic_trail() {
 var f = 8;  /* Jumlah Kursor */
 var g = "http://i48.tinypic.com/s48bvd.jpg"; /* Gambar Kursor */
 var h = 0.01;
 var k = 20; /* Jarak */
 var l = 10;
 var m = 1;
 var o = 0;
 var p = 50;
 var q = 10;
 var r = 0.1;
 var s = 0.1;
 var t = 12; /* Ukuran kursor */
 var u = 0.75;
 var v = 0;
 var w = 0;
 for (var i = f - 1; i > -1; --i) {
  with(document) {
   write('<div class="dot" id="dot' + i + '">\n');
   write('<img src="' + g + '" height="' + t + '" width="' + t + '" alt="">\n');
   write("</div>\n")
  }
 }
 /*@cc_on@*/
 /*@if(@_jscript_version>=5)if(navigator.appVersion.replace(/^.*MSIE (\d+).*$/,'$1')<=6){var x=function(a,n){var b='scroll'+a,d=document,c='compatMode';return d[c]&&d[c]=='CSS1Compat'?d.documentElement[b]+n+'px':d.body[b]+n+'px'};document.write('<style type="text/css">.dot {position: absolute;}body {background: url(foo) fixed;}<\/style>')};@end@*/
 var y = function () {
  return (document.compatMode && document.compatMode.indexOf("CSS") != -1) ? document.documentElement: document.body
 };
 var z = document.layers ? "": "px";
 elastic_trail.prototype.dot = function (i) {
  this.X = v;
  this.Y = w;
  this.dx = 0;
  this.dy = 0;
  if (document.layers) {
   this.obj = document["dot" + i]
  } else {
   if (document.all) {
    this.obj = document.all["dot" + i].style
   } else {
    if (document.getElementById) {
     this.obj = document.getElementById("dot" + i).style
    } else {
     return
    }
   }
  }
 };
 var A = new Array();
 for (var i = 0; i < f; i++) {
  A[i] = new this.dot(i)
 }
 for (i = 0; i < f; i++) {
  A[i].obj.left = typeof x == "function" ? x("Left", A[i].X) : Math.round(A[i].X) + z;
  A[i].obj.top = typeof x == "function" ? x("Top", A[i].Y) : A[i].Y + z
 }
 var B = this;
 setInterval(function () {
  B.animate()
 },
 20);
 function MoveHandler(e) {
  v = e.pageX - pageXOffset;
  w = e.pageY - pageYOffset;
  return true
 }
 function MoveHandlerIE() {
  v = window.event.x;
  w = window.event.y
 }
 if (document.addEventListener) {
  document.addEventListener("mousemove", MoveHandler, false)
 } else {
  if (document.attachEvent) {
   document.attachEvent("onmousemove", MoveHandlerIE)
  } else {
   if (document.captureEvents) {
    document.captureEvents(Event.MOUSEMOVE);
    document.onmousemove = MoveHandler
   }
  }
 }
 elastic_trail.prototype.vec = function (X, Y) {
  this.X = X;
  this.Y = Y
 };
 elastic_trail.prototype.springForce = function (i, j, a) {
  var b = (A[i].X - A[j].X);
  var c = (A[i].Y - A[j].Y);
  var d = Math.sqrt(b * b + c * c);
  if (d > k) {
   var e = l * (d - k);
   a.X += (b / d) * e;
   a.Y += (c / d) * e
  }
 };
 elastic_trail.prototype.animate = function () {
  var a = 0;
  A[0].X = v;
  A[0].Y = w;
  a = 1;
  for (var i = a; i < f; i++) {
   var b = new this.vec(0, 0);
   if (i > 0) {
    this.springForce(i - 1, i, b)
   }
   if (i < (f - 1)) {
    this.springForce(i + 1, i, b)
   }
   var c = new this.vec( - A[i].dx * q, -A[i].dy * q);
   var d = new this.vec((b.X + c.X) / m + o, (b.Y + c.Y) / m + p);
   A[i].dx += (h * d.X);
   A[i].dy += (h * d.Y);
   if (Math.abs(A[i].dx) < r && Math.abs(A[i].dy) < r && Math.abs(d.X) < s && Math.abs(d.Y) < s) {
    A[i].dx = 0;
    A[i].dy = 0
   }
   A[i].X += A[i].dx;
   A[i].Y += A[i].dy;
   var e, width;
   if (window.innerWidth) {
    e = window.innerHeight;
    width = y().clientWidth && window.innerWidth - y().clientWidth == 17 || window.innerWidth - y().clientWidth == 15 ? y().clientWidth: window.innerWidth
   } else {
    e = y().clientHeight - Math.ceil(t / 2);
    width = y().clientWidth
   }
   if (A[i].Y >= e - t - 1) {
    if (A[i].dy > 0) {
     A[i].dy = u * -A[i].dy
    }
    A[i].Y = e - t - 1
   }
   if (A[i].X >= width - t) {
    if (A[i].dx > 0) {
     A[i].dx = u * -A[i].dx
    }
    A[i].X = width - t - 1
   }
   if (A[i].X < 0) {
    if (A[i].dx < 0) {
     A[i].dx = u * -A[i].dx
    }
    A[i].X = 0
   }
   A[i].obj.left = typeof x == "function" ? x("Left", A[i].X) : Math.round(A[i].X) + z;
   A[i].obj.top = typeof x == "function" ? x("Top", A[i].Y) : A[i].Y + z
  }
 }
}
new elastic_trail();
//]]>
</script>

Jika sobat ingin mengganti gambar, ganti kode berwarna merah http://i48.tinypic.com/s48bvd.jpg dengan URL gambar sendiri atau dapat dengan salah satu URL gambar kursor animasi di bawah

1.Gambar kursor kupu-kupu: 

http://i48.tinypic.com/s48bvd.jpg

2.Gambar kursor bola: 

http://i48.tinypic.com/mwbl29.jpg

2.Gambar kursor hati: 

http://i48.tinypic.com/25ix5rd.jpg 

3.Gambar kursor bintang: 

http://i48.tinypic.com/eamrur.jpg

4.Gambar kursor bola api:

http://i48.tinypic.com/2cf9htc.jpg

5.Gambar kursor burung terbang: 

http://i49.tinypic.com/347hd05.jpg

6.Gambar kursor lonceng:

http://i48.tinypic.com/1g0lqx.jpg 

7.Gambar kursor bunga: 

http://i48.tinypic.com/9u12ya.jpg

sumber:http://www.linksukses.com/2013/01/menampilkan-kursor-animasi-pada-blog.html