Tuesday, 1 November 2011

Rainbow Sparkle Cursor

Hye semua !! Tuto ini direquest oleh Cik Kasanova... :) Nama dia ialah Maizatul... Ok, ok... Erm, Fizza takde contoh untuk ni. Jadi, korang tengok cursor Blog Fizza . Macam tulah. :) Ade warna warni kan ? Ok, let's start !

1. Sign in Blog korang --> Dashboard --> Design --> Add a Gadget --> Korang pilih HTML/Javascript
2. Korang copy kod dekat bawah ni.


<script type='text/javascript'>// <![CDATA[function initCursor() {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="2px";rlef.style.left="0px";rdow.style.top="0px";rdow.style.left="2px";document.body.appendChild(star[i]=rats);}set_width();sparkle();}}var hex=new Array("00","14","28","3C","50","64","78","8C","A0","B4","C8","DC","F0")var r=1var g=1var b=1var seq=1var sparkles = 35;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();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");rainbow="#"+hex[r]+hex[g]+hex[b]if (seq==6){b--if (b==0)seq=1}if (seq==5){r++if (r==12)seq=6}if (seq==4){g--if (g==0)seq=5}if (seq==3){b++if (b==12)seq=4}if (seq==2){r--if (r==0)seq=3}if (seq==1){g++if (g==12)seq=2}div.style.position="absolute";div.style.height=height+"px";div.style.width=width+"px";div.style.overflow="hidden";div.style.zIndex="10";div.style.backgroundColor=rainbow;return (div);}window.onload=function(){initCursor()initImage()startTime()}function initImage() {imageId = 'menu'image = document.getElementById(imageId);setOpacity(image, 0);image.style.visibility = "visible";fadeIn(imageId,0);}function fadeIn(objId,opacity) {if (document.getElementById) {obj = document.getElementById(objId);if (opacity <= 100) {setOpacity(obj, opacity);opacity += 10;window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 120);}}}function setOpacity(obj, opacity) {opacity = (opacity == 100)?99.999:opacity;// IE/Winobj.style.filter = "alpha(opacity:"+opacity+")";// Safari<1.2, Konquerorobj.style.KHTMLOpacity = opacity/100;// Older Mozilla and Firefoxobj.style.MozOpacity = opacity/100;// Safari 1.2, newer Firefox and Mozilla, CSS3obj.style.opacity = opacity/100;}function changeNav(id) {document.getElementById('content').innerHTML=document.getElementById(id).innerHTML;document.getElementById('main').innerHTML=document.getElementById('home').innerHTML;document.getElementById('rabbit').style.top="275px"document.getElementById('penguin').style.top="532px"}function hidestatus(){window.status=""return true}// ]]></script><script type="text/javascript">if (window.jstiming) window.jstiming.load.tick('headEnd');</script><div class='navbar section' id='navbar'><div class='widget navbar' id='navbar1'><script type="text/javascript">function setAttributeOnload(object, attribute, val) {if(window.addEventListener) {window.addEventListener("load",function(){ object[attribute] = val; }, false);} else {window.attachEvent('onload', function(){ object[attribute] = val; });}}function showRelatedContent(args) {var el = document.getElementById('related-iframe');if (el.parentNode.style.display != 'none') {el.parentNode.style.display = 'none';document.onclick = showRelatedContent.prevOnClick;return;}var match = /(?:^[?]|&)c=([0-9]+)(?:&|(?!.))/.exec(args);if (match !== null) {document.getElementById('related-loading').style.left = match[1] + 'px';el.style.left = Math.max(0, match[1] - parseInt(el.width) / 2) + 'px';}el.src = "http://www.blogger.com"+ '/related-content.g?q='+ window.location.href+ '&id=' + "7792698363959436653";el.parentNode.style.display = 'block';showRelatedContent.prevOnClick = document.onclick;// Hide related-content dropdown when clicking anywhere but on it.document.onclick = function() {var el = document.getElementById('related-iframe');if (el.parentNode.style.display != 'none') {el.parentNode.style.display = 'none';}document.onclick = showRelatedContent.prevOnClick;};}</script></div></div>

Ok, dah ? Save je. Tak payah ubah pape pon. :) Senang kan ? Copy kod je... P/S klau korang nk copy, tekan CTRL + C tau . Kat Blog Fizza ni mmg takleh nk Copy. :) Okey, tu je. Bye !

SELAMAT MENCUBA! JANGAN LUPA KOMEN! 

2 comments:

Siti Nur Afiqah said...

Akak, kenapa tulisan ada yang berbeza?

Shafizza Hana said...

Maksud ?