Slide no cabeçalho - Fácil.

Muita gente me perguntou como eu fiz o lay atual, principalmente aquele "slide" no cabeçalho, então meu povo, aquilo lá é fácil (ou não), e todos podem fazer.

é o seguinte:

Adicione um novo gadget HTML/Javascript e nele coloque esse código:

  

<div style="position: absolute; margin-top: -135px; left: 900px;"><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript"><br />var fadeimages=new Array()<br />//SET IMAGE PATHS. Extend or contract array as needed<br />fadeimages[0]=["URLIMAGEM1"] //plain image syntax<br />fadeimages[1]=["URLIMAGEM2"] //image with link syntax<br />fadeimages[2]=["URLIMAGEM3"] //plain image syntax<br />fadeimages[3]=["URLIMAGEM4"] //plain image syntax<br /><br /><br />var fadebgcolor="white"<br /><br />////NO need to edit beyond here/////////////<br />var fadearray=new Array() //array to cache fadeshow instances<br />var fadeclear=new Array() //array to cache corresponding clearinterval pointers<br />var dom=(document.getElementById) //modern dom browsers<br />var iebrowser=document.all<br />function fadeshow(theimages, fadewidth, fadeheight, borderwidth, delay, pause, displayorder){<br />this.pausecheck=pause<br />this.mouseovercheck=0<br />this.delay=delay<br />this.degree=10 //initial opacity degree (10%)<br />this.curimageindex=0<br />this.nextimageindex=1<br />fadearray[fadearray.length]=this<br />this.slideshowid=fadearray.length-1<br />this.canvasbase="canvas"+this.slideshowid<br />this.curcanvas=this.canvasbase+"_0"<br />if (typeof displayorder!="undefined")<br />theimages.sort(function() {return 0.3 - Math.random();}) //thanks to Mike (aka Mwinter) :)<br />this.theimages=theimages<br />this.imageborder=parseInt(borderwidth)<br />this.postimages=new Array() //preload images<br />for (p=0;p<theimages.length;p++){ src="theimages[p][0]" fadewidth="fadewidth+this.imageborder*2" fadeheight="fadeheight+this.imageborder*2" id="master'+this.slideshowid+'" style="position:relative;width:'+fadewidth+'px;height:'+fadeheight+'px;overflow:hidden;"><div id="'+this.canvasbase+'_0" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);opacity:0.1;-moz-opacity:0.1;-khtml-opacity:0.1;background-color:'+fadebgcolor+'"></div><div id="'+this.canvasbase+'_1" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);opacity:0.1;-moz-opacity:0.1;-khtml-opacity:0.1;background-color:'+fadebgcolor+'"></div></div>')<br />else<br />document.write('<div><img name="defaultslide'+this.slideshowid+'" src="'+this.postimages[0].src+'" /></div>')<br />if (iebrowser&&dom||dom) //if IE5+ or modern browsers such as Firefox<br />this.startit()<br />else{<br />this.curimageindex++<br />setInterval("fadearray["+this.slideshowid+"].rotateimage()", this.delay)<br />}<br />}<br /><br />function fadepic(obj){<br />if (obj.degree<100){ opacity="=" opacity="obj.degree" filter="alpha(opacity=" mozopacity="obj.degree/101" khtmlopacity="obj.degree/100" opacity="obj.degree/101" nextcanvas="(obj.curcanvas=" tempobj="iebrowser?" nextimageindex="(obj.nextimageindex<obj.postimages.length-1)?" populateslide="function(picobj," slidehtml="" slidehtml="'<a" href="http://www.google.com" target="'+this.theimages[picindex][2]+'">'<br />slideHTML+='<img src="'+this.postimages[picindex].src+'" border="'+this.imageborder+'px" />'<br />if (this.theimages[picindex][1]!="") //if associated link exists for image<br />slideHTML+='</a>'<br />picobj.innerHTML=slideHTML<br />}<br />fadeshow.prototype.rotateimage=function(){<br />if (this.pausecheck==1) //if pause onMouseover enabled, cache object<br />var cacheobj=this<br />if (this.mouseovercheck==1)<br />setTimeout(function(){cacheobj.rotateimage()}, 100)<br />else if (iebrowser&&dom||dom){<br />this.resetit()<br />var crossobj=this.tempobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)<br />crossobj.style.zIndex++<br />fadeclear[this.slideshowid]=setInterval("fadepic(fadearray["+this.slideshowid+"])",50)<br />this.curcanvas=(this.curcanvas==this.canvasbase+"_0")? this.canvasbase+"_1" : this.canvasbase+"_0"<br />}<br />else{<br />var ns4imgobj=document.images['defaultslide'+this.slideshowid]<br />ns4imgobj.src=this.postimages[this.curimageindex].src<br />}<br />this.curimageindex=(this.curimageindex<this.postimages.length-1)? resetit="function(){" degree="10" crossobj="iebrowser?" opacity="=" opacity="this.degree" filter="alpha(opacity=" mozopacity="this.degree/101" khtmlopacity="this.degree/100" opacity="this.degree/101" startit="function(){" crossobj="iebrowser?" pausecheck="=" cacheobj="this" crossobjcontainer="iebrowser?" onmouseover="function(){cacheobj.mouseovercheck=" onmouseout="function(){cacheobj.mouseovercheck="><br /><br /><script type="text/javascript"><br />function MM_preloadImages() { //v3.0<br />  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();<br />    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; src="a[i];}}"><br /><br /><br />   <script type="text/javascript">//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)<br />new fadeshow(fadeimages, 296, 170, 0, 2000, 1, "R")</script></div>

Explicando, o código em azul (-135px;) muda a posição na vertical, mais pra cima ou mais pra baixo. Quanto mais aumenta o valor, mais pra cima ele fica.
O código em vermelho (900px;) muda a posição vertical, se ele vai ficar mais pra esquerda ou pra direita,
Quanto mais aumenta o valor, mais pra direita ele vai.
Entenderam? Comentem e digam oque vocês acharam, beijos!