Monday, 16 August 2010

Membuat Kursor Bertabur Bintang

Sore semua, gimana puasa kalian?? Hayo pada puasa gak??
Hadew aku lagi pusing berat ne, mungkin gara-gara pagi tadi gak sahur kaliya?? Abisnya bangun dah adzan subuh. Payah dech

Sesuai judul diatas aku mau kasih panduan / tutorialnya, emang sih ne tutorial dari blog sebelah. Awalnya aku emang minat buat desain blog yang ini tapi gara-gara scripnya di save di file hosting ma yg punya ya jadi aku agak kesulitan, coz jujur aja ya aku pengen tau kode aslinya.

Sedikit cerita ne ya. Kemaren aku download 2 scrip tapi setelah aku liat-liat kok kodenya sama persis yang beda hanya kode warnanya saja. Yadah, ide gilaku muncul buat ngedit ntu scrip jadi Cuma dg 1 scrip saja kita bisa mengubah warna bintangnya sesuai keinginan kita.

Ne ntar jadinya seperti dibawah ini ato kalian bisa liat sendiri di blogku ini :


1. Yang pertama kalian kudu Log-in dengan akun kalian masing-masing

2. Lalu masuk ke “Rancangan/Tata Letak” Trus “Elemen Laman”

3. Kemudian “Tambah Gadget” dan pilih “HTML/JavaScrip”

4. Kalo sudah masukkan kode dibawah ini :



<script type='text/javascript'>
// <![CDATA[
var colour="#0000FF";
var sparkles=65;

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="2px";
rlef.style.left="0px";
rdow.style.top="0px";
rdow.style.left="2px";
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>



Nb. Nah ini sob bagian terpentingnya kode yang aku beri warna merah ntu kalian bisa ganti dengan warna yang kamu inginkan:
  • Misalnya dengan kode warna HTML kunjungi Wikipedia.org
  • Atau dengan “blue,black,green, dll

5. Kemudian “Simpan” dan silahkan lihat hasilnya

“Good Luck buat kalian semuanya ya”





Tutorial Diatas Di-Ilhami
Dari
http://amatullah83.blogspot.com/



.
Comments
5 Comments

5 comments:

Ratna Sari 16 August 2010 at 00:55  

Jika kode diatas tidak bekerja, berarti ada scrip yang bentrok. Ya pakek aja salah satu.

tony 27 August 2010 at 06:38  

baguss ..
nambah ilmu niy, hehe

Aris Ryan S,  27 November 2010 at 18:53  

Blue Zone ????
Pelarian Kisah Ratna ...WKokokokoo

Blog U MANtep UYY ...FB u gak bisa Di add YAW ,,, SUSAH deh klo aku mnta ajari <<<<<

KAlau boleh add Fb aku yaw>>> biar bisa shar

facebook.com/arisryanz

fahmieL 7 July 2011 at 01:23  

thx inponyah gann

kunjungin blog ane gan..
es-campor.blogspot.com

Post a Comment

follow me

Kasih Makan Hamsterku

Networked Blogs

  © Ratna-Always For You The Transformers by Blog Tips And Trick 2009