Bola Rain Effects

Hujan uang ? Siapa nggak suka?! Ada pepatah mengatakan "Lebih baik hujan uang di negeri sendiri daripada hujan batu di negeri orang (kepala bejol-benjol, lho!). Ini pepatah baru yang tentu saja semua orang suka. Kamu pingin pembaca blog kamu tambah kerasan karena di blog terjadi hujan uang?! Lho ini benar-benar nyata, bung! Klo nggak percaya buka saja sendiri (KLIK DEMO!).

D E M O

Javascript :

<script type="text/javascript">
//<![CDATA[ /* mitrabarayaonline.blogspot.com */
var moneysrc="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHzMJE861pzI5eeEA61bePYCz1Rsk1Q9aQrTNKhqoAqCpQFVqSEWRNJ9E_RdnGCc2h08Omif03GCO1dg6LTmkf9mUAm0VnzDH7CETcI7cMbklS34VpXEDcD6W7KE0MOQLcTSw4d9Ci3eoZ/h120/mitrabaraya-bolasepak70x71.jpg"
var no = 6;
var hidemoneytime = 0;
var moneydistance = "pageheight";
var ie4up = (document.all) ? 1 : 0;
var ns6up = (document.getElementById&&!document.all) ? 1 : 0;
function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
var dx, xp, yp;    // coordinate and position variables
var am, stx, sty;  // amplitude and step variables
var i, doc_width = 800, doc_height = 600; 
if (ns6up) {
doc_width = self.innerWidth;
doc_height = self.innerHeight;
} else if (ie4up) {
doc_width = iecompattest().clientWidth;
doc_height = iecompattest().clientHeight;
}
dx = new Array();
xp = new Array();
yp = new Array();
am = new Array();
stx = new Array();
sty = new Array();
moneysrc=(moneysrc.indexOf("dynamicdrive.com")!=-1)? "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHzMJE861pzI5eeEA61bePYCz1Rsk1Q9aQrTNKhqoAqCpQFVqSEWRNJ9E_RdnGCc2h08Omif03GCO1dg6LTmkf9mUAm0VnzDH7CETcI7cMbklS34VpXEDcD6W7KE0MOQLcTSw4d9Ci3eoZ/h120/mitrabaraya-bolasepak70x71.jpg" : moneysrc
for (i = 0; i < no; ++ i) { 
dx[i] = 0;                        // set coordinate variables
xp[i] = Math.random()*(doc_width-50);  // set position variables
yp[i] = Math.random()*doc_height;
am[i] = Math.random()*20;         // set amplitude variables
stx[i] = 0.02 + Math.random()/10; // set step variables
sty[i] = 0.7 + Math.random();     // set step variables
if (ie4up||ns6up) {
if (i == 0) {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><a href=\"http://dynamicdrive.com\"><img src='"+moneysrc+"' border=\"0\" style=\"border:0 solid;background:transparent;padding:0;box-shadow:0 0 0 #fff;\"><\/a><\/div>");
} else {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><img src='"+moneysrc+"' border=\"0\" style=\"border:0 solid;background:transparent;padding:0;box-shadow:0 0 0 #fff;\"><\/div>");
}
}
}
function moneyIE_NS6() {  // IE and NS6 main animation function
doc_width = ns6up?window.innerWidth-10 : iecompattest().clientWidth-10;
doc_height=(window.innerHeight && moneydistance=="windowheight")? window.innerHeight : (ie4up && moneydistance=="windowheight")?  iecompattest().clientHeight : (ie4up && !window.opera && moneydistance=="pageheight")? iecompattest().scrollHeight : iecompattest().offsetHeight;
for (i = 0; i < no; ++ i) {  // iterate for every dot
yp[i] += sty[i];
if (yp[i] > doc_height-50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = 0;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
}
dx[i] += stx[i];
document.getElementById("dot"+i).style.top=yp[i]+"px";
document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i])+"px"; 
}
moneytimer=setTimeout("moneyIE_NS6()", 10);
}
function hidemoney(){
if (window.moneytimer) clearTimeout(moneytimer)
for (i=0; i<no; i++) document.getElementById("dot"+i).style.visibility="hidden"
}
if (ie4up||ns6up){
moneyIE_NS6();
if (hidemoneytime>0)
setTimeout("hidemoney()", hidemoneytime*3000)
}
//]]>
</script>

Cara membuat Money Rain Effects :

1. Login ke Blogger.
   
   • Tuliskan "User Name" (gmail) atau tuliskan "Email Address" (non gmail).
   • Tuliskan Password.
   • Klik "Sign in"
2. Beberapa saat setelah klik sign in anda akan menjumpai halaman "Dasbor (Dasboard)".
   Klik "Rancangan (Design)".
3. Kembali halaman baru akan terbuka, klik "Edit HTML".
4. Sebuah halaman baru kembali kita jumpai. Halaman ini berisi 3 (tiga) bagian:
   
   • Backup/Restore Template » berisi fitur untuk melakukan backup template.
     Lakukan Backup template setiap kali akan melakukan penambahan atau pengurangan kode (xHTML, kode CSS dan javascript) melalui "Box Edit Template".
   • Edit Template » berisi sebuah box besar yang di dalamnya berisikan kode html penyusun blog.
   • Old Templates » berisi template lama blogger (Template Tata Letak & Template Klasik.
5. Cari kode </body> pada "Box Edit Template".
6. Copy javascript dan letakkan di atas </body>
7. Klik "Simpan Template (Save Template)".
8. Buka blog untuk melihat hasilnya.

Catatan/Keterangan :

1. Panduan cara backup template, mencari kode dan berbagai cara menyimpan kode css, javascript dan xHTML dapat dibuka di Special Tutorials yang terletak di menu sebelah kiri halaman.
2. Image yang digunakan sebagai Efek hujan dapat kamu ganti dengan gambar-gambar lainnya dengan merubah :
   http://5.bp.blogspot.com/-SYEE2s339xs/VAIM-cL0lzI/AAAAAAAAAOM/z4hpxONnFYI/s200/mitrabaraya-bolasepak70x71.jpg

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini:

Update » Senen WAGE, Maret, 26, 2012

» Happy Blogging - mitrabaraya «