Cara membuat efek hujan salju pada blog
ini masih dalam putaran postingan yang lalu
yang intinya adalah menghias blog sedemikian rupa supaya tampak lebih
menarik. Saya membuat postingan ini karena banyak sekali blogger yang
suka menghias blognya dengan aneka widget yang serba menarik dan sedap
untuk dipandang mata. Mungkin sudah banyak para blogger yang membahas
tentang masalah ini akan tetapi tidak ada salahnya juga saya membuat
postingan serupa akan tetapi beda dari segalanya karena script yang saya
tulis disini adalah masih script asli yang belum dimodifikasi kedalam
bentuk file java script sehingga kodenya akan sangat banyak akan tetapi
fungsinya sama saja dan tidak membuat loading blog menjadi berat.
Untuk Cara membuat efek hujan salju pada blog caranya adalah sebagai berikut:
** Cari kode </head> pada template anda dan jika sudah ketemu silahkan copy code dibawah ini dan paste di atas kode tersebut
<script type="text/javascript">
// <![CDATA[
var speed=33; // lower number for faster
var flakes=100; // number of flakes
var colour="#96c"; // colour of flakes
var slush=20; // set to '0' for no slush or otherwise set to height at which slush melts
/***************************
* Let It Snow Effect *
*(c)2004-12 mf2fm web-design*
* http://www.mf2fm.com/rv *
* DON'T EDIT BELOW THIS BOX *
***************************/
var flks=new Array();
var flkx=new Array();
var flky=new Array();
var fldy=new Array();
var slss=new Array();
var slsh=new Array();
var swide, shigh, boddie;
function addLoadEvent(funky) {
var oldonload=window.onload;
if (typeof(oldonload)!='function') window.onload=funky;
else window.onload=function() {
if (oldonload) oldonload();
funky();
}
}
addLoadEvent(baby_its_cold_outside);
function baby_its_cold_outside() { if (document.getElementById) {
var i;
boddie=document.createElement("div");
boddie.style.position="fixed";
boddie.style.top="0px";
boddie.style.left="0px";
boddie.style.overflow="visible";
boddie.style.width="1px";
boddie.style.height="1px";
boddie.style.backgroundColor="transparent";
document.body.appendChild(boddie);
set_width();
for (var i=0; i<flakes; i++) {
flks[i]=createDiv(3, 3, colour);
flkx[i]=3*Math.floor(Math.random()*swide/3);
flky[i]=Math.floor(Math.random()*shigh);
fldy[i]=2+Math.floor(Math.random()*4);
flks[i].style.left=flkx[i]+"px";
flks[i].style.top=flky[i]+"px";
boddie.appendChild(flks[i]);
}
setInterval("let_it_snow()", speed);
}}
function createDiv(height, width, colour) {
var div=document.createElement("div");
div.style.position="absolute";
div.style.height=height+"px";
div.style.width=width+"px";
div.style.overflow="hidden";
div.style.backgroundColor=colour;
return (div);
}
window.onresize=set_width;
function set_width() {
var sw_min=999999;
var sh_min=999999;
if (document.documentElement && document.documentElement.clientWidth) {
if (document.documentElement.clientWidth>0) sw_min=document.documentElement.clientWidth;
if (document.documentElement.clientHeight>0) sh_min=document.documentElement.clientHeight;
}
if (typeof(self.innerWidth)=='number' && self.innerWidth) {
if (self.innerWidth>0 && self.innerWidth<sw_min) sw_min=self.innerWidth;
if (self.innerHeight>0 && self.innerHeight<sh_min) sh_min=self.innerHeight;
}
if (document.body.clientWidth) {
if (document.body.clientWidth>0 && document.body.clientWidth<sw_min) sw_min=document.body.clientWidth;
if (document.body.clientHeight>0 && document.body.clientHeight<sh_min) sh_min=document.body.clientHeight;
}
if (sw_min==999999 || sh_min==999999) {
sw_min=800;
sh_min=600;
}
swide=sw_min-3;
shigh=sh_min;
if (slush) {
if (swide/3>slss.length) for (i=slss.length; i<swide/3; i++) {
if (!slsh[i]) slsh[i]=3;
slss[i]=createDiv(slsh[i], 3, colour);
boddie.appendChild(slss[i]);
}
for (i=0; i<swide/3; i++) {
slss[i].style.height=slsh[i]+"px";
slss[i].style.top=shigh-slsh[i]+"px";
slss[i].style.left=3*i+"px";
}
if (i<slss.length && slss[i].style.left!="-3px") for (; i<slss.length; i++) slss[i].style.left="-3px";
}
}
function let_it_snow(c) {
var i, x, o=0, z=0;
for (i=0; i<flakes; i++) {
flky[i]+=fldy[i];
x=Math.floor(flkx[i]/3);
if (slush) {
o+=slsh[x];
if (flky[i]>=shigh-slsh[x]) {
if (x<swide && slsh[x]>slsh[x+1]+3) x++;
else if (x>0 && slsh[x]>slsh[x-1]+3) x--;
slss[x].style.top=shigh-(slsh[x]+=3)+"px";
slss[x].style.height=slsh[x]+"px";
flky[i]=shigh;
}
}
if (flky[i]>=shigh || flkx[i]>swide) {
flky[i]=0;
fldy[i]=2+Math.floor(Math.random()*4);
flkx[i]=3*Math.floor(Math.random()*swide/3);
flks[i].style.left=flkx[i]+"px";
z++;
}
flks[i].style.top=flky[i]+"px";
}
if (o>flakes*slush) for (i=0; i<slsh.length; i++) if (slsh[i]>3) slsh[i]--;
if (z || o>flakes*slush) set_width();
}
// ]]>
</script>
Jika sudah selesai jangan lupa simpan template anda dan biasakan melakukan sebelum meng-edit kode pada template.
Untuk contoh penerapan kode ini bisa anda lihat disini
Selamat mencoba dan semoga blog anda akan tampak semakin cantik dengan kehadiran widget ini.
Sumber kode: http://www.mf2fm.com/rv/dhtmlsnow.php