Cara Memasang Efek Hujan Di Blog

Sobat pada postingan kali ini Aura akan membahas tentang Tutorial blogger, yakni tentang cara memasang efek hujan di blog, nah sebenarnya apa sih kegunaan efek ini? ya memang bagi sebagian para blogger yang ingin blognya tampil lain dari yang lain atau menarik, harus mempunyai sesuatu yang berbeda pada blognya seperti template blog yang serba otomatis, tampilan yang unik, dan dilengkapi dengan animasi-animasi yang keren, sekarang farhan akan memberikan solusi bagi sobat yang bingung dalam memberi efek kepada blog, Aura akan membagikan tentang bagaimana memeberi kan efek hujan, di simak ya, ini dia langkah-langahnya.

1. Login ke Blogger.

2. Tata Letak / Elemen.

3. Pilih Add Gadget.

4. Pilih HTML/JavaScript.

5. Lalu sobat letakkan kode di bawah ini ke dalam box "konten".

<html>
<head>
<title>sebartopiklan</title>

<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. Tidak usah diberi Judul.

7. Klik "Save" dan Selesai.

Selamat mencoba sobat Aura bila ada pertanyaan comment di bawah.