Lompat ke konten Lompat ke sidebar Lompat ke footer

Cara Membuat Hujan Salju di Blog

Memang di negeri kita tidak ada musim salju, tetapi bukan berarti tidak bisa menikmati salju. Setiap akhir tahun atau awal tahun di daratan yang memiliki empat musim, biasanya turun salju. Bagaimana cara membuat hujan salju itu juga 'membasahi' blog kita? Caranya cukup mudah.

Dengan menyambut pengunjung blog kita dengan animasi hujan salju yang turun dari atas halaman blog, lalu turun dan hilang, akan membuat pengunjung blog kita sedikit terheran. Hujan salju di blog yang kita sajikan sesuai dengan musimnya akan membuat blog terasa 'dingin' dan pengunjung ingin berlama-lama menikmati salju buatan itu.

Cara Membuat Hujan Salju di Blog
1. Login ke blogger
2. Pilih Tata Letak kemudian Tambah Gadget
3. Pilih HTML/JavaScript
4. Masukan kode HTML berikut ini:

<script type="text/javascript">
  
  //Configure below to change URL path to the snow image
  var snowsrc="http://3.bp.blogspot.com/--hEgrJEXAzo/Tt-5f_2SzAI/AAAAAAAAFi8/Uf-VH61UbDY/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)? "http://3.bp.blogspot.com/--hEgrJEXAzo/Tt-5f_2SzAI/AAAAAAAAFi8/Uf-VH61UbDY/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"; 
    }
    snowtimer=setTimeout("snowIE_NS6()", 10);
  }
    function hidesnow(){
        if (window.snowtimer) clearTimeout(snowtimer)
        for (i=0; i<no; i++) document.getElementById("dot"+i).style.visibility="hidden"
    }
       
if (ie4up||ns6up){
    snowIE_NS6();
        if (hidesnowtime>0)
        setTimeout("hidesnow()", hidesnowtime*1000)
        }
</script>

5. Simpan jika sudah selesai dan Drag di posisi paling atas atau dekat header, jangan lupan Simpan Setelan jika sudah.

Bagaimana? sudah muncul hujan saljunya? Hujan salju akan turun dengan bentuk ikon salju yang menarik. Dengan tambahan widget hujan salju ini tidak akan terlalu menganggu pengunjung dalam membaca isi blog.

