Memberi Efek Hujan di Blog

Home » Tips dan Tricks » Memberi Efek Hujan di Blog

Admin - 20.36 2 komentar

Salam sobat semua ... !

Di siang yang cerah ini saya akan memberikan sebuah Tips dan Trik, bagaimana cara membuat efek hujan pada blog, sobat ingin tau caranya gimana ??, ikuti saja langkah-langkah di bawah ini :

Memberi efek hujan di blog :

Login ke blogger
Klik Rancangan
Klik Tambah Gadget
Pilih HTML/JavaScript
Lalu masukkan kode dibawah ini :
<html><br /> <head><br /> <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><br /> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><br /> <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><br /> </head><br /> <br /> <body><br /> <div id="area"><br /> </div></body><br /> </html>
Simpan, lalu lihat hasilnya

Semoga Bermanfaat Bagi Sobat Semua ^_^

Share this article :

Memberi Efek Hujan di Blog

2 komentar:

Naik Daun

Facebook

Kategori

Langganan Software

Join Us

My Partner