Senarai Tutorial

Efek Bintang Angkasa Pada Blog

Demo:

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


Special:
wOoWW...!!!!!
dia dicabar untuk SENYAP...
Lawak kot tengok laki hilang kemachoan diorang dalam keadaan macam ini...!!!!
watch a movie...


Sharing is caring ^_^

15 komen budak comel:

Syasya said...

hye awak saya suka semua yg ada dalam ni tp boleh x nak tau mcm mana nak taruk gambar comel kat blog??

.Isna N.I.R said...

succes is a journey ,not is destinaton

.Isna N.I.R said...

succes is a journey ,not is destinaton

★łєdчα★ said...

cmne nak buat ygade gmbr rumh tu? yg ade tulis home tuh? ps2 yg ade ank pnh tuh...? tolong ajar kan leh tak?

Desi Rohayati said...

:D menarik sekali

Jombinabelog said...

@★łєdчα★ rujuk tutor ni ye http://jombinabelog.blogspot.com/2011/12/tukar-newer-post-home-dan-older-post.html

diana said...

hehe.. i pun comel ker?? :)

Qanisha Syuib said...

kalo nak hilangkan readmore, kaya mane ye??

Nadira Rayesa Mutalibov said...

aku kok gak bisa yg Star itu? :( tolong bantuin donk,kmu yang gituin...passnya aku kasih tau,hehehe :p kalau boleh,kalau gak sih gpp

kisah aku said...

sy nk tahu mcm mn nk tambah follower?

Nino Ara's Blog said...

Saya nak buat yg macam star wars tu takk bolehlah..
Yang letak shoutbox pun same
Begitu juga dengan letak blog achieve dlm box
Yang lain semua berjaya..Hee :)
1.tu takk jadi sbb takk tahu la kenapa
2.&3. tu sebab saya takk tahu nak cari url yg panjang lbr tuu,,adehh..pening nk cari satu2..ari pun tak jumpa jugakk
Tapi,nak ucap thanks alot laa sebab awk sy berjaya cantikkan blog sy :)

GreenSejukhati.com said...

salam..aiyppp !! jadi la..tengs ^_^

Ielystore Collection said...

nice blog ^__^ i follow....

GreenSejukhati.com said...

hurrmmm, sedih3 !! hari tu buat blh jew star nie,xdek bantahan pun..tetibe lak hari nie star tu tak munculkn diri dh..buat smula 4,5 kali tak jugak muncul..uhuukkkk :'(

Nor Shazwani said...

b0ley tk t0long edit my bl0g sebab bila sy edit sndiri tk cantik lah :)

Please ...

Copyright© All Rights Reserved Jombinabelog.blogspot.com