Widget "Temas em Destaque"

Qual é sua questão:
Queria saber como fazer aquele Widget de "Temas em Destaque" do FdF, quero por no meu fórum que vou fazer!

Que medidas você tomou para corrigir o problema:
Nenhuma

Apresente-nos imagens do problema (se necessário):

Olá euchamodaniel,

se não me engano, este é o código do temas em destaque do FdF, agora que o têm, edite-o como quiser.

Código:

<style type="text/css">  .picshow { z-index:444; position:relative; background-color:#ffffff; width: 100%; height: 135px}.picshow_main { position: relative; width: 180px; height: 135px}.picshow_main .imgbig { filter: progid:dximagetransform.microsoft.wipe(gradientsize=1.0,wipestyle=4, motion=forward); width: 180px; height: 135px} .picshow_change {position: absolute; text-align: left; bottom: 0px; height: 30px; right: 0px; left: 100px;}.picshow_change img {width:15px; height: 15px}.picshow_change a { border: 1px solid; display: block; float: left; margin-right: 5px;  -display: inline} a.axx { border-color: #555} a.axx:hover {border-color: #000} a.axx img { filter: alpha(opacity=40); opacity: 0.4; -moz-opacity: 0.4} a.axx:hover img {filter: alpha(opacity=100); opacity: 1.0; -moz-opacity: 1.0} a.bxx { border-color: #000} a.bxx:hover {border-color: #000} img{border:0px}</style>
<SCRIPT language=javascript>
 
 var counts = 3;
 
 img1 = new Image();
 
 img1.src = 'http://hitskin.com/themes/13/25/51/thumb.jpg';
 
 img2 = new Image();
 
 img2.src = 'http://hitskin.com/themes/11/94/16/thumb.jpg';
 
 img3 = new Image();
 
 img3.src = 'http://hitskin.com/themes/12/46/06/thumb.jpg';
 
 
 
 var smallImg = new Array();
 
 smallImg[0] = 'http://2img.net/i/fa/optimisation_fdf/common/bouton1.gif';
 
 smallImg[1] = 'http://2img.net/i/fa/optimisation_fdf/common/bouton2.gif';
 
 smallImg[2] = 'http://2img.net/i/fa/optimisation_fdf/common/bouton3.gif';
 
 
 
 url1 = 'http://pt.hitskin.com/buscar-um-tema/arthurbohrer-theme-132551.htm';
 
 url2 = 'http://pt.hitskin.com/buscar-um-tema/playstation-fire-119416.htm';
 
 url3 = 'http://pt.hitskin.com/buscar-um-tema/dragon-inflames-124606.htm';
 
 
 
 alt1 = new Image();
 
 alt1.alt = 'ArthurBohrer Theme';
 
 alt2 = new Image();
 
 alt2.alt = 'Playstation (fire)';
 
 alt3 = new Image();
 
 alt3.alt = 'dragon inflames';
 
 var nn = 1;
 
 var key = 0;
 
 function change_img() {
 
  if (key == 0) {
 
  key = 1;
 
  } else if (document.all) {
 
  document.getElementById("pic").filters[0].Apply();
 
  document.getElementById("pic").filters[0].Play(duration = 2);
 
  }
 
  eval('document.getElementById("pic").src=img' + nn + '.src');
 
  eval('document.getElementById("url_theme").href=url' + nn);
 
  eval('document.getElementById("pic").alt=alt' + nn + '.alt');
 
  if (nn == 1) {
 
  document.getElementById("url_theme").target = "_blank";
 
  document.getElementById("url_theme").style.cursor = "pointer";
 
  } else {
 
  document.getElementById("url_theme").target = "_blank"
 
  document.getElementById("url_theme").style.cursor = "pointer"
 
  }
 
 
 
  for ( var i = 1; i <= counts; i++) {
 
  document.getElementById("xxjdjj" + i).className = 'axx';
 
  }
 
  document.getElementById("xxjdjj" + nn).className = 'bxx';
 
  nn++;
 
  if (nn > counts) {
 
  nn = 1;
 
  }
 
  tt = setTimeout('change_img()', 7000);
 
 }
 
 function changeimg(n) {
 
  nn = n;
 
  window.clearInterval(tt);
 
  change_img();
 
 }
 
 function ImageShow() {
 
  document.write('<div class="picshow_main">');
 
  document.write('<div><a id="url_theme"><img id="pic" class="imgbig" /></a></div>');
 
  document.write('<div class="picshow_change">');
 
  for ( var i = 0; i < counts; i++) {
 
  document.write('<a href="javascript:changeimg(' + (i + 1)
 
    + ');" id="xxjdjj' + (i + 1)
 
    + '" class="axx" target="_self"><img src="' + smallImg[i]
 
    + '"></a>');
 
  }
 
  document.write('</div></div>');
 
  change_img();
 
 }
 
</SCRIPT>
 
<SCRIPT language="javascript" type="text/javascript">
 
 ImageShow();
 
</SCRIPT>

espero ter te ajudado.