Thursday, February 17, 2011

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..:)
Kalau suka LIKE sahaja, Jangan lupa komen. TQ.

55 88 Orang doakan Farah dapat 4 flat:

aryIn said...

kak farah,,xjd pum?

♥Miss Farah♥ said...

@aryIn

aiawat xjadi ni?

EYKA ;) said...

jadi-jadi , i like it ;)

tyrah athirah said...

kak fara x jd ponn

Ellisa Syafiqah said...

thanks kak..

ThE rEaL mE... said...

suke!!!!!!!!!!

nurfashareena said...

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

♥Miss Farah♥ said...

@nurfashareena

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

♥Miss Farah♥ said...

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!!

shafiqah sabri said...

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

♥Miss Farah♥ said...

@shafiqah sabri

welcome..:)

oynnzaty said...

jady2 :) thanx

umie naz :) said...

jadi!!thnx kakak!

Cik Pieja said...

thnk,jdik...hehe

RaIhAn MaHzAn said...

suke sgt..shomelll!

❤❤sAkuRa❤❤ said...

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

Azlin Zakaria said...

jadi!!!suke =)

FarRa said...

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

♥Cik Nurfarah♥ said...

@FarRa

ada ditutorial..bubble cursor.try tgk

Cik Diena said...

x jadi lah kak tapi x pe

zaireen zainal said...

x jdi pon kak farah.....

Farra aniQah said...

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

♥Cik Nurfarah♥ said...

@Farra aniQah

akan diusahakan insyaallah

dyrah said...

allhamdulillah,jadi pon,thanks :)

ameerasidi said...

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

Ras Zahra said...

terima kasih

Dr DaMai said...

waa..come2..tq!!

Jannatul Adila said...

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

Awiannaaa said...

@nurfashareena Menjadi :) thanks .

nur are-tiera said...

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

awatif winslet said...

saya try jugak :)

HuDa Gurlz said...

>_< saya akan try...

Wan Salma said...

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

intanfirdaus247 said...

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

AINUN AMINAH said...

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
:(

✿ Kak Yong's Area ✖‿◕ said...

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

salmy said...

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

salmy said...

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

iffah zahar said...

yaaaay jadi thanks

Nurul Ain said...

wah menjadi.. like2! :)

hidop malang said...

akak,follow la blog adeq..hehe

Faiz Sofieya said...

thanks :)

Girl's Online ! said...

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

Farida Parno said...

Assalamualaikum kak farah..
Tutorial akak memang best!!

Cikgu Feeza said...

xjd pn..

Cikgu Feeza said...

xjd pn..

Fyra Epun said...

cantik meh..thanz..
:)

Anis Afiqah said...

tq kak farah....^_^

Zirwatul Hanan said...

Tak jadi pun kak farah..Help please!

Salyema Zack said...

terima kasih kak .. like snagat2 . hihi .

Natasha Merlin said...

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

really hate u said...

jady lah. ^o^

adyla apit said...

salam kak tolog ajar tak faham

Nieyssa Adzmiey said...

thanx...menjadi.. :)

mIs nEh said...

jadi lah , tahank yer akak :)

 
This Blog is Protected. Copyright 2011 © Design By Cik Nurfarah