Memberi Efek Salju pada Blog ( Snow Effect )

Walaupun di Indonesia tidak bisa menikmati musim dingin atau yang sering didengar musim salju, tapi kan kita bisa bikin salju buatan dari gabus yang sudah di parut hehehe. Waktu kecil sering sekali saya mngimpikan dan menginginkan di Indonesia bisa turun salju sampai - sampai saya membuat salju buatan dari gabus dengan teman saya, gabus tersebut di parut atau digesekan di tembok yang tidak rata lalu hasilnya di kumpulkan dan ditebarkan di tempat yang tinggi.

Mungkin semua orang masa kecilnya pernah mengalaminya seperti yang saya lakukan itu hehehe. Sekarang tidak perlu jauh - jauh untuk ke eropa hanya untuk melihat salju, di blog kita pun bisa melihat salju, walaupun salju tersebut tidak bisa kita rasakan. Sebenarnya trik ini sudah banyak teman blogger yang membagikannya namun tidak salah kalau saya membagikannya ulangkan.? Bagaimana cara memasang di blog? ikuti langkah di bawah ini.

Login ke blogger
masuk ke Rancangan >> Edit HTML
cari kode </head> lalu taruh kode di bawah ini tepat di atasnya

<script type='text/javascript'>
//Snow - http://www.btinternet.com/~kurt.grigg/javascript

if ((document.getElementById) &&
window.addEventListener || window.attachEvent){

(function(){

//Configure here.

var num = 100; //Number of flakes
var timer = 30; //setTimeout speed. Varies on different comps
var enableinNS6 = 1 //Enable script in NS6/Mozilla? Snow animation could be slow in those browsers. (1=yes, 0=no).

//End.

var y = [];
var x = [];
var fall = [];
var theFlakes = [];
var sfs = [];
var step = [];
var currStep = [];
var h,w,r;
var d = document;
var pix = "px";
var domWw = (typeof window.innerWidth == "number");
var domSy = (typeof window.pageYOffset == "number");
var idx = d.getElementsByTagName('div').length;

if (d.documentElement.style &&
typeof d.documentElement.style.MozOpacity == "string")
num = 12;

for (i = 0; i < num; i++){
sfs[i] = Math.round(1 + Math.random() * 1);

document.write('<div id="flake'+(idx+i)+'" style="position:absolute;top:0px;left:0px;width:'
+sfs[i]+'px;height:'+sfs[i]+'px;background-color:#ffffff;font-size:'+sfs[i]+'px"><\/div>');

currStep[i] = 0;
fall[i] = (sfs[i] == 1)?
Math.round(2 + Math.random() * 2): Math.round(3 + Math.random() * 2);
step[i] = (sfs[i] == 1)?
0.05 + Math.random() * 0.1 : 0.05 + Math.random() * 0.05 ;
}

if (domWw) r = window;
else{
if (d.documentElement &&
typeof d.documentElement.clientWidth == "number" &&
d.documentElement.clientWidth != 0)
r = d.documentElement;
else{
if (d.body &&
typeof d.body.clientWidth == "number")
r = d.body;
}
}

function winsize(){
var oh,sy,ow,sx,rh,rw;
if (domWw){
if (d.documentElement && d.defaultView &&
typeof d.defaultView.scrollMaxY == "number"){
oh = d.documentElement.offsetHeight;
sy = d.defaultView.scrollMaxY;
ow = d.documentElement.offsetWidth;
sx = d.defaultView.scrollMaxX;
rh = oh-sy;
rw = ow-sx;
}
else{
rh = r.innerHeight;
rw = r.innerWidth;
}
h = rh - 5;
w = rw - 5;
}
else{
h = r.clientHeight - 5;
w = r.clientWidth - 5;
}
}

function scrl(yx){
var y,x;
if (domSy){
y = r.pageYOffset;
x = r.pageXOffset;
}
else{
y = r.scrollTop;
x = r.scrollLeft;
}
return (yx == 0)?y:x;
}

function snow(){
var dy,dx;

for (i = 0; i < num; i++){
dy = fall[i];
dx = fall[i] * Math.cos(currStep[i]);

y[i]+=dy;
x[i]+=dx;

if (x[i] >= w || y[i] >= h){
y[i] = -10;
x[i] = Math.round(Math.random() * w);
fall[i] = (sfs[i] == 1)?
Math.round(2 + Math.random() * 2): Math.round(3 + Math.random() * 2);
step[i] = (sfs[i] == 1)?
0.05 + Math.random() * 0.1 : 0.05 + Math.random() * 0.05 ;
}

theFlakes[i].top = y[i] + scrl(0) + pix;
theFlakes[i].left = x[i] + scrl(1) + pix;

currStep[i]+=step[i];
}
setTimeout(snow,timer);
}

function init(){
winsize();
for (i = 0; i < num; i++){
theFlakes[i] = document.getElementById("flake"+(idx+i)).style;
y[i] = Math.round(Math.random()*h);
x[i] = Math.round(Math.random()*w);
}
snow();
}

if (window.addEventListener){
window.addEventListener("resize",winsize,false);
window.addEventListener("load",init,false);
}
else if (window.attachEvent){
window.attachEvent("onresize",winsize);
window.attachEvent("onload",init);
}

})();
}//End.
</script>
Setelah itu simpan, kalau ada, misalnya tidak bisa di simpan. Coba kamu encode terlebih dahulu kode tersebut atau di upload ke hostingan kamu lalu ikuti langkah seperti di atas baru kita simpan
nah apabila kamu menggunakan cara yang di upload terlebih dahulu, kamu copy script di bawah ini ke notepad

