Aku Punya dot com

Tidak Punya Ide Untuk Menulis

  • Home
  • Kontak
 
Home > Blog > Cara membuat efek salju pada blog
06
Nov
2009

Cara membuat efek salju pada blog

Posted by: admin

Cara 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
Reload
«
»
iklan

21 Komentar

Blog, Javascript, Tips trik blog

Postingan yang lain:
  • Membuat efek daun berjatuhan di blog
  • Membuat message/pesan upgrade untuk IE6
  • Cara meningkatkan traffic / posisi website di search engine
  • Cara membuat tulisan melayang 3D
  • Optimasi SEO untuk pemula (pdf)

Ada 21 komentar di “Cara membuat efek salju pada blog”

Tulis komentar
Komentar dari MT:
Dari IP: 118.136.244.143
Tanggal 19 Desember 2009 jam 6:14 pm

hi.. saya numpang tanya. saya memakai sitebuiler.bagaimana editnya yah kalau ini.. makasih

Balas komentar

Komentar dari admin:
Dari IP: 110.139.117.131
Tanggal 19 Desember 2009 jam 6:34 pm

Asalkan template html nya bisa di edit, caranya sama saja seperti diatas.
Kode pertama letakkan pada bagian <head>
Kode kedua letakkan pada bagian <body>

Balas komentar

Komentar dari fahries:
Dari IP: 118.96.54.72
Tanggal 12 Januari 2010 jam 3:03 am

LEBIH BAGUS AJA YA

Balas komentar

Komentar dari danan:
Dari IP: 125.165.103.67
Tanggal 24 Oktober 2010 jam 9:57 pm

yang dibilang head dgn body tuh yg mana….
aku makai blog tema…

Balas komentar

Komentar dari admin:
Dari IP: 125.167.235.186
Tanggal 24 Oktober 2010 jam 11:57 pm

pertanyaan kamu sdh aku jawab disini http://aku-punya.com/cara-membuat-link-berkedip.html/comment-page-1#comment-3848 ;-)

Balas komentar

Komentar dari danan:
Dari IP: 118.97.162.10
Tanggal 26 Oktober 2010 jam 8:43 am

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 .. :sad: :sad: :sad:

Balas komentar

Komentar dari poles marmer:
Dari IP: 114.58.246.76
Tanggal 23 November 2010 jam 11:44 pm

tenkyu info’a////

Balas komentar

Komentar dari Dwi:
Dari IP: 125.165.132.147
Tanggal 9 Maret 2011 jam 8:23 pm

kok ga muncul sih efek salju nyaaa :sad:

Balas komentar

Balasan dari admin:
Dari IP: 64.255.164.81
Tanggal 10 Maret 2011 jam 12:25 am

supaya efek nya muncul, gambar salju nya harus di upload dulu mbak…

Balas komentar

Komentar dari Andika:
Dari IP: 202.152.196.129
Tanggal 7 Juni 2011 jam 1:34 pm

mas, itu di upload ke mana ? ke Edit HTML itu ya ?

Balas komentar

Balasan dari admin:
Dari IP: 64.255.180.94
Tanggal 7 Juni 2011 jam 2:34 pm

klo gambarnya itu diupload ke image hosting (bisa PhotoBucket.com atau Picasa.com)
klo scriptnya itu pasang di ‘Edit HTML’

Balas komentar

Komentar dari Andika:
Dari IP: 202.152.196.129
Tanggal 22 Juni 2011 jam 11:06 am

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,, :oops:

Balas komentar

Balasan dari admin:
Dari IP: 64.255.164.96
Tanggal 22 Juni 2011 jam 12:59 pm

oh iya, alamat web Picasa kemaren itu salah.
nih alamat webnya: picasaweb.google.co.id :roll:

Balas komentar

Komentar dari Anak Nubi:
Dari IP: 182.9.82.39
Tanggal 22 Juni 2011 jam 1:44 pm

Maksudnya gimana mas.. Saya jadi binggung.. stelah di upload kita lngsung aja gimana>> ????

Balas komentar

Balasan dari admin:
Dari IP: 64.255.164.96
Tanggal 22 Juni 2011 jam 2:01 pm

stlh gbr diupload, pasang kode2 javascript tsb di html editor blog kmu, ikuti langkah2nya diatas..

Balas komentar

Komentar dari Rifky:
Dari IP: 118.96.41.185
Tanggal 5 Juli 2011 jam 3:50 am

koq gk work ya..?? :?:

Balas komentar

Balasan dari admin:
Dari IP: 125.167.234.215
Tanggal 10 Juli 2011 jam 5:31 pm

klo blogspot emg agak susah.. :sad:

Balas komentar

