Membuat Kursor Blog Berjatuhan Bintang

Bismillah... Membuat kursor Blog selalu berjatuhan bintang, judul inilah yang kali ini saya ambil untuk postingan kali ini. Mungkin diantara kalin sudah banyak yang sudah melihat blog sahabat yang telah menggunakan widget yang satu ini. Sebelumnya saya ingin mengingatkan kalian tentang postingan saya sebelumnya yang berhubungan dengan masalah kursor blog. Silahkan dibaca bagi yang belum baca :

1. Membuat kursor selalu diikuti jam
2. Membuat kursor selalu diikuti text/tulisan
3. Kursor berubah saat menyentuh / menyorot gambar
4. Merubah tampilan kursor blog
5. Lainnya bisa kalian lihat DISINI

Untuk tips kali ini saya akan memberikan tips yang hampir sama namun dengan aksesoris berbeda yang kursor akan menjatuhkan bintang saat di gerakkan. Kalian bisa melihat DEMO previewnya dibawah ini (geser kursor kalian):



Untuk cara membuatnya silahkan kalian ikuti tahap pemasangannya dibawah ini :

1. Login ke blogger kalian
2. Pilih Rancangan
3. Pada Elemen Halaman Pilih Tambah Gadget
4. Kalian Pilih HTML/Java Script (judul kosongkan)
5. Silahkan Copas Kode berikut didalam konten HTML/Java scriptnya

<script type='text/javascript'>
// <![CDATA[
var colour="red";
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>

6. Jangan Lupa di SIMPAN

Sederhana bukan...????

Tapi kadang ada yang merasa ngeri untuk memasang kode script sepanjang itu, jikan kalian ga mau dengan script diatas kalian bisa menggunakan java script eksternal. dengan cara menyimpan kode diatas kedalam file .js, kemudian simpan di hosting penyimpanan seperti googlecode. Untuk cara penyimpanannya kalian bisa baca di artikel saya tentang cara upload file JS dan CSS di google code.

Atau kalian juga bisa memakai script yang ada dibawah ini.

<script src="http://umieuis.googlecode.com/files/KURSORBINTANG.js" type="text/javascript"></script>

Untuk proses pemasangan sama seperti diatas, atau juga kalian bisa menyimpan file .js nya diatas kode </head> pada template kalian.

Semoga tips sederhana ini akan bermanfaat bagi kalian. Terima kasih

Silahkan kirimkan Donasi anda seikhlasnya berupa uang/pulsa (Klik Gambar kado disamping) untuk perkembangan blog ini dan Proses pembelajaran untuk sahabat.

Penulis :  Azis Lamayuda | BLOG : Do The Best To Get The Best
Saya hanyalah seorang yang sedang belajar dan berbagi pelajaran dengan siapapun. Blog ini dibuat untuk memudahkan kalian yang sedang belajar sama seperti saya.