//Snow - http://www.btinternet.com/~kurt.grigg/javascript

if ((document.getElementById) &&
window.addEventListener || window.attachEvent){

(function(){

//Configure here.

var num = 100; //Number of flakes
var timer = 30; //setTimeout speed. Varies on different comps
var enableinNS6 = 1 //Enable script in NS6/Mozilla? Snow animation could be slow in those browsers. (1=yes, 0=no).

//End.

var y = [];
var x = [];
var fall = [];
var theFlakes = [];
var sfs = [];
var step = [];
var currStep = [];
var h,w,r;
var d = document;
var pix = "px";
var domWw = (typeof window.innerWidth == "number");
var domSy = (typeof window.pageYOffset == "number");
var idx = d.getElementsByTagName('div').length;

if (d.documentElement.style &&
typeof d.documentElement.style.MozOpacity == "string")
num = 12;

for (i = 0; i < num; i++){
sfs[i] = Math.round(1 + Math.random() * 1);

document.write('<div id="flake'+(idx+i)+'" style="position:absolute;top:0px;left:0px;width:'
+sfs[i]+'px;height:'+sfs[i]+'px;background-color:#ffffff;font-size:'+sfs[i]+'px"><\/div>');

currStep[i] = 0;
fall[i] = (sfs[i] == 1)?
Math.round(2 + Math.random() * 2): Math.round(3 + Math.random() * 2);
step[i] = (sfs[i] == 1)?
0.05 + Math.random() * 0.1 : 0.05 + Math.random() * 0.05 ;
}

if (domWw) r = window;
else{
if (d.documentElement &&
typeof d.documentElement.clientWidth == "number" &&
d.documentElement.clientWidth != 0)
r = d.documentElement;
else{
if (d.body &&
typeof d.body.clientWidth == "number")
r = d.body;
}
}

function winsize(){
var oh,sy,ow,sx,rh,rw;
if (domWw){
if (d.documentElement && d.defaultView &&
typeof d.defaultView.scrollMaxY == "number"){
oh = d.documentElement.offsetHeight;
sy = d.defaultView.scrollMaxY;
ow = d.documentElement.offsetWidth;
sx = d.defaultView.scrollMaxX;
rh = oh-sy;
rw = ow-sx;
}
else{
rh = r.innerHeight;
rw = r.innerWidth;
}
h = rh - 5;
w = rw - 5;
}
else{
h = r.clientHeight - 5;
w = r.clientWidth - 5;
}
}

function scrl(yx){
var y,x;
if (domSy){
y = r.pageYOffset;
x = r.pageXOffset;
}
else{
y = r.scrollTop;
x = r.scrollLeft;
}
return (yx == 0)?y:x;
}

function snow(){
var dy,dx;

for (i = 0; i < num; i++){
dy = fall[i];
dx = fall[i] * Math.cos(currStep[i]);

y[i]+=dy;
x[i]+=dx;

if (x[i] >= w || y[i] >= h){
y[i] = -10;
x[i] = Math.round(Math.random() * w);
fall[i] = (sfs[i] == 1)?
Math.round(2 + Math.random() * 2): Math.round(3 + Math.random() * 2);
step[i] = (sfs[i] == 1)?
0.05 + Math.random() * 0.1 : 0.05 + Math.random() * 0.05 ;
}

theFlakes[i].top = y[i] + scrl(0) + pix;
theFlakes[i].left = x[i] + scrl(1) + pix;

currStep[i]+=step[i];
}
setTimeout(snow,timer);
}

function init(){
winsize();
for (i = 0; i < num; i++){
theFlakes[i] = document.getElementById("flake"+(idx+i)).style;
y[i] = Math.round(Math.random()*h);
x[i] = Math.round(Math.random()*w);
}
snow();
}

if (window.addEventListener){
window.addEventListener("resize",winsize,false);
window.addEventListener("load",init,false);
}
else if (window.attachEvent){
window.attachEvent("onresize",winsize);
window.attachEvent("onload",init);
}

})();
}//End.
lalu save dan beri nama Snoweffect.js dan jangan lupa pada poin save as type-nya pilih yang All Files lalu klik simpan dan upload di hostingan kamu.
Setelah di upload, ambil alamat file tersebut lalu masukan pada kode di bawah ini

<script src='Alamat-File-Kamu-Yang-Telah-Di-Upload' type='text/javascript'/>
Catatan : Alamat-File-Kamu-Yang-Telah-Di-Upload >> ganti dengan alamat file kamu yang telah di upload
setelah langkah di atas baru sobat dapat masukan kode tersebut di atas kode </head> lalu sobat dapat menyimpannya.

Langkahnya agak ribet y? y begitulah caranya, disana saya jelaskan ada 3 cara. Yang pertama, dengan langsung memasukan kode itu mentah - mentah. Yang kedua, meng-encode terlebih dahulu baru memasukan kodenya ke dalam template. Dan yang ketiga, mengupload terlebih dahulu kode tersebut lalu memasukan kedalam template. Mungkin itu saja yang bisa saya sampaikan, apabila kamu menemukan masalah dalam pemasangannya, kamu dapat berkonsultasi dengan saya dengan meninggalkan pesan di kotak komentar yang ada di bawah ini. Terima kasih dan Happy Blogging.

Bagikan Artikel : Facebook Twitter Google+ Linkedin Technorati Digg