Efek Bintang Angkasa Pada Blog

Selain efek nudging, korang boleh cuba efek ni untuk tema blog ala-ala star wars ;) 

Caranya:

1) Sign in akaun blogger

2) Dashboard >> Design >> Page Element >> Add A Gadget >> Html / Javascript

3) Copy dan paste kod di bawah pada ruang Html / Javascript tadi:

<script type="text/javascript">

// <![CDATA[

var speed=33; // lower number for faster

var warp=3; // from 1 to 10

var stars=100; // number of stars

var colour="#66FF66"; // colour of stars

var position=0; // set to '-1' for stars to appear behind text on page

/****************************

* Star Warp Effect *

* (c) 2005 mf2fm web-design *

* http://www.mf2fm.com/rv *

* Tutorial by Polskahackrew *

****************************/

var i;

var strs=new Array();

var strx=new Array();

var stry=new Array();

var stdx=new Array();

var stdy=new Array();

var swide=800;

var shigh=600;

warp/=100;

window.onload=function() { if (document.getElementById) {

var b, s, temp;

set_width();

b=document.createElement("div");

s=b.style;

s.position="absolute";

s.zIndex=position;

b.setAttribute("id", "bod");

document.body.appendChild(b);

set_scroll();

for (i=0; i<stars; i++) {

strs[i]=document.createElement("div");

strs[i].style.backgroundColor=colour;

strs[i].style.overflow="hidden";

strs[i].style.position="absolute";

stdy[i]=Math.random()*4-2;

stdx[i]=Math.random()*6-3;

temp=Math.random()*100;

strx[i]=swide/2+temp*stdx[i];

stry[i]=shigh/2+temp*stdy[i];

if (Math.abs(stdx[i])+Math.abs(stdy[i])>2.66) {

strs[i].style.width="2px";

strs[i].style.height="2px";

}

else {

strs[i].style.width="1px";

strs[i].style.height="1px";

}

b.appendChild(strs[i]);

}

setInterval("warp_drive()", speed);

}}

function warp_drive() {

for (i=0; i<stars; i++) {

stry[i]+=stdy[i];

strx[i]+=stdx[i];

stdx[i]*=1+warp;

stdy[i]*=1+warp;

if (stry[i]>0 && stry[i]<shigh-3 && strx[i]>0 && strx[i]<swide-3) {

strs[i].style.left=Math.floor(strx[i])+"px";

strs[i].style.top=Math.floor(stry[i])+"px"

}

else {

strx[i]=swide/2;

stry[i]=shigh/2;

stry[i]+=stdy[i]=Math.random()*4-2;

strx[i]+=stdx[i]=Math.random()*6-3;

if (Math.abs(stdx[i])+Math.abs(stdy[i])>2.66) {

strs[i].style.width="2px";

strs[i].style.height="2px";

}

else {

strs[i].style.width="1px";

strs[i].style.height="1px";

}

}

}

}

window.onresize=set_width;

function set_width() {

if (typeof(self.innerWidth)=="number") {

swide=self.innerWidth-13;

shigh=self.innerHeight-13;

}

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;

}

else {

swide=800;

shigh=600;

}

swide-=2;

shigh-=2;

}

window.onscroll=set_scroll;

function set_scroll() {

var sleft, sdown;

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;

}

var s=document.getElementById("bod").style;

s.top=sdown+"px";

s.left=sleft+"px";

}

// ]]>

</script>

Nota:

66FF66 - warna bintang. Tukar kepada kod warna yang korang suka. Rujuk kod warna di bawah.

( untuk paparan lebih besar, klik di sini)

4) Lastly, klik save dan lihat hasilnya.

Selamat mencuba! :)