Menambah Efek Salju Di Blog

Efek Salju Di Blog – Penggunaan pernak-pernik blog memiliki fungsi yang beraneka ragam seperti hiasan, keamanan, komunikasi, hingga permainan. Kebanyakan dari berbagai fungsi yang disediakan tersebut sebuah pernak-pernik blog memang diciptakan untuk fungsi pelengkap hiasan blog milik kita agar tampil lebih cantik dan nyaman dipandang mata. Salah satu fungsi dalam hal hiasan ini dapat kita lihat pada penggunaan efek salju yang dipasang dalam blog kita.


Penggunaan efek salju ini cukup menarik bagi kebanyakan blogger wanita maupun blogger tipe personal. Efek salju yang ditampilkan juga menyerupai suasana turunnya salju di musim dingin. Sehingga, setiap ada pemasangan efek salju di sebuah blog maka akan dapat meningkatkan kesan nuansa musim dingin yang begitu kental terasa.

Pemasangan efek salju di blog kita juga sangat mudah. Kita hanya perlu memasukan kode javascript yang diberikan dan efek salju pun akan bertebaran di setiap halaman postingan blog kita. Adapun cara untuk memasang efek salju di blog milik kita ini antara lain sebagai berikut:

Masuk ke dalam akun blogger kita masing-masing.

Klik rancangan.

Klik tambah gadget/add gadget.

Pilih HTML/JavaScript.

Masukan kode berikut.

<script src='http://panduanbelajarblog.googlecode.com/files/efek-salju.js' type='text/javascript'></script>

Klik simpan dan selesai.

Penggunaan efek salju ini tidak akan terlalu memberatkan proses loading blog kita. Hal ini dikarenakan file java script sudah diupload pada Google Code yang merupakan salah satu layanan yang disediakan oleh Google sebagai tempat hosting secara gratis. Sehingga, request file yang dimaksudkan untuk tampil di blog kita akan berjalan relatif cepat jika dibandingkan upload file di hosting gratisan lainnya. Selain itu, efek salju yang muncul juga tetap tidak akan mengganggu kenyamanan para pengunjung dalam membaca setiap postingan dalam blog.

48 komentar:

  1. udah coba tp kok belum ada perubahan ya? hehehe

    BalasHapus
  2. kalo udah ada efek salju gini,,, maunya gerak-gerakin mouse terusss,,, hehe

    BalasHapus
  3. Keren banget nih, apalagi dengan javascript yang sudah di upload di google code. Blog keren tatapi tetap ringan loadingnya. maaf banget nih sob, lama gak berkunjung. Btw, nin templet sama dengan yang saya pake di blog http://fatihbelajarbisnis.blogspot.com ya?

    BalasHapus
  4. Mantap gan... Punya ane udah ada...

    BalasHapus
  5. pengen juga pake gunain, tp sampe sekarang belum smpt obrak-abrik template lagi..hiks:(

    BalasHapus
  6. @NuyLicious:

    pastikan jika semua langkahnya sudah diikuti dengan benar. jika masih belum ada perubahan, coba ditunggu beberapa saat. :)

    BalasHapus
  7. @hamparan:

    fungsinya sebagai penghias juga bro. :)

    BalasHapus
  8. @ilmu komputer:

    sama, hanya saja ada perbedaan dalam modifikasi.

    BalasHapus
  9. @Fajar:

    trims sudah berkunjung bro.

    BalasHapus
  10. buat jaga2 , ini script aslinya :

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

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

    (function(){

    //Configure here.

    var num = 30; //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 - 2;
    w = rw - 2;
    }
    else{
    h = r.clientHeight - 2;
    w = r.clientWidth - 2;
    }
    }


    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.

    BalasHapus
  11. @Ririe Khayan:

    tidak perlu editing HTML template karena kita hanya perlu memasukan JavaScriptnya ke dalam menu tambah gadget. :)

    BalasHapus
  12. mantab, moga bermanfaat bagi temen-temen putri kita
    kalo yang efect angin ada ga ya ? hi hi hi (ngarep.com)

    BalasHapus
  13. @Obrolan Blogger.com:

    untuk sementara belum saya temukan bro. :D

    BalasHapus
  14. @candikota:

    saya sengaja tidak memasangnya bro. :)

    BalasHapus
  15. Luar biasa nih efeknya..Selamat Tahun Baru Bro..

    BalasHapus
  16. penambahan efek salju ini gak menambah berat loading ta, gan?

    BalasHapus
  17. @Dangstars:

    selamat tahun baru 2012 bro. :)

    BalasHapus
  18. @syaiful:

    tidak secara signifikan bro.

    BalasHapus
  19. makasih infonya, cara cari sript aslinya dimana bro
    http://caramembuatyangakumau.blogspot.com

    BalasHapus
  20. 1.salin kode berikut di address bar pada browser.
    http://panduanbelajarblog.googlecode.com/files/efek-salju.js
    2.unduh dan simpan filenya.
    3.buka dengan notepad.
    4.kode yang asli sudah kita dapatkan.

    BalasHapus
  21. wahh snow effect ya sob,, keren ya kyk ujan salju jadinya :D

    BalasHapus
  22. mau coba ah. dulu pernah nyoba tp gagal gak ada salju yg tampil. mudah-mudahan sekarang bisa.

    BalasHapus
  23. wah keren nih tipsnya..
    thanks for share ya :)..

    BalasHapus
  24. kalau berat kan bisa dicompress javascriptnya :D
    cari aja di google, how to minify javascript ?

    BalasHapus
  25. wah perlu di coba ni bos

    BalasHapus
  26. Karena masih musim dingin and hujan jadi ga kepikiran pasang salju takut blognya beku..

    BalasHapus
  27. @Rama88:

    iya bro, tampilan bintik salju yang jatuh membuat blog serasa di musim dingin. :)

    BalasHapus
  28. @Sabun Putih Sereh:

    silakan dicoba.
    semoga berhasil ya. :)

    BalasHapus
  29. @socafahreza's blog:

    trims sudah berkunjung bro. :)

    BalasHapus
  30. @secangkir teh dan sekerat roti:

    javascript untuk meringkas tampilan kode yang banyak. kalau sudah diterapkan tidak akan terlalu membebani loading blog kita. :)

    BalasHapus
  31. @Kevin:

    trims untuk masukannya bro. :D

    BalasHapus
  32. salju emang kayanya kurang pantas klo buat lelaki ya... tapi tutorial ini bisa menambah ilmu :)

    BalasHapus
  33. kebanyakan begitu, tapi penggunaannya bisa disesuaikan dengan keperluan kita. :)

    BalasHapus
  34. ada keterangan yang bisa jadi petunjuk?

    BalasHapus
  35. thanks master,,, nice info..

    BalasHapus
  36. kok saya belum bisa ya?? :( kira-kira masalahnya apa ya min?padahal sesuai caranya admin lho..

    BalasHapus
  37. kok tampilan saljunya cuman hanya seperti garis lurus berkedip" warna putih sih ,,, gak bertaburan? gimana?

    BalasHapus
  38. punyaku belom jadi geneng ya???? pdahal udah add html.. adakah solusi???

    BalasHapus
  39. cara penempatan link atau html?

    BalasHapus
  40. ko punyaku gk ada perubahan ya?

    BalasHapus
  41. Informasi yang sangat bagus dan berguna. Ditunggu untuk informasi berikutnya. Thanks gan

    Silahkan berkunjung di intanqq

    BalasHapus