Cara Membuat Efek Hujan Di Blog

CARA MEMBUAT EFEK HUJAN DIBLOG

Pada artikel sebelumnya saya pernah membahas tentang cara membuat efek salju bertaburan, untuk kesempatan kali ini adalah efek hujan, pas banget nih selagi ngetik daerah kos gua hujan, ga bisa satnight., sial!!

sudalah, berikut cara menambahkan efek hujan di blog:

Login ke blog masing-masing
Masuk ke tata letak>>tambahkan gadget>>pilih Html/java script
Copy source code yang ada di bawah kedalam Html/javascript
Simpan dan letakkan dekat header
Selesai

source code:

//Configure below to change URL path to the snow image

var snowsrc="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWqxL0aS5T-pcpEfe1ftwUf3t0PAvTpz5eCn_eZ0QVdaxedkMp7r3pC6bHt4uzPiQQGwzOwV81OlzolLXmlWzLJetuAaJJAs8oy8_V7y5vjRmJ7vZfxaSsC7YlHOQn-hm8_5B_QG2GUDE/s400/snow.gif"

// Configure below to change number of snow to render

var no = 15;

// Configure whether snow should disappear after x seconds (0=never):

var hidesnowtime = 0;

// Configure how much snow should drop down before fading ("windowheight" or "pageheight")

var snowdistance = "pageheight";

///////////Stop Config//////////////////////////////////

var ie4up = (document.all) ? 1 : 0;

var ns6up = (document.getElementById&&!document.all) ? 1 : 0;

function iecompattest(){

return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body

}

var dx, xp, yp; // coordinate and position variables

var am, stx, sty; // amplitude and step variables

var i, doc_width = 800, doc_height = 600;

if (ns6up) {

doc_width = self.innerWidth;

doc_height = self.innerHeight;

} else if (ie4up) {

doc_width = iecompattest().clientWidth;

doc_height = iecompattest().clientHeight;

}

dx = new Array();

xp = new Array();

yp = new Array();

am = new Array();

stx = new Array();

sty = new Array();

snowsrc=(snowsrc.indexOf("dynamicdrive.com")!=-1)? "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWqxL0aS5T-pcpEfe1ftwUf3t0PAvTpz5eCn_eZ0QVdaxedkMp7r3pC6bHt4uzPiQQGwzOwV81OlzolLXmlWzLJetuAaJJAs8oy8_V7y5vjRmJ7vZfxaSsC7YlHOQn-hm8_5B_QG2GUDE/s400/snow.gif" : snowsrc

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

dx[i] = 0; // set coordinate variables

xp[i] = Math.random()*(doc_width-50); // set position variables

yp[i] = Math.random()*doc_height;

am[i] = Math.random()*20; // set amplitude variables

stx[i] = 0.02 + Math.random()/10; // set step variables

sty[i] = 0.7 + Math.random(); // set step variables

if (ie4up||ns6up) {

if (i == 0) {

document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><a href=\"http://dynamicdrive.com\"><img src='"+snowsrc+"' border=\"0\"><\/a><\/div>");

} else {

document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\">

<img src='"+snowsrc+"' border=\"0\"><\/div>");

}

function snowIE_NS6() { // IE and NS6 main animation function

doc_width = ns6up?window.innerWidth-10 : iecompattest().clientWidth-10;

doc_height=(window.innerHeight && snowdistance=="windowheight")? window.innerHeight : (ie4up && snowdistance=="windowheight")? iecompattest().clientHeight : (ie4up && !window.opera && snowdistance=="pageheight")? iecompattest().scrollHeight : iecompattest().offsetHeight;

for (i = 0; i < no; ++ i) { // iterate for every dot

yp[i] += sty[i];

if (yp[i] > doc_height-50) {

xp[i] = Math.random()*(doc_width-am[i]-30);

yp[i] = 0;

stx[i] = 0.02 + Math.random()/10;

sty[i] = 0.7 + Math.random();

}

dx[i] += stx[i];

document.getElementById("dot"+i).style.top=yp[i]+"px";

document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i])+"px";

}