06
Nov
2009
Nov
2009
Cara membuat efek salju pada blog
Posted by: adminCara membuat efek salju pada website/blog.
Ingin blog kamu dituruni salju seperti demo dibawah ini
Demo:
Silahkan lihat demonya di halaman ini >>
Langkah 1:
Simpan dan upload 2 buah gambar bola salju diatas ke direktori website kamu atau ke free image hosting.
Langkah 2:
Masukkan kode javascript dibawah ini pada bagian <head> website/blog kamu.
Salin kode JAVASCRIPT
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <script language="javascript" type="text/javascript"> // Snow Effect Javascript var num_flakes = 10; var snowflakes = new Array("images/snow1.gif","images/snow2.gif"); // DOM test var aDOM = 0, ieDOM = 0, nsDOM = 0; var stdDOM = document.getElementById; if (stdDOM) aDOM = 1; else {ieDOM = document.all; if (ieDOM) aDOM = 1; else { var nsDOM = ((navigator.appName.indexOf('Netscape') != -1) && (parseInt(navigator.appVersion) ==4)); if (nsDOM) aDOM = 1;}} function findDOM(objectId, wS) { if (stdDOM) return wS ? document.getElementById(objectId).style: document.getElementById(objectId); if (ieDOM) return wS ? document.all[objectId].style: document.all[objectId]; if (nsDOM) return document.layers[objectId]; } // window size tests function findLivePageWidth() {return window.innerWidth != null? window.innerWidth : document.documentElement && document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body != null ? document.body.clientWidth :700;}function findLivePageHeight() {return window.innerHeight != null? window.innerHeight : document.documentElement && document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body != null? document.body.clientHeight :500;} function posX() {return typeof window.pageXOffset != 'undefined' ? window.pageXOffset:document.documentElement.scrollLeft? document.documentElement.scrollLeft:document.body.scrollLeft? document.body.scrollLeft:0;} function posY() {return typeof window.pageYOffset != 'undefined' ? window.pageYOffset:document.documentElement.scrollTop? document.documentElement.scrollTop: document.body.scrollTop?document.body.scrollTop:0;} // make it snow var speed = 50;var movw = new Array();var movh = new Array();var move = new Array();var stepw = new Array();var steph = new Array();var posw = new Array();var posh = new Array();var dir = new Array();var winWidth;var winHeight; function startSnow() {winWidth = findLivePageWidth()-75;winHeight = findLivePageHeight()-50; for (var i = 0; i < num_flakes; i++){move[i] = 0;movh[i] = 12+ Math.random()*2;movw[i] = 11+ Math.random()*4;posw[i] = Math.random()*(winWidth-35)+12;posh[i] = Math.random()*winHeight; stepw[i] = 0.02 + Math.random()/10;steph[i] = 0.7 + Math.random();dir[i] = (Math.random()>0.5)?1:-1;document.write('<div id="snow'+ i +'" style="position: absolute; z-index: '+ i +'; visibility:hidden; "><img src="'+snowflakes[Math.floor(Math.random()*snowflakes.length)]+ '" border="0"></div>');}setTimeout("moreSnow()", speed);} function moreSnow() {for (var i = 0; i < num_flakes; i++) {if (posh[i] > winHeight-50) {posw[i] = 10+ Math.random()*(winWidth-movw[i]-30);posh[i] = 0;dir[i]=(Math.random()<0.5)?1:-1;stepw[i] = 0.02 + Math.random()/9;steph[i] = 1.3 + Math.random();} move[i] += stepw[i] *dir[i]; if (Math.abs(move[i]) > 3) {dir[i]=-dir[i]; posh[i]+=Math.abs(movh[i]*move[i]);posw[i]+=movw[i]*move[i]; move[i]=0;} objstyle = findDOM('snow'+i,1); objstyle.left = (posX()+posw[i] + movw[i]*move[i])+'px'; objstyle.top = (posY()+posh[i] + movh[i]*(Math.abs(Math.cos(move[i])+move[i])))+'px';objstyle.visibility = 'visible';} setTimeout("moreSnow()", speed);} </script> |
Langkah 3:
Masukkan kode javascript dibawah ini pada bagian <body> website/blog kamu.
Salin kode JAVASCRIPT
1 2 3 | <script type="text/javascript"> startSnow(); </script> |
Selamat mencoba…!!
Sumber: About.com

memuat halaman
iklan




Postingan yang lain:




hi.. saya numpang tanya. saya memakai sitebuiler.bagaimana editnya yah kalau ini.. makasih
Asalkan template html nya bisa di edit, caranya sama saja seperti diatas.
Kode pertama letakkan pada bagian <head>
Kode kedua letakkan pada bagian <body>
LEBIH BAGUS AJA YA
yang dibilang head dgn body tuh yg mana….
aku makai blog tema…
pertanyaan kamu sdh aku jawab disini http://aku-punya.com/cara-membuat-link-berkedip.html/comment-page-1#comment-3848
kk aku tau menyusahkan …
tapi kk mau bantu bimbing aku aku g buat blog ku lebih keren…
free image postingnya tuh dimana…
terus letak di tuh di elemen laman , ato di edit HTML…
blog ku bahasa indonesia ..
tenkyu info’a////
kok ga muncul sih efek salju nyaaa
supaya efek nya muncul, gambar salju nya harus di upload dulu mbak…
mas, itu di upload ke mana ? ke Edit HTML itu ya ?
klo gambarnya itu diupload ke image hosting (bisa PhotoBucket.com atau Picasa.com)
klo scriptnya itu pasang di ‘Edit HTML’
lah mas, saya udah masuk ke Picasa.com. Tapi bingung mana yang mau di klick buat upload nya, tolong ksih tau dong, msih pemula nih,,
oh iya, alamat web Picasa kemaren itu salah.
nih alamat webnya: picasaweb.google.co.id
Maksudnya gimana mas.. Saya jadi binggung.. stelah di upload kita lngsung aja gimana>> ????
stlh gbr diupload, pasang kode2 javascript tsb di html editor blog kmu, ikuti langkah2nya diatas..
koq gk work ya..??
klo blogspot emg agak susah..
upload fotonya dimana ya? hehe pemula sih
upload aja di Photobucket…
udh aku tulis dikomentar no.10
buat yg tampilan ada salju_saljunya, tergantung template ya gan..
blogspot emg agak susah pasang scriptnya gan..