Efek Love Berjatuhan Pada Cursor

Efek Love Berjatuhan Pada Cursor merupakan widget blog / website dengan efek gambar love saat cursor mouse digerakan. Pemasangan widget ini bisa menambah daya tarik blog semakin unik dan menarik selain itu akan memberikan efek dinamis pada blog sobat. Efek Love Berjatuhan menggunakan JavaScript sederhana sehingga tidak akan membuat workload blog sobat menjadi berat. Contoh widget ini seperti yang terlihat pada postingan artikel ini. Pemasangan widget ini cukup mudah tinggal copy - paste di gadget box atau di taruh pada kode HTML template blog. Oke sob... buat yang tertarik langsung aja ke TKP...

Cara Pemasangan

• Login » blogger.
• Rancangan » Edit HTML.
• Tekan tombol keyboard Ctrl+F dan cari kode berikut: </Head>
• Copy-Paste kode di bawah ini tepat di atas Kode </Head>.
  
  

  <script type='text/javascript'>
  // <![CDATA[
  var colour="#FF0066";
  var sparkles=40;
  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(5, 5);
  var rdow=createDiv(5, 5);
  rats.appendChild(rlef);
  rats.appendChild(rdow);
  rlef.style.top="2px";
  rlef.style.left="0px";
  rdow.style.top="0px";
  rdow.style.left="2px";
  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()*5;
  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+"49px";
  div.style.width=width+"50px";
  div.style.overflow="hidden";
  div.style.backgroundColor=colour;
  return (div);
  }
  // ]]>
  </script>
  



• Keterangan :
  - var colour="#FF0066" // warna love sparkle.
  - var sparkles=40; // Jumlah sparkle yang betebaran.

Oke sobat monozcore jangan lupa kritik dan sarannya yaa biar postingan berikutnya semakin unik dan menarik.. Buat yang masih bingung dengan pemasangan widget ini.. monggo ditanyakan lewat kotak komentar, email, facebook ataupun twitter monozcore... happy blogging...

.:Selamat Mencoba:.