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

66 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. @FarRa

    ada ditutorial..bubble cursor.try tgk

    ReplyDelete
  8. x jadi lah kak tapi x pe

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

    ReplyDelete
  10. allhamdulillah,jadi pon,thanks :)

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

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

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

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

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

    ReplyDelete
  16. 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
  17. @aryIn SAYA Jadi ! Mekaseh Kak :) Sayang Akaq .. Alhamdulillah .. :)) Bakpe Org Laen Tak Jadi Ek ? *THINKING* Hmmm ..

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

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

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

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

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

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

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

    ReplyDelete
  25. salam kak tolog ajar tak faham

    ReplyDelete
  26. jadi lah , tahank yer akak :)

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

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

    ReplyDelete
  29. Assalamualaikum, Hai.. banyak maklumat dan info dapat kat blog ni.. Terima kasih banyak ya.. teruskan share ilmu yang bermanfaat ni.. blog pun cantik dan menarik.. :)

    ReplyDelete
  30. tq sis for tutorial..menjadi lah..hihi..

    ReplyDelete
  31. Hi there! The smaller font under each word tells the actual name of the font. The "sparkling" one is called Sweet Pea font and the link is: http://www.dafont.com/sweet-pea.font
    The clickable links to all of them are right under the image!
    Thanks!

    ReplyDelete
  32. Hi there! The smaller font under each word tells the actual name of the font. The "sparkling" one is called Sweet Pea font and the link is: http://www.dafont.com/sweet-pea.font
    The clickable links to all of them are right under the image!
    Thanks!

    ReplyDelete
  33. Hi there! The smaller font under each word tells the actual name of the font. The "sparkling" one is called Sweet Pea font and the link is: http://www.dafont.com/sweet-pea.font
    The clickable links to all of them are right under the image!
    Thanks!

    ReplyDelete
  34. Hi there! The smaller font under each word tells the actual name of the font. The "sparkling" one is called Sweet Pea font and the link is: http://www.dafont.com/sweet-pea.font
    The clickable links to all of them are right under the image!
    Thanks!

    ReplyDelete

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

Jangan lupa LIKE! dan SHARE!

Terima kasih :)

Blogger Copyright © 2019. All Rights Reserved by BLOG CIK NURFARAH