Cara Membuat Efek Hujan Deras Di Blog | Pada postingan sebelumnya saya pernah bahas tentang beberapa macam efek di blog diantaranya Membuat Animasi Naruto vs Sasuke di Blog dan juga Cara Membuat Efek Meteor Jatuh Ke Bumi Blog. Nah untuk postingan yang sekarang ini saya akan share cara membuat efek hujan di blog. Ok langsung aja kita mulai bagaimana cara membuat dan memasang animasi / efek hujan di blog.
Berikut langkah bikin efek/animasi hujan deras 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>Blog Rudy Hartono</title>
<!--
HujanKarakter ver 0.1
Rudy Hartono
-->
<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>
<head>
<title>Blog Rudy Hartono</title>
<!--
HujanKarakter ver 0.1
Rudy Hartono
-->
<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>
Sekian dulu uraian yang begitu singkat tentang cara membuat / memasang efek hujan deras pada blog, semoga bermanfaat dan happy blogging.
10 comments:
makasih ya atas sharing ilmunya
Tolong kunjungi dong blog saya
http://pensilajaib-kita.blogspot.com/
dan berikan tanggapannya ya gimana disainnya
Terimakasih :-)
maksih infonya...
http://prediksitogelsgphk-jitu.blogspot.com/
makasih ya atas sharing ilmunya gan..
benar2 sangat bermanfaat sekali gan.
Perkenalkan, saya dari tim kumpulbagi. Saya ingin tau, apakah kiranya anda berencana untuk mengoleksi files menggunakan hosting yang baru?
Jika ya, silahkan kunjungi website ini www.kumpulbagi.com untuk info selengkapnya.
Di sana anda bisa dengan bebas share dan mendowload foto-foto keluarga dan trip, music, video, filem dll dalam jumlah dan waktu yang tidak terbatas, setelah registrasi terlebih dahulu. Gratis :)
hai saya dari Malaysia amat menyukai infonya! terima kasih!
gan, boleh minta template blog nya
Coba keberuntungan bermain poker & domino 99 online
Minimal deposit 20rb, dapat bonus cashback mingguan 0.3% - 0.5%, referral 15%, Jackpot total ratusan juta rupiah setiap harinya bila beruntung!!! mari gabung poker & domino di agen poker online indonesia
Pin BBM : 28CAFAB2, Email : mgmpoker88@yahoo.com. Terimakasih
thanks tutorialnya gan
Bermanfaat nih
Posting Komentar
Silah Masukkan Comentarnya semaunya dan masih dalam lingkarang sopan