Komentar dari Chacha:
Dari IP: 118.137.5.11
Tanggal 8 Juli 2011 jam 5:46 pm

upload fotonya dimana ya? hehe pemula sih

Balas komentar

Balasan dari admin:
Dari IP: 64.255.164.62
Tanggal 8 Juli 2011 jam 6:37 pm

upload aja di Photobucket…
udh aku tulis dikomentar no.10

Balas komentar

Komentar dari Deni Sp:
Dari IP: 180.241.106.203
Tanggal 10 Juli 2011 jam 5:03 pm

buat yg tampilan ada salju_saljunya, tergantung template ya gan.. :oops:

Balas komentar

Balasan dari admin:
Dari IP: 125.167.235.186
Tanggal 10 Juli 2011 jam 5:48 pm

blogspot emg agak susah pasang scriptnya gan.. :roll:

Balas komentar

Tulis Komentar


website / blog

Komentar:

Emoticon
Emoticon:
X
icon_smile.gif icon_wink.gif icon_neutral.gif icon_mad.gif icon_wc.gif icon_uhuk.gif icon_twisted.gif icon_eek.gif icon_sad.gif icon_rolleyes.gif icon_razz.gif icon_puyeng.gif icon_pliss.gif icon_payah.gif icon_lidah.gif icon_redface.gif icon_surprised.gif icon_mrgreen.gif icon_lol.gif icon_kencing.gif icon_idea.gif icon_biggrin.gif icon_evil.gif icon_dead.gif icon_cry.gif icon_cool.gif icon_bom.gif icon_bisik-bisik.gif icon_ayolah.gif icon_arrow.gif icon_confused.gif icon_question.gif icon_exclaim.gif 

Batalkan balasan
 
    CO.CC Free Domain
  •     Komentar terbaru

    • andre597: saya mau mengembalikan pb saya #
    • imam: Lah Kok saya Bisa Yah ? :| M #
    • ichwan hausgame: sukses dicoba gan...terimakasi #
    • @ayu_ayudewi: kok lama sih lodingnya? :wc: #
    • Niko98.com: MAU DOWNLOAD GAMES GAMES GRATI #
    • Lmag: efeknya keren, daunnya pada be #
    • gm{joker}: tu loe bisa aneh ya loe #
    • sfdxg: ya adah kok gk ada karakteh wa #
    • sfdxg: hei loe cadet sinih bay pb ama #
    • akbar: aku anak yang rajin loe wow #
  •     Kategori

    • Adsense
    • Aneh
    • Biografi
    • Blog
    • Cewek
    • CSS
    • CSS3
    • Dofollow
    • DVD
    • Emoticon
    • Facebook
    • Game
    • Google
    • Gratis
    • Hiburan
    • Javascript
    • Kamus Online
    • Kesehatan
    • Kiamat
    • Kids
    • Komik
    • Lucu
    • Menu Bulan Puasa
    • Mp3
    • PHP
    • Rank
    • Resep
    • Search Engine
    • SEO
    • Sitemap
    • Story
    • Tak Berkategori
    • Tak Penting
    • Tips
    • Tips trik blog
    • Traveling
    • Twitter
    • Wedding
    • Wordpress
    • Youtube
  •     Arsip

    • Januari 2012
    • Desember 2011
    • November 2011
    • Oktober 2011
    • September 2011
    • Agustus 2011
    • Juli 2011
    • Juni 2011
    • Mei 2011
    • April 2011
    • Maret 2011
    • Februari 2011
    • Januari 2011
    • Desember 2010
    • November 2010
    • Oktober 2010
    • September 2010
    • Agustus 2010
    • Juli 2010
    • Juni 2010
    • Mei 2010
    • April 2010
    • Maret 2010
    • Februari 2010
    • Januari 2010
    • Desember 2009
    • November 2009
    • Oktober 2009
    • September 2009
    • Agustus 2009
    • Juli 2009
    • Juni 2009
    • Mei 2009
    Adsense Indonesia
    ...
      Page: /cara-membuat-efek-salju-pada-blog.html : Blogators
      Bob Haircuts
      Test Link 3

Aku Punya dot com © 2009 - 2012
Powered by WordPress
Best viewed in Firefox, Opera, and Chrome at 1280 x 960 screen resolutions

Feed  |  Sitemap  |  Recent Posts
Tukar Link  |  Pasang Banner  |  Kontak

26 queries. 1,526 seconds

Toolbar
tulis komentar
     
21 komentar
Komentar 21
kembali ke bawah
Bawah
kembali ke atas
Atas
Games
  • »  Game Puzzle
  • »  Game Tetris
  • Game Puzzle  
     
    Game Tetris  
     
    Shoutbox
    Shoutbox  

     
    Suka
    Aku Punya fans  
     
    Pencarian
    memuat ...