Search here

Type a word related to the post, then click the search button !

Memuat...
English
Bru masuk angin!

Arsip...

Flag Counters

Flag Counter

Pengikut

Recent Comments plus Kode CSS Box Gelap

Recent Comments

blog-indonesia.com

Vertical Menu

CLICK any categories for open!
Gubhug Reyot

Sobat Ngeblogh

Sobat Ngeblogh

Buat sobat blogger yang mau ikutan jadi follower silahkan KLIK link Follower (Follow) di ujung kanan-bawah. Dari hasil monitoring, ternyata yang link-nya telah dimasukkan ke "Sobat Ngeblogh" mengalami pertambahan pengunjung secara signifikan!
Terima kasih .: Salam :.
gubhug reyot

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>
  1. Login ke Blogger.
    • Tuliskan "User Name" (gmail) atau tuliskan "Email Address" (non gmail).
    • Tuliskan Password.
    • Klik "Sign in"
  2. Beberapa saat setelah klik sign in anda akan menjumpai halaman "Dasbor (Dasboard)".
    Klik "Rancangan (Design)".
  3. Kembali halaman baru akan terbuka, klik "Edit HTML".
  4. 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.
  5. Cari kode </body> pada "Box Edit Template".
  6. Copy javascript snow effect dan letakkan di atas </body>
  7. 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 :
  1. Anda bisa merubah beberapa variable dalam javascript untuk mendapatkan tampilan berbeda.
  2. Jika anda ingin menggunakan javascript yang sudah di simpan di file hosting (google code, silahkan buka demo dan dapatkan link javascriptnya di sana.
  3. 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:

  1. text yang ngikuti cursor trus jd clock tuh oke lho bro.... cara bikinnya gmana,gan?

    BalasHapus
  2. 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
  3. Pro: DREYARS_BLOG
    Silahkan buka lagi
    Snow Effect :
    http://gubhugreyot.blogspot.com/2010/01/snow-effects.html
    Update - 18 Maret 2012

    gubhugreyot

    BalasHapus

 
GR | Edited by | gubhug reyot