ni cikgu baru nak belajar mengajar.... saje nak kongsi ilmu... tak seberapa pun, tapi sharing is caring kan????
harini cikgu iznie ade mood nak mengajar mcm mane nak buat sparkle cursor kat blog.. ha... nampak ala blink-blink gitu!!! cikgu iznie tak berapa pandai nak menceceh lebih-lebih, so cikgu iznie akan terangkan semudah & sesimple yang mungkin... harap-harap murid-murid fahamlah ye ape yang cikgu iznie nak sampaikan ni ^^
1- sila pergi ke dashboard blog korang dan klik ke Design,
2- pastu klik kat Edit HTML macam gambar ni... klik gambar untuk image jelas sikit, //gambar ini copyright dr blog saya... kalau nak sila mintak izin dari saya dulu ^^
faham???
3- sila copy kod bawah ni...
<script type='text/javascript'>
// <![CDATA[
var colour="#B93B8F";
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>
4- kat ruang Edit Template tu kan ade banyak sangat kod... cuba cari <head>
nota,
untuk memudahkan pencarian, sila tekan "ctrl + f" pada keypad anda dan taip <head>, kalau tak jumpa keypad, ha.. carik la kod tu sampai jumpa. hihihihi ^^
5- dah jumpa??? pandai anak murid cikgu..... ok, paste kod kat atas tu kat atas (sebelum) perkataan <head>
tak faham??? tengok gambar kat bawah ni...
ha... dah faham???
5- kalau dah faham, jum kite sambung lagi tutorial... save template yang korang dah paste tu ye...
6- cuba view blog korang tu... ha??? ape??? sparkle tu kale purple??? boleh tukar colour kalau korang tak suka purple... cuba klik kat kod warna pilih la ape warna yang korang suka & sesuai dengan mood korang... copy kod warna tersebut.... contoh kod untuk deep pink, #F52887
7- pergi semula kat Edit HTML yang baru korang jenguk tu...
8- cari var colour="#B93B8F";
nota :
untuk mudahkan pencarian, sila tekan "ctrl + f" pada keypad anda, taip lah var colour
9- tukar kod #B93B8F kepada kod colour yang korang suka tu,
10- save template & view blog... tada!!!! jadik tak???
Sekian saja tutorial untuk hari ini... cikgu iznie nak buat kerja rumah pulak.... rajinnye cikgu iznie ni.. hihihihi
selamat mencuba semua! kalau tak faham sila tanya ya, Insya Allah cikgu akan cuba jawab... ^^
Posts
No comments:
Post a Comment
bicara sweetheart