87 komentar untuk "Cara Membuat Hujan Salju di Blog"

  1. kenapa di aku jadi error ya n nggak bisa dilihat. kira-kira itu kenapa ya...?

    BalasHapus
  2. mantep nih tipsnya,, bwt di coba d blog ane..heee

    BalasHapus
  3. tapi yang dipasang ini bukan sperti salju ya??hhe

    BalasHapus
  4. cihuyyyy, ilmu baru,, terimakasih..

    BalasHapus
  5. udah ada yang berhasil nyoba blum Sob??? :D

    BalasHapus
  6. terima kasih sudah berbagi infonya gan,,saya akan coba

    BalasHapus
  7. terima kasih sudah berbagi infonya

    BalasHapus
  8. nice post gan,,terima kasih untuk infonya

    BalasHapus
  9. terima kasih sudah berbagi ilmunya gan

    BalasHapus
  10. terima kasih sudah berbagi ilmunya,,saya akan coba

    BalasHapus
  11. wah,,,dapat ilmu baru lagi nih,,terima kasih gan untuk infonya

    BalasHapus
  12. wah,,boleh juga untuk di coba,,,terima kasih gan

    BalasHapus
  13. wah,,boleh juga nih di coba untuk mempercantik my blog,,hhe

    BalasHapus
  14. mantep dahh, bagus ada saljunya serasa di negeri seberang :D hhehe.

    BalasHapus
  15. Bagus artikelnya mas. semoga bermanfaat.
    Buat sobat blogger lainnya yang ingin membuat kursor bertabur bintang klenyir. klik link nama komentar saya. terima kasih.

    BalasHapus
  16. thankssss.....sgt2 brmanfaat

    BalasHapus
  17. yang pasti bikin blog makin berat ya

    BalasHapus
  18. mantappppppp..thanks

    BalasHapus
  19. wow! very cool. so many thx gan.

    BalasHapus
  20. kayknya gak terlalu berat bwt blognya juga

    BalasHapus
  21. Ini sebuah postingan kreatif dn positif yang oke. Apalagi ada salju "wooooow" keren.
    dingin ahhhhh


    Oh ya, saya sekarang menulis diblog baru dan saya masih memulainya. Mungkin ada yang mau bantu tukar Link :). Salamm

    Mohon komentar ini jangan dihapus, ini akan membantu kualitas + BLOG ^ SEO pada artikel ini.

    salam

    BalasHapus
  22. post and your interesting article for beginner bloggers like me, keep your blog so I can visit again to see your blog posts and articles later .. thanks for the info

    BalasHapus
  23. Saya sudah coba, tapi kenapa gak berhasil???
    http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif

    BalasHapus
  24. Petunjuknya dibuat yang lebih jelas, dong ...

    BalasHapus
  25. bagus ni ada efek saljunya tapi apa tidak akan memberatkan loading blog ya soalnya ada gambar dan script yang mesti diproses kedalam blog kita ?
    terima kasih

    BalasHapus
  26. kalo pake yg ginian jadi bkin loading yaaa

    BalasHapus
  27. Terimakasih, saya sudah berhasil bikin hujan salju_nya

    BalasHapus
  28. thanks ilmunya gan,,, mantap sob..

    BalasHapus
  29. Like this :)
    udah q terapkan ke blog


    mampir ya
    http://ceritadantipskeren.blogspot.com/

    BalasHapus
  30. asyik nich di coba kalo berhasil, ....

    gan tambah infonya ya bwt keluarga

    BalasHapus
  31. bagus bro, cuma ane gak seneng karena berat loadingnya....

    BalasHapus
  32. Sukses gan , makasih yaa

    kunjungi juga http://fahreza58.blogspot.com/

    BalasHapus
  33. asyik ada ilmu baru nich,, mkasih yach

    BalasHapus
  34. keren dah artikelnya.. ijin praktek dulu mastah

    BalasHapus
  35. wiihh keren infonya.. amu coba ahh di blog newbe hehehe

    BalasHapus
  36. mksh atas info'x sob sangat membantu sekali bagi saya yang pemula..

    BalasHapus
  37. wissshh keren nichh...
    thank's gan infonya...

    BalasHapus
  38. izin kopas gan..

    tuker link http://trickcomputer95.blogspot.com/

    BalasHapus
  39. Punya ane gak bisa gannnnn :((

    BalasHapus
  40. Terima kasih gan udah share

    BalasHapus
  41. mantab gan.. senang bisa berkunjung kesini, semoga bermanfaat .salam kenal, kunjungan baliknya ditunggu

    www.produsensusukambingbubuk.com
    susu kambing etawa sari madu utama susu kambing global mandiri sejahtera susu kambing etawa

    BalasHapus
  42. mantab gan.. senang bisa berkunjung kesini, semoga bermanfaat .salam kenal, kunjungan baliknya ditunggu
    www.produsensusukambingbubuk.com
    www.produsensusukambing.com
    www.sarimaduutama.web.id
    www.globalmandirisejahtera.web.id

    Info: Kami Pusat pabrik susu kambing etawa bubuk organik berkualitas, ( Supplier terbesar dan terperaya di indonesia ) Peluang usaha bagi anda yang memiliki bakat didunia Bisnis marketing untuk menjadi mitra distributor susu kambing etawa di kota anda,

    BalasHapus
  43. Wah makasih banyak ya gan :D
    langsung tancap di blog dulu^^

    BalasHapus
  44. klo untuk di wordpress gimana gan...? yah biar nanti deh saya bikin blogspot...

    BalasHapus
  45. tanya: di atasnya ada tulisan title , itu du tulis apa ??
    trus script nya di tulis dimana ? Kontent kah ????

    mohon di bls

    BalasHapus
  46. saya sudah mencoba tapi gagal :-o

    BalasHapus
  47. wissss berhasil...makasih infonya

    BalasHapus
  48. mantab juragan, terimakasih banyak buat tutorialnya..

    BalasHapus
  49. enak nih tisp membuat baksosnya pasti gurih dah
    http://acemaxs31.com/obat-gagal-ginjal-herbal/
    http://apotekgumilar.com/
    http://acemaxs86.com/

    BalasHapus

Berlangganan via Email