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..:)

58 comments:

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

    ReplyDelete
  2. @nurfashareena

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

    ReplyDelete
  3. 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!!

    ReplyDelete
  4. hehe...dah dapat...thanks kak farah..

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

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

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

    ReplyDelete
  8. allhamdulillah,jadi pon,thanks :)

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

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

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

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

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

    ReplyDelete
  14. 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
    :(

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

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

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

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

    ReplyDelete
  19. This comment has been removed by the author.

    ReplyDelete
  20. Tak jadi pun kak farah..Help please!

    ReplyDelete
  21. terima kasih kak .. like snagat2 . hihi .

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

    ReplyDelete
  23. jadi lah , tahank yer akak :)

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

    ReplyDelete

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

Terima kasih lepak sini, nanti datang lagi yer..
Sayang Korang...





 
This Blog is Protected. Created By Cik Nurfarah. Copyright © 2016 Cik Nurfarah