Cara Membuat Efek Hujan Di Blog

Membuat Efek Hujan

Berikut langkah bikin efek/animasi hujan pada blog :
1. Log in ke Blogger
2. Rancangan
3. Tambah Gadget
4. HTML/Javascript
5. Copy kode berikut ke dalam HTML/Javascript

<html>
<head>
<title>Myhafiezers</title>
<!--
HujanKarakter ver 0.1
Myhafiezers
-->
<style type="text/css">
*{
font-size:12px;
font-family: Tahoma, Verdana, Arial;
}

body{
background:#000;
overflow:hidden;
color:#0f4;
padding:8px;
}
#area{
border:0;
padding:0;
width:100%;
height:100%;
}
.char{
position:absolute;
top:-50px;
text-shadow:0 -100px 10px #0a0;
opacity:.5;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
minCharCode = 33;
maxCharCode = 126;
minSpeed = 900;
maxSpeed = 5000;
counter = 0;
maxChar = 400;

$(document).ready(function(){
for(i=0;i<99;i++){
buatKarakter();
}


});

function buatKarakter(){
var charID = String.fromCharCode(rand(minCharCode, maxCharCode));
var pos = rand(0,$(document).width());
var newChar = '<div class="char char' + counter + '" style="left:'+ pos + 'px;">' + charID + '</div>';
$('#area').append(newChar)
animKarakter(counter);
counter++;
}

function animKarakter(c){
var transparent = rand(10,99);
var fontsize = rand(9,12);
var speed = rand(minSpeed, maxSpeed);
var pos = rand(0,$(document).width());
$('.char'+c).animate({
top:$(document).height(),
}, speed, function(){
$('.char'+c).css('top', '-50px');
$('.char'+c).css('left', pos+'px');
$('.char'+c).css('opacity', '.'+transparent);
$('.char'+c).css('fontSize', fontsize);
animKarakter(c);
});
}

function rand(from, to){
return Math.floor(Math.random() * (to - from + 1) + from);
}
</script>
</head>

<body>
<div id="area">

</div>
</body>
</html>
6. Selesai dan simpan

MAAF ! AWAS ! LIHAT KOMENTAR !!!


Tolong Klik Iklan DIbawah Sebagai Tanda Terimakasih :)

Like THIS :
Share this article to: Facebook Twitter Google+ Linkedin Technorati Digg

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Myhafiezers

7 komentar untuk "Cara Membuat Efek Hujan Di Blog"

  1. APA DENGAN MEMASANG EFEK HUJAN DI BLOG ITU GAK MEMBUAT LOADING BLOG MENJADI BERAT SOBAT???

    BalasHapus
  2. nice share, happy blogging

    BalasHapus
  3. bg asis : lumayan gan

    om rudy : thnks gan

    BalasHapus
  4. oiii.... blog saya terhapus sendri akibat mengukuti perintah diatas tentang "Cara Membuat Efek Hujan Di Blog" jingggg.... jebakan menghapus blog........

    BalasHapus
  5. nice blog
    thanks for info
    visit my blog
    http://hanasakura551.blogspot.com/

    BalasHapus

- Tolong Berkomentar Sesuai Dengan Isi Postingan
- Tolong Jangan Memasukkan Link Ke Dalam Komentar
- Yang Berkomentar Pasti Akan Mendapatkan kunjungan Balik Dari Saya
- Jangan Lupa Follow Ya 'Ntar Di FollBack Kok
- Saya Minta Maaf Karena Tidak Bisa Membalas Komentar Anda , Karena Saya Sangat Sibuk