Membuat efek salju di kursor mouse pada blogspot

Kali ini tio-tutorblog akan berbagi bagaimana mempercantik tampilan blogspot kamu yaitu membuat efek salju di kursor mouse pada blogspot pada postingan sebelumnya tio-tutorblog membahas tentang Tutorial HTML untuk melengkapi blogspot kamu kali ini tentang Tutorial blogspot, yuupppsss langsung saja bagaimana caranya :

Pertama seperti biasa masuk ke blogspot kamu > Pilih rancangan > Elemen laman > Tambah gadget > Pilih HTML/JavaScript

Kedua Paste kode dibawah ini :

Code

<script type='text/javascript'><br /> // <![CDATA[<br /> var colour="black";<br /> var sparkles=100;<br /> <br /> var x=ox=400;<br /> var y=oy=300;<br /> var swide=800;<br /> var shigh=600;<br /> var sleft=sdown=0;<br /> var tiny=new Array();<br /> var star=new Array();<br /> var starv=new Array();<br /> var starx=new Array();<br /> var stary=new Array();<br /> var tinyx=new Array();<br /> var tinyy=new Array();<br /> var tinyv=new Array();<br /> window.onload=function() { if (document.getElementById) {<br /> var i, rats, rlef, rdow;<br /> for (var i=0; i<sparkles; i++) {<br /> var rats=createDiv(3, 3);<br /> rats.style.visibility="hidden";<br /> document.body.appendChild(tiny[i]=rats);<br /> starv[i]=0;<br /> tinyv[i]=0;<br /> var rats=createDiv(5, 5);<br /> rats.style.backgroundColor="transparent";<br /> rats.style.visibility="hidden";<br /> var rlef=createDiv(1, 5);<br /> var rdow=createDiv(5, 1);<br /> rats.appendChild(rlef);<br /> rats.appendChild(rdow);<br /> rlef.style.top="3px";<br /> rlef.style.left="0px";<br /> rdow.style.top="0px";<br /> rdow.style.left="3px";<br /> document.body.appendChild(star[i]=rats);<br /> }<br /> set_width();<br /> sparkle();<br /> }}<br /> function sparkle() {<br /> var c;<br /> if (x!=ox || y!=oy) {<br /> ox=x;<br /> oy=y;<br /> for (c=0; c<sparkles; c++) if (!starv[c]) {<br /> star[c].style.left=(starx[c]=x)+"px";<br /> <br /> star[c].style.top=(stary[c]=y)+"px";<br /> star[c].style.clip="rect(0px, 5px, 5px, 0px)";<br /> star[c].style.visibility="visible";<br /> starv[c]=50;<br /> break;<br /> }<br /> }<br /> for (c=0; c<sparkles; c++) {<br /> if (starv[c]) update_star(c);<br /> if (tinyv[c]) update_tiny(c);<br /> }<br /> setTimeout("sparkle()", 40);<br /> }<br /> function update_star(i) {<br /> if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";<br /> if (starv[i]) {<br /> stary[i]+=1+Math.random()*3;<br /> if (stary[i]<shigh+sdown) {<br /> star[i].style.top=stary[i]+"px";<br /> starx[i]+=(i%5-2)/5;<br /> star[i].style.left=starx[i]+"px";<br /> }<br /> else {<br /> star[i].style.visibility="hidden";<br /> starv[i]=0;<br /> return;<br /> }<br /> <br /> }<br /> else {<br /> tinyv[i]=50;<br /> tiny[i].style.top=(tinyy[i]=stary[i])+"px";<br /> tiny[i].style.left=(tinyx[i]=starx[i])+"px";<br /> tiny[i].style.width="2px";<br /> tiny[i].style.height="2px";<br /> star[i].style.visibility="hidden";<br /> tiny[i].style.visibility="visible"<br /> }<br /> }<br /> function update_tiny(i) {<br /> if (--tinyv[i]==25) {<br /> tiny[i].style.width="1px";<br /> tiny[i].style.height="1px";<br /> }<br /> if (tinyv[i]) {<br /> tinyy[i]+=1+Math.random()*3;<br /> if (tinyy[i]<shigh+sdown) {<br /> tiny[i].style.top=tinyy[i]+"px";<br /> tinyx[i]+=(i%5-2)/5;<br /> tiny[i].style.left=tinyx[i]+"px";<br /> }<br /> else {<br /> <br /> <br /> tiny[i].style.visibility="hidden";<br /> tinyv[i]=0;<br /> return;<br /> }<br /> }<br /> else tiny[i].style.visibility="hidden";<br /> }<br /> document.onmousemove=mouse;<br /> function mouse(e) {<br /> set_scroll();<br /> y=(e)?e.pageY:event.y+sdown;<br /> x=(e)?e.pageX:event.x+sleft;<br /> }<br /> function set_scroll() {<br /> if (typeof(self.pageYOffset)=="number") {<br /> sdown=self.pageYOffset;<br /> sleft=self.pageXOffset;<br /> }<br /> else if (document.body.scrollTop || document.body.scrollLeft) {<br /> sdown=document.body.scrollTop;<br /> sleft=document.body.scrollLeft;<br /> }<br /> else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {<br /> sleft=document.documentElement.scrollLeft;<br /> sdown=document.documentElement.scrollTop;<br /> }<br /> else {<br /> sdown=0;<br /> sleft=0;<br /> }<br /> }<br /> window.onresize=set_width;<br /> function set_width() {<br /> if (typeof(self.innerWidth)=="number") {<br /> swide=self.innerWidth;<br /> shigh=self.innerHeight;<br /> }<br /> else if (document.documentElement && document.documentElement.clientWidth) {<br /> swide=document.documentElement.clientWidth;<br /> shigh=document.documentElement.clientHeight;<br /> }<br /> else if (document.body.clientWidth) {<br /> swide=document.body.clientWidth;<br /> shigh=document.body.clientHeight;<br /> }<br /> }<br /> function createDiv(height, width) {<br /> var div=document.createElement("div");<br /> div.style.position="absolute";<br /> div.style.height=height+"px";<br /> div.style.width=width+"px";<br /> div.style.overflow="hidden";<br /> div.style.backgroundColor=colour;<br /> return (div);<br /> }<br /> // ]]><br /> </script>

Ketiga simpan

Catatan : Untuk merubah warna efek salju di kursor mouse pada blogspot lihat edit kode di atas pada colour="black" untuk referensi warna masuk ke Kode Warna HTML. Bagaimana cukup mudah bukan. sekian dulu Tutorial blogspot untuk membuat efek salju di kursor mouse pada blogspot salam tio-tutorblog.

---

Tutorial Terkait

Pentingnya alexa rank pada blog
Hasil search engine tampil pada posting Bag 2
Hasil search engine tampil pada posting Bag1
Hasil search engine tampil pada posting
Code HTML Emoticons

Posted in: Tutorial Blog