Tutorial 46 : Sparkling Cursor


Assalamualaikum.
Hari ini aku nak share tentang nak melawakan blog lagi. Tutorial ini cuma nak tambah kecomelan blog je tak ada yang penting pun. Jadi dikesempatan yang ada ni aku nak ajar macam mana nak buat sparkling cursor. Ala yang macam kat belog aku ni. Dia seakan-akan salji yang turun dari cursor korang. Sungguh cantik macam di kayangan kan..:). Sebenarnya banyak cara nak buat sparkling cursor ni tapi aku ajar yang paling senang cuma add widget je. Tak payah susah-susah cari coding nak menempek widget ini. Sebelum ini aku tengok ada jugak orang buat tutorial ini tapi kena download bagai. Jadi aku bagi yang senang je. Mudahkan.. Jom ikuti step berikut untuk mendapatkan sparkling cursor sendiri. Jom-jom..

1. Sign in blogger > Design > Add Gadget > Html/JavaScript
2. Copy code di bawah ke dalam Html/Java Script
<script type='text/javascript'>


</script>


<script type='text/javascript'>
// <![CDATA[
var colour="#FF00E1";
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>
 3. Kalau korang nak tukar warna sparklingcursor cuma replace code biru itu. Aku guna pink colour. Kalau korang suka tak payah la ubah apa-apa..tempek je. Kalau nak cari code warna lain sila ke SINI
4. Lepas itu bolehlah di SAVE. Korang cuba tengok dan gerakkan cursor korang pasti ada hujan versi salji turun.. ok daaa..

p/s : Dah mencuba tu ringankanlah tangan untuk komen dan like. Kalau tak boleh jadi mesti ada penunggu gunung raya kat belog korang..muahahaha..:)
Share this PostPin ThisEmail ThisShare on Google PlusShare on Tumblr
59 Comments for "Tutorial 46 : Sparkling Cursor"

thanks! hehehe
tapi nak tanya, apsal dekat header blog tetibe klua free cursors 4-U ?
cmne nk hilang kan die eh ?

@nurfashareena

mybe awak ambil cursor dari another web yang dia letak credit as their web

Adik2 dan reader yang amat disayangi..try betol2 ye this tutorial..if error maybe this tutorial not suitable for your template..im so sorry my honey sekalian..im so bz..not a time to reply all comment..so try the best bebe!!

hehe...dah dapat...thanks kak farah..

tengS sesangat cik fara 4 all the tutorial.. bes sgt ^_^

salam , kak ? saya sekarang ni tengah cari buble cursor yang ade sparkling jugak .. akak boleh tolong ?

Kak farah, cam ne nak buat sparkling cursor yang rainbow tuu , yang trend skrang tu ? cantik la ^^ .

allhamdulillah,jadi pon,thanks :)

thanks...sye suka tutuoriol awk..nk follow awk lorh..hehe

Wah , jadilah .. cantik .. suka2 .. terima kasih =)

tq kak fara.. ske tgok blog akak.. klau snang jengahla ke blog sye plak.. hehe

thank u farah,,,dah jadi akak buat...

Terima kasih ye Farah..Kak intan berjaya..hehehe..Tq!

akakk , saya ada try nak buad bagi kotak komen jadi cantekk . benda tu kena buat dkat edit HTML . tapi , benda itu tiba2 ayat tu muncul kat blog sayaa . dekat bahagian atas
:(

@aryIn SAYA Jadi ! Mekaseh Kak :) Sayang Akaq .. Alhamdulillah .. :)) Bakpe Org Laen Tak Jadi Ek ? *THINKING* Hmmm ..

@♥Miss Farah♥Hai kak Farah saya buat ikut tuto akak banyak yang menjadi saya suka sangat i like <3

Hai kak Farah semua tuto yang shaye guna banyak menjadi i like <3 .

Jadi-2 .! Yehh ! Thanks so much kak Farah ! :D

This comment has been removed by the author. - Hapus

Tak jadi pun kak farah..Help please!

terima kasih kak .. like snagat2 . hihi .

salam farah...tq so much 4 beautiful
Sparkling Cursor its really work 4 me i tukar warne purple

jadi lah , tahank yer akak :)

Kakak....Minta copy-paste kat blog bleh tak?? PLSSS....

thanks for the tutorial. ..sangat2 lah berguna espeially for new blogger macam saya. .

-Assalamualaikum, sila tinggalkan komen anda.
-Kalau suka tekan LIKE.
-Insyaallah komen anda akan dilayan :)

Jangan lupa LIKE! dan SHARE!

Terima kasih :)

Related Posts Plugin for WordPress, Blogger...
Back To Top