Cara Membuat Efek Salju,Daun,Bintang Berjatuhan Di Blogger.
Sobat blogger, membuat efek salju bintang ataupun daun berjatuhan di blog anda, ini adalah salah satu trik untuk menghias atau mempercantik blog anda, hingga seolah olah di blog anda seperti suasana musim salju ataupun musim semi, hehe.. jadi menurut saya ketika anda ingin sekali bagaimana rasanya musim salju,ataupun semi seperti di jepang, disini anda tidak perlu lagi ke daerah yang bisa ada turun salju ataupun musim semi dengan berguguran daun seperti harus ke jepang ataupun ke kutub utara, jadi disini,anda cukup tongkrongin saja blog anda.hehe
Sobat blogger,jika anda ingin blog anda banyak di kunjungi pengunjung, tentu saja dengan membuat pengunjung senang dengan memanjakannya,terutama dalam hal tampilan blog anda juga harus enak di lihat,maka dari itu saya akan membuatkan anda tutorial bagaimana tentang cara membuat efek salju ,daun,bintang bisa berjatuhan di blog anda,intinya supaya blog anda lebih bagus dan buat pengunjung blog anda terkagum-kagum.
Jika sudah di letakan,klik save template anda dan lihat hasilnya.
Sobat blogger,jika anda ingin blog anda banyak di kunjungi pengunjung, tentu saja dengan membuat pengunjung senang dengan memanjakannya,terutama dalam hal tampilan blog anda juga harus enak di lihat,maka dari itu saya akan membuatkan anda tutorial bagaimana tentang cara membuat efek salju ,daun,bintang bisa berjatuhan di blog anda,intinya supaya blog anda lebih bagus dan buat pengunjung blog anda terkagum-kagum.
Cara Membuat Efek Salju,Daun,Bintang Berjatuhan Di Blogger
- Buka akun blogger anda.
- Silahkan pilih menu template dan klik edit Html
- Sekarang silahkan anda cari kode </head>
- Lalu letakan salah satu kode di bawah ini tepat di bawah kode </head>
Kode Untuk Bunga Berjatuhan, Copy kode dan letakan di atas kode </head>
<script type="text/javascript" src="http://infonetmu.googlecode.com/files/SakuraRain.js"></script>
Kode Untuk efek salju berjatuhan, Copy kode dan letakan di atas kode </head>
<script src="//helperblogger.ucoz.com/code/snow-effect3.js"></script>
Kode Untuk efek daun berjatuhan, Copy kode dan letakan di atas kode </head>
<script src='http://misbahudin.googlecode.com/files/daun%20gugur.js'/>
Kode Untuk efek bintang berjatuhan, Copy kode dan letakan di atas kode </head>
<script src="http://sites.google.com/site/amatullah83/js-indahnyaberbagi/bintang.hijau.js" type="text/javascript"></script>
Jika sudah di letakan,klik save template anda dan lihat hasilnya.
Lihat update terbaru di bawah ini..
Cukup pilih salah satu aja ya, jangan di buat double,namun misalkan anda ingin merubah efek salju misalkan di ganti dengan efek bintang berjatuhan, maka anda harus menghapus kode sebleumnya yang di terapkan dan ganti dengan yang di inginkan, oke sobat saya rasa cukup selesai di tutorial Cara Membuat Efek Salju,Daun,Bintang Berjatuhan Di Blog,untuk kurang dan lebihnya saya mohon maaf. salam sukses.
UPDATE 2017-2018
Karena sebagian kode ada yang tidak berfungsi, karena situs penyingkat url nya memang sudah tidak bekerja, jadi silahkan sobat untuk mencoba efek atau effect yang saya beri di bawah ini dan saya akan mengurai kode js tersebut sehingga mungkin agak panjang kodenya sobat..
UPDATE 2017-2018
Karena sebagian kode ada yang tidak berfungsi, karena situs penyingkat url nya memang sudah tidak bekerja, jadi silahkan sobat untuk mencoba efek atau effect yang saya beri di bawah ini dan saya akan mengurai kode js tersebut sehingga mungkin agak panjang kodenya sobat..
Kode Untuk Efek Salju Berjatuhan
Simpan kode diatas kode </head>
<script src="//helperblogger.ucoz.com/code/snow-effect2.js"></script>
Kode Untuk Efek Bintang Bertaburan
<script type='text/javascript'>
//<![CDATA[
var no_image = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQ2oa9tH9BnNT6QaLoE8VnJHeCyIt5JIqXMIsddjSyafkD0LfsvLePdzhHaMyDMM6qmYZGaaamwvchNoFiA3kkL0FLX0JlTaphO50mEvuGsX7ZOWchuQk3Ckwk2PmuOliZg7OasgA_9fI/s1600-r/nth.png";
var month_format = [, "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sept", "Oct", "Nov", "Dec"];
var more_text = "View More";
var comments_text = "<span>Post </span>Comment";
var POSTPAGER_OLDER = "Older Article"; // post nav text "previous post"
var POSTPAGER_NEWER = "Newer Article"; // post nav text "next post"
//]]>
</script>
<script type="text/javascript">
// <![CDATA[
var speed=40; // lower number for faster
var warp=3; // from 1 to 10
var stars=150; // number of stars
var colours=new Array("#60f", "#0f6", "#39f"); // colours of stars
var position=0; // set to '0' for foreground and '-1' for stars to appear in the background, behind text on the page
/****************************
* Star Warp Effect *
* *
****************************/
var strs=new Array();
var strx=new Array();
var stry=new Array();
var stdx=new Array();
var stdy=new Array();
var strz=new Array();
var swide=800;
var shigh=600;
warp=1+warp/125;
if (typeof('addRVLoadEvent')!='function') function addRVLoadEvent(funky) {
var oldonload=window.onload;
if (typeof(oldonload)!='function') window.onload=funky;
else window.onload=function() {
if (oldonload) oldonload();
funky();
}
}
addRVLoadEvent(initiate_hyperjump);
function initiate_hyperjump() { if (document.getElementById) {
var i, temp;
boddie=document.createElement("div");
boddie.style.position="fixed";
boddie.style.top="0px";
boddie.style.left="0px";
boddie.style.width="1px";
boddie.style.height="1px";
boddie.style.overflow="visible";
boddie.style.backgroundColor="transparent";
boddie.style.zIndex=position;
i=document.body.style.backgroundColor;
if (document.body.parentNode) {
if (i) document.body.parentNode.style.backgroundColor=i;
document.body.style.backgroundColor="transparent";
}
document.body.insertBefore(boddie, document.body.firstChild);
set_width();
for (i=0; i<stars; i++) {
strs[i]=document.createElement("div");
strs[i].style.color=colours[i%colours.length];
strs[i].style.backgroundColor="transparent";
strs[i].style.position="absolute";
strs[i].appendChild(document.createTextNode("*"));
strs[i].style.font="13px monospace";
stdy[i]=Math.random()*6-3;
stdx[i]=Math.random()*8-4;
temp=Math.random()*100;
strx[i]=swide/2+temp*stdx[i];
stry[i]=shigh/2+temp*stdy[i];
if (Math.abs(stdx[i])+Math.abs(stdy[i])>5) strz[i]=13;
else if (Math.abs(stdx[i])+Math.abs(stdy[i])>3) strz[i]=7;
else strz[i]=2;
strs[i].style.fontSize=strz[i]+"px";
boddie.appendChild(strs[i]);
}
setInterval("warp_drive()", speed);
}}
function warp_drive() {
var i;
for (i=0; i<stars; i++) {
stry[i]+=stdy[i];
strx[i]+=stdx[i];
stdx[i]*=warp;
stdy[i]*=warp;
if (stry[i]>0 && stry[i]<shigh && strx[i]>0 && strx[i]<swide) {
if (Math.abs(stdx[i])+Math.abs(stdy[i])>strz[i]) strs[i].style.fontSize=++strz[i]+"px";
strs[i].style.left=strx[i]+"px";
strs[i].style.top=stry[i]+"px"
}
else {
strx[i]=swide/2;
stry[i]=shigh/2;
strx[i]+=3*(stdx[i]=Math.random()*8-4);
stry[i]+=3*(stdy[i]=Math.random()*6-3);
if (Math.abs(stdx[i])+Math.abs(stdy[i])>5) strz[i]=13;
else if (Math.abs(stdx[i])+Math.abs(stdy[i])>3) strz[i]=7;
else strz[i]=2;
strs[i].style.fontSize=strz[i]+"px";
}
}
}
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)!="undefined" && 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;
shigh=sh_min;
}
// ]]>
</script>
Kode untuk Efek pada mouse bintang berjatuhan
<script async='async' type='text/javascript'> //<![CDATA[ (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.5"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); //]]> </script> <script type='text/javascript'> // <![CDATA[ var colour="black"; var sparkles=100; var x=ox=400; var y=oy=300; var swide=800; var shigh=600; var sleft=sdown=0; var tiny=new Array(); var star=new Array(); var starv=new Array(); var starx=new Array(); var stary=new Array(); var tinyx=new Array(); var tinyy=new Array(); var tinyv=new Array(); window.onload=function() { if (document.getElementById) { var i, rats, rlef, rdow; for (var i=0; i<sparkles; i++) { var rats=createDiv(3, 3); rats.style.visibility="hidden"; document.body.appendChild(tiny[i]=rats); starv[i]=0; tinyv[i]=0; var rats=createDiv(5, 5); rats.style.backgroundColor="transparent"; rats.style.visibility="hidden"; var rlef=createDiv(1, 5); var rdow=createDiv(5, 1); rats.appendChild(rlef); rats.appendChild(rdow); rlef.style.top="3px"; rlef.style.left="0px"; rdow.style.top="0px"; rdow.style.left="3px"; document.body.appendChild(star[i]=rats); } set_width(); sparkle(); }} function sparkle() { var c; if (x!=ox || y!=oy) { ox=x; oy=y; for (c=0; c<sparkles; c++) if (!starv[c]) { star[c].style.left=(starx[c]=x)+"px"; star[c].style.top=(stary[c]=y)+"px"; star[c].style.clip="rect(0px, 5px, 5px, 0px)"; star[c].style.visibility="visible"; starv[c]=50; break; } } for (c=0; c<sparkles; c++) { if (starv[c]) update_star(c); if (tinyv[c]) update_tiny(c); } setTimeout("sparkle()", 40); } function update_star(i) { if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)"; if (starv[i]) { stary[i]+=1+Math.random()*3; if (stary[i]<shigh+sdown) { star[i].style.top=stary[i]+"px"; starx[i]+=(i%5-2)/5; star[i].style.left=starx[i]+"px"; } else { star[i].style.visibility="hidden"; starv[i]=0; return; } } else { tinyv[i]=50; tiny[i].style.top=(tinyy[i]=stary[i])+"px"; tiny[i].style.left=(tinyx[i]=starx[i])+"px"; tiny[i].style.width="2px"; tiny[i].style.height="2px"; star[i].style.visibility="hidden"; tiny[i].style.visibility="visible" } } function update_tiny(i) { if (--tinyv[i]==25) { tiny[i].style.width="1px"; tiny[i].style.height="1px"; } if (tinyv[i]) { tinyy[i]+=1+Math.random()*3; if (tinyy[i]<shigh+sdown) { tiny[i].style.top=tinyy[i]+"px"; tinyx[i]+=(i%5-2)/5; tiny[i].style.left=tinyx[i]+"px"; } else { tiny[i].style.visibility="hidden"; tinyv[i]=0; return; } } else tiny[i].style.visibility="hidden"; } document.onmousemove=mouse; function mouse(e) { set_scroll(); y=(e)?e.pageY:event.y+sdown; x=(e)?e.pageX:event.x+sleft; } function set_scroll() { if (typeof(self.pageYOffset)=="number") { sdown=self.pageYOffset; sleft=self.pageXOffset; } else if (document.body.scrollTop || document.body.scrollLeft) { sdown=document.body.scrollTop; sleft=document.body.scrollLeft; } else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) { sleft=document.documentElement.scrollLeft; sdown=document.documentElement.scrollTop; } else { sdown=0; sleft=0; } } window.onresize=set_width; function set_width() { if (typeof(self.innerWidth)=="number") { swide=self.innerWidth; shigh=self.innerHeight; } else if (document.documentElement && document.documentElement.clientWidth) { swide=document.documentElement.clientWidth; shigh=document.documentElement.clientHeight; } else if (document.body.clientWidth) { swide=document.body.clientWidth; shigh=document.body.clientHeight; } } function createDiv(height, width) { 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); } // ]]> </script>
0 komentar:
Posting Komentar