Sunday, December 6, 2015

Membuat Efek Bintang Jatuh pada Kursor Blogger

Falling Stars

Assalamu'alaikum warohmatullahi wabarokatu. Dalam posting kali ini saya akan membahas tentang mengatur appearance dari sebuah blog. Umumnya kebanyakan orang suka bila mempunayi tampilan blog yang terkesan lebih ramai dan berwarna-warni. Hal ini sebenarnya sah-sah saja, sebab hal itu juga mungkin akan menarik perhatian pengunjung sehingga akan berminat berkunjung kembali.

Di sini saya akan mendiskusikan tentang salah satu cara membuat blog terlihat lebih cantik, yaitu dengan membuat efek bintang jatuh pada saat kursor bergerak. Efek ini akan menampilkan kerlap-kerlip yang berjatuhan pada saat kursor digerakkan, namun perlu teman-teman ketahui bahwa efek ini hanya bekerja sementara. Apa maksudnya? Hanya bekerja pada tempat tertentu dan pada masa tertentu, yaitu hanya akan tampil pada halaman blog yang dipasangi efek tersebut dan tidak akan tampil lagi jika sudah tidak membuka halaman blog tersebut, termasuk tidak tampil pada desktop sebuah Windows. Kode ini akan bekerja secara otomatis ketika blog dibuka dan kode diterjemahkan oleh mesin.

Baiklah, untuk membuatnya pertama-tama dimulai dengan membuka halaman Blogger kemudian login menggunakan akun Google anda. Setelah itu bukalah pada bagian Tata Letak kemudian tambah sebuah gadget/widget dan pilih HTML/JavaScript. Selanjutnya copy dan paste kode berikut ini pada kotak konten yang telah disediakan.

<script type="text/javascript">
var colour="#333";var sparkles=65;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="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()*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>

Atau gunakan kode dibawah ini yang bentuk kodenya sedikit lebih teratur dan lebih enak dilihat. Namun fungsi kedua kode ini sama saja, yang berbeda hanya bentuk kodenya lebih teratur.

<script type="text/javascript">
// JavaScript Document<script type='text/javascript'>
// <![CDATA[
var colour="#333";
var sparkles=65;
     
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="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()*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>

Perhatikan kedua kode javascript diatas, pada bagian colour="#333" anda bisa mengganti warna bintangnya sesuai dengan keinginan anda. Setelah merasa cukup, silakan simpan widget/gadget tersebut dan lihat hasilnya di blog anda. Untuk melihat demo atau contohnya, silakan kode semua kode javascript diatas lalu paste pada kotak pada halaman HTML Editor berikut. Untuk memilih warna, sobat bisa buka link Color Generator berikut, atau teman-teman bisa langsung melihat hasilnya pada halaman demo yang telah saya buat


Mungkin cukup sekian dari saya semoga saja bisa bermanfaat untuk teman-teman, dan jika ada yang ingin teman-teman tanyakan silakan sampaikan pada kotak komentar dibawah atau melalui halaman Contact yang dapat dibuka melalui menu blog yang ada dibagian paling atas. Terima kasih dan sampai jumpa.
Disqus Comments