Snow Effects

Berbeda dengan Money Rain Effects yang harus menggunakan image untuk menciptakan sebuah effek, Snow Effects mampu menciptakan efek hujan salju tanpa harus menambahkan gambar/image. Efek ini benar-benar murni menggunakan javascript. Seperti apa tampilan sebuah blog dengan Snow Effect di dalamnya ? KLIK DEMO untuk melihat hasilnya!

D E M O

Cara membuat Snow Effects :

Copy dan paste javascript di bawah ini dan simpan di bagian body di di antara tag <body> dan tag </body>

Login ke Blogger.
- Tuliskan "User Name" (gmail) atau tuliskan "Email Address" (non gmail).
- Tuliskan Password.
- Klik "Sign in"
Beberapa saat setelah klik sign in anda akan menjumpai halaman "Dasbor (Dasboard)".
Klik "Rancangan (Design)".
Kembali halaman baru akan terbuka, klik "Edit HTML".
Sebuah halaman baru kembali kita jumpai. Halaman ini berisi 3 (tiga) bagian:
- Backup/Restore Template » berisi fitur untuk melakukan backup template.
- Edit Template » berisi sebuah box besar yang di dalamnya berisikan kode html penyusun blog.
- Old Templates » berisi template lama blogger (Template Tata Letak & Template Klasik.
Cari kode </body> pada "Box Edit Template".
Copy javascript snow effect dan letakkan di atas </body>
Klik "Simpan Template (Save Template)".

Javascript Snow Effect :

<script type="text/javascript">
//<![CDATA[
var snowStorm = null;
function SnowStorm() {
    this.flakesMax = 150;
    this.flakesMaxActive = 64;
    this.animationInterval = 33;
    this.flakeBottom = null;
    this.targetElement = null;
    this.followMouse = true;
    this.snowColor = "#fff";
    this.snowCharacter = "&bull;";
    this.snowStick = true;
    this.useMeltEffect = true;
    this.useTwinkleEffect = false;
    this.usePositionFixed = false;
    this.flakeLeftOffset = 0;
    this.flakeRightOffset = 0;
    this.flakeWidth = 8;
    this.flakeHeight = 8;
    this.vMaxX = 5;
    this.vMaxY = 4;
    this.zIndex = 0;
    var x = (typeof(window.attachEvent) == "undefined" ?
    function (E, s, i) {
        return E.addEventListener(s, i, false)
    }: function (E, s, i) {
        return E.attachEvent("on" + s, i)
    });
    var A = (typeof(window.attachEvent) == "undefined" ?
    function (E, s, i) {
        return E.removeEventListener(s, i, false)
    }: function (E, s, i) {
        return E.detachEvent("on" + s, i)
    });
    function l(s, i) {
        if (isNaN(i)) {
             i = 0
        }
        return (Math.random() * s) + i
    }
    function y(i) {
        return (parseInt(l(2), 10) == 1 ? i * -1 : i)
    }
    var p = this;
    var f = this;
    this.timers = [];
    this.flakes = [];
    this.disabled = false;
    this.active = false;
    var u = navigator.userAgent.match(/msie/i);
    var t = navigator.userAgent.match(/msie 6/i);
    var m = (u && (t || navigator.userAgent.match(/msie 5/i)));
    var q = navigator.appVersion.match(/windows 98/i);
    var n = navigator.userAgent.match(/iphone/i);
    var d = (u && document.compatMode == "BackCompat");
    var o = ((d || t || n) ? true: false);
    var b = null;
    var v = null;
    var D = null;
    var w = null;
    var c = null;
    var a = null;
    var C = 1;
    var j = 2;
    var h = 6;
    var k = false;
    var B = (function () {
        try {
            document.createElement("div").style.opacity = "0.5"
        } catch(i) {
            return false
        }
        return true
    })();
    var e = document.createDocumentFragment();
    if (p.flakeLeftOffset === null) {
        p.flakeLeftOffset = 0
    }
    if (p.flakeRightOffset === null) {
        p.flakeRightOffset = 0
    }
 this.meltFrameCount = 20;
 this.meltFrames = [];
 for (var z = 0; z < this.meltFrameCount; z++) {
  this.meltFrames.push(1 - (z / this.meltFrameCount))
 }
 this.randomizeWind = function () {
  c = y(l(p.vMaxX, 0.2));
  a = l(p.vMaxY, 0.2);
  if (this.flakes) {
   for (var s = 0; s < this.flakes.length; s++) {
    if (this.flakes[s].active) {
     this.flakes[s].setVelocities()
    }
   }
  }
 };
 this.scrollHandler = function () {
  w = (p.flakeBottom ? 0 : parseInt(window.scrollY || document.documentElement.scrollTop || document.body.scrollTop, 10));
  if (isNaN(w)) {
   w = 0
  }
  if (!k && !p.flakeBottom && p.flakes) {
   for (var s = p.flakes.length; s--;) {
    if (p.flakes[s].active === 0) {
     p.flakes[s].stick()
    }
   }
  }
 };
 this.resizeHandler = function () {
  if (window.innerWidth || window.innerHeight) {
   b = window.innerWidth - (!u ? 16 : 2) - p.flakeRightOffset;
   D = (p.flakeBottom ? p.flakeBottom: window.innerHeight)
  } else {
   b = (document.documentElement.clientWidth || document.body.clientWidth || document.body.scrollWidth) - (!u ? 8 : 0) - p.flakeRightOffset;
   D = p.flakeBottom ? p.flakeBottom: (document.documentElement.clientHeight || document.body.clientHeight || document.body.scrollHeight)
  }
  v = parseInt(b / 2, 10)
 };
 this.resizeHandlerAlt = function () {
  b = p.targetElement.offsetLeft + p.targetElement.offsetWidth - p.flakeRightOffset;
  D = p.flakeBottom ? p.flakeBottom: p.targetElement.offsetTop + p.targetElement.offsetHeight;
  v = parseInt(b / 2, 10)
 };
 this.freeze = function () {
  if (!p.disabled) {
   p.disabled = 1
  } else {
   return false
  }
  for (var s = p.timers.length; s--;) {
   clearInterval(p.timers[s])
  }
 };
 this.resume = function () {
  if (p.disabled) {
   p.disabled = 0
  } else {
   return false
  }
  p.timerInit()
 };
 this.toggleSnow = function () {
  if (!p.flakes.length) {
   p.start()
  } else {
   p.active = !p.active;
   if (p.active) {
    p.show();
    p.resume()
   } else {
    p.stop();
    p.freeze()
   }
  }
 };
 this.stop = function () {
  this.freeze();
  for (var s = this.flakes.length; s--;) {
   this.flakes[s].o.style.display = "none"
  }
  A(window, "scroll", p.scrollHandler);
  A(window, "resize", p.resizeHandler);
  if (!m) {
   A(window, "blur", p.freeze);
   A(window, "focus", p.resume)
  }
 };
 this.show = function () {
  for (var s = this.flakes.length; s--;) {
   this.flakes[s].o.style.display = "block"
  }
 };
 this.SnowFlake = function (H, G, i, I) {
  var F = this;
  var E = H;
  this.type = G;
  this.x = i || parseInt(l(b - 20), 10);
  this.y = (!isNaN(I) ? I: -l(D) - 12);
  this.vX = null;
  this.vY = null;
  this.vAmpTypes = [1, 1.2, 1.4, 1.6, 1.8];
  this.vAmp = this.vAmpTypes[this.type];
  this.melting = false;
  this.meltFrameCount = E.meltFrameCount;
  this.meltFrames = E.meltFrames;
  this.meltFrame = 0;
  this.twinkleFrame = 0;
  this.active = 1;
  this.fontSize = (10 + (this.type / 5) * 10);
  this.o = document.createElement("div");
  this.o.innerHTML = E.snowCharacter;
  this.o.style.color = E.snowColor;
  this.o.style.position = (k ? "fixed": "absolute");
  this.o.style.width = E.flakeWidth + "px";
  this.o.style.height = E.flakeHeight + "px";
  this.o.style.fontFamily = "arial,verdana";
  this.o.style.overflow = "hidden";
  this.o.style.fontWeight = "normal";
  this.o.style.zIndex = E.zIndex;
  e.appendChild(this.o);
  this.refresh = function () {
   if (isNaN(F.x) || isNaN(F.y)) {
    return false
   }
   F.o.style.left = F.x + "px";
   F.o.style.top = F.y + "px"
  };
  this.stick = function () {
   if (o || (E.targetElement != document.documentElement && E.targetElement != document.body)) {
    F.o.style.top = (D + w - E.flakeHeight) + "px"
   } else {
    if (E.flakeBottom) {
     F.o.style.top = E.flakeBottom + "px"
    } else {
     F.o.style.display = "none";
     F.o.style.top = "auto";
     F.o.style.bottom = "0px";
     F.o.style.position = "fixed";
     F.o.style.display = "block"
    }
   }
  };
  this.vCheck = function () {
   if (F.vX >= 0 && F.vX < 0.2) {
    F.vX = 0.2
   } else {
    if (F.vX < 0 && F.vX > -0.2) {
     F.vX = -0.2
    }
   }
   if (F.vY >= 0 && F.vY < 0.2) {
    F.vY = 0.2
   }
  };
  this.move = function () {
   var s = F.vX * C;
   F.x += s;
   F.y += (F.vY * F.vAmp);
   if (F.x >= b || b - F.x < E.flakeWidth) {
    F.x = 0
   } else {
    if (s < 0 && F.x - E.flakeLeftOffset < 0 - E.flakeWidth) {
     F.x = b - E.flakeWidth - 1
    }
   }
   F.refresh();
   var J = D + w - F.y;
   if (J < E.flakeHeight) {
    F.active = 0;
    if (E.snowStick) {
     F.stick()
    } else {
     F.recycle()
    }
   } else {
    if (E.useMeltEffect && F.active && F.type < 3 && !F.melting && Math.random() > 0.998) {
     F.melting = true;
     F.melt()
    }
    if (E.useTwinkleEffect) {
     if (!F.twinkleFrame) {
      if (Math.random() > 0.9) {
       F.twinkleFrame = parseInt(Math.random() * 20, 10)
      }
     } else {
      F.twinkleFrame--;
      F.o.style.visibility = (F.twinkleFrame && F.twinkleFrame % 2 === 0 ? "hidden": "visible")
     }
    }
   }
  };
  this.animate = function () {
   F.move()
  };
  this.setVelocities = function () {
   F.vX = c + l(E.vMaxX * 0.12, 0.1);
   F.vY = a + l(E.vMaxY * 0.12, 0.1)
  };
  this.setOpacity = function (J, s) {
   if (!B) {
    return false
   }
   J.style.opacity = s
  };
  this.melt = function () {
   if (!E.useMeltEffect || !F.melting) {
    F.recycle()
   } else {
    if (F.meltFrame < F.meltFrameCount) {
     F.meltFrame++;
     F.setOpacity(F.o, F.meltFrames[F.meltFrame]);
     F.o.style.fontSize = F.fontSize - (F.fontSize * (F.meltFrame / F.meltFrameCount)) + "px";
     F.o.style.lineHeight = E.flakeHeight + 2 + (E.flakeHeight * 0.75 * (F.meltFrame / F.meltFrameCount)) + "px"
    } else {
     F.recycle()
    }
   }
  };
  this.recycle = function () {
   F.o.style.display = "none";
   F.o.style.position = (k ? "fixed": "absolute");
   F.o.style.bottom = "auto";
   F.setVelocities();
   F.vCheck();
   F.meltFrame = 0;
   F.melting = false;
   F.setOpacity(F.o, 1);
   F.o.style.padding = "0px";
   F.o.style.margin = "0px";
   F.o.style.fontSize = F.fontSize + "px";
   F.o.style.lineHeight = (E.flakeHeight + 2) + "px";
   F.o.style.textAlign = "center";
   F.o.style.verticalAlign = "baseline";
   F.x = parseInt(l(b - E.flakeWidth - 20), 10);
   F.y = parseInt(l(D) * -1, 10) - E.flakeHeight;
   F.refresh();
   F.o.style.display = "block";
   F.active = 1
  };
  this.recycle();
  this.refresh()
 };
 this.snow = function () {
  var G = 0;
  var F = 0;
  var H = 0;
  var s = null;
  for (var E = p.flakes.length; E--;) {
   if (p.flakes[E].active == 1) {
    p.flakes[E].move();
    G++
   } else {
    if (p.flakes[E].active === 0) {
     F++
    } else {
     H++
    }
   }
   if (p.flakes[E].melting) {
    p.flakes[E].melt()
   }
  }
  if (G < p.flakesMaxActive) {
   s = p.flakes[parseInt(l(p.flakes.length), 10)];
   if (s.active === 0) {
    s.melting = true
   }
  }
 };
 this.mouseMove = function (s) {
  if (!p.followMouse) {
   return true
  }
  var i = parseInt(s.clientX, 10);
  if (i < v) {
   C = -j + (i / v * j)
  } else {
   i -= v;
   C = (i / v) * j
  }
 };
 this.createSnow = function (s, F) {
  for (var E = 0; E < s; E++) {
   p.flakes[p.flakes.length] = new p.SnowFlake(p, parseInt(l(h), 10));
   if (F || E > p.flakesMaxActive) {
    p.flakes[p.flakes.length - 1].active = -1
   }
  }
  f.targetElement.appendChild(e)
 };
 this.timerInit = function () {
  p.timers = (!q ? [setInterval(p.snow, p.animationInterval)] : [setInterval(p.snow, p.animationInterval * 3), setInterval(p.snow, p.animationInterval)])
 };
 this.init = function () {
  p.randomizeWind();
  p.createSnow(p.flakesMax);
  x(window, "resize", p.resizeHandler);
  x(window, "scroll", p.scrollHandler);
  if (!m) {
   x(window, "blur", p.freeze);
   x(window, "focus", p.resume)
  }
  p.resizeHandler();
  p.scrollHandler();
  if (p.followMouse) {
   x(document, "mousemove", p.mouseMove)
  }
  p.animationInterval = Math.max(20, p.animationInterval);
  p.timerInit()
 };
 var r = false;
 this.start = function (s) {
  if (!r) {
   r = true
  } else {
   if (s) {
    return true
   }
  }
  if (typeof p.targetElement == "string") {
   var i = p.targetElement;
   p.targetElement = document.getElementById(i);
   if (!p.targetElement) {
    throw new Error('Snowstorm: Unable to get targetElement "' + i + '"')
   }
  }
  if (!p.targetElement) {
   p.targetElement = (!u ? (document.documentElement ? document.documentElement: document.body) : document.body)
  }
  if (p.targetElement != document.documentElement && p.targetElement != document.body) {
   p.resizeHandler = p.resizeHandlerAlt
  }
  p.resizeHandler();
  p.usePositionFixed = (p.usePositionFixed && !o);
  k = p.usePositionFixed;
  if (b && D && !p.disabled) {
   p.init();
   p.active = true
  }
 };
 function g() {
  p.start(true)
 }
 if (document.addEventListener) {
  document.addEventListener("DOMContentLoaded", g, false);
  window.addEventListener("load", g, false)
 } else {
  x(window, "load", g)
 }
}
snowStorm = new SnowStorm();
//]]>
</script>

Catatan/Keterangan :

Anda bisa merubah beberapa variable dalam javascript untuk mendapatkan tampilan berbeda.
Jika anda ingin menggunakan javascript yang sudah di simpan di file hosting (google code, silahkan buka demo dan dapatkan link javascriptnya di sana.
Panduan dan tutorial cara backup template, cari kode di template dan berbagai cara simpan kode di template silahkan buka Special Tutorials di kolom sebelah kiri.

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

Update » Ngahad LEGI,Maret,17,2012

» Happy Blogging - gubhugreyot «

3 komentar:

dyanz van keryenz5 Maret 2010 pukul 21.50
text yang ngikuti cursor trus jd clock tuh oke lho bro.... cara bikinnya gmana,gan?
BalasHapus
Balasan
DREYARS_BLOG17 Maret 2012 pukul 20.26
Template Anda tidak dapat diparse karena tidak well-formed. Harap pastikan bahwa semua elemen XML ditutup dengan benar.
Pesan error XML: The markup in the document following the root element must be well-formed.
mksud nya ap nich kk
BalasHapus
Balasan
cah ndeso kluthuk18 Maret 2012 pukul 04.05
Pro: DREYARS_BLOG
Silahkan buka lagi
Snow Effect :
http://gubhugreyot.blogspot.com/2010/01/snow-effects.html
Update - 18 Maret 2012

gubhugreyot
BalasHapus
Balasan

Tambahkan komentar

gubhug reyot

Keterangan Penting

Cumulus swf - flash

Categories

Arsip...

Flag Counters

Pengikut

Recent Comments plus Kode CSS Box Gelap

Vertical Menu

Download Browser

Widget

CSS 3

Special Tutorials

Javascript-JQuery

Blog-Email-Modem

File Hosting

Promosi Blog

Adobe-Image-Animasi

Tutorial BlogDETIK

New BloGGER Templates

Panduan BloGGeR

Tutorial Blogger

Tips-Trik Blogger

Pengilon

Ge-eR

Sobat Ngeblogh

Snow Effects

Javascript Snow Effect :

3 komentar:

gubhug reyot

Keterangan Penting

Cumulus swf - flash

Categories

Arsip...

Flag Counters

Pengikut

Recent Comments plus Kode CSS Box Gelap

Vertical Menu

Download Browser

Widget

CSS 3

Special Tutorials

Javascript-JQuery

Blog-Email-Modem

File Hosting

Promosi Blog

Adobe-Image-Animasi

Tutorial BlogDETIK

New BloGGER Templates

Panduan BloGGeR

Tutorial Blogger

Tips-Trik Blogger

Pengilon

Ge-eR

Sobat Ngeblogh

var ultimaFecha = 'Minggu, 17 Januari 2010'; remplaza_fecha('Minggu, 17 Januari 2010');

Snow Effects

Javascript Snow Effect :

3 komentar: