Cara Membuat Efek Hujan Di Blog

Posted by : Ariq Rastaman Sabtu, 19 Oktober 2013

Hai sobat bertemu lagi dengan saya ! Pada kesempatan kali ini saya akan memposting cara menambahkan efek hujan pada blog, Caranya gampang kok tinggal ikuti cara di bawah ini selesai deh. Tanpa berlama lama lagi langsung saja kita menuju ke TKP.

Langkah - langkahnya dibawah ini :

1. Masuk Ke Daboard Blogger > Tata Letak > Add Gadget
2. Masukan Script Berikut

<html>
<head>
Bang Zendy

<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>

<div id="area">
</div>

3. Simpan Template

Semoga bermanfaat dan selamat mencoba.
sekian dulu postingan saya kali ini tentang cara membuat efek hujan pada blog.
terima kasih..

2 Comments

Tweets

Komentar

{ 2 komentar ... read them below or Comment }

Ariq Rastaman19 Oktober 2013 pukul 22.13
:)
BalasHapus
Balasan

Tambahkan komentar

PERATURAN BERKOMENTAR DI BLOG OARU:

1. Gunakanlah bahasa yang sopan saat berkomentar.
2. Dilarang Memasang link hidup pada saat berkomentar.
3. Dilarang SPAM !!!
4. Untuk menyisipkan catatan, gunakan [catatan].. CATATAN KAMU ...[/catatan]
5. Untuk menyisipkan gambar, gunakan [img]URL GAMBAR KAMU[/img]