Slide do "Baixaki"

Confesso que foi meio difício conseguir o script, mas fui pegando código daqui, código dali e emfim consegui montar o slide perfeitamente, igual a do baixaki.


Vamos a instalação, já aviso que é meio difícil a modificar...

Copie o código abaixo.

#tv a {
font-size:16px;
font-weight:bold;
}

#tv span {
color:#434343;
font-size:12px;
font-weight:normal;
}

#hid {
display:none;
left:-5000px;
position:absolute;
top:-5000px;
}

#tv #nav {
height:170px;
left:359px;
overflow:hidden;
position:absolute;
top:5px;
width:46px;
}

#tv #nav img {
cursor:pointer;
height:30px;
margin:0 0 5px;
width:46px;
}

#tv .opac {
margin-bottom:5px;
opacity:1;
}

#tv .transp {
margin-bottom:5px;
opacity:0.1;
}


#tv img {
display:block;
margin-bottom:7px;
margin-left:-10px;
border:thin solid;
}
img {
border:medium none;
}

#tv {
background:url("http://img31.imageshack.us/img31/2656/tvbg.png") no-repeat scroll 0 0 transparent;
float:left;
height:255px;
overflow:hidden;
padding:0 61px 0 10px;
position:relative;
width:344px;
}

#corpoh {
text-align:left;
}

</style>


<div id="tv">
<script type='text/javascript'>
 // JavaScript para tv //
var index = 1; var menu_time = 6000; var anterior = 5; var timer = setTimeout('trocaMsg()',menu_time);
function trocaMsg() { index = index%5 +1; channel(index); tempo(); }       
function tempo() { clearTimeout(timer);    timer = setTimeout("trocaMsg()",menu_time);}
function channel(id) { index = id; document.getElementById("tvn" + anterior).className= "transp"; document.getElementById("tvn" + id).className = "opac"; document.getElementById('tvshow').innerHTML=document.getElementById('tv' + id).innerHTML;    anterior = id;}
function tvch(id, out) {if (out == 1)    { clearTimeout(timer);    channel(id);} else { tempo();}}
//channel(1);




// JavaScript para tv-papeis //
var index_p = 1; var menu_time_p = 2800; var anterior_p = 5; var timer_p = setTimeout('trocaMsg_p()',menu_time_p);
function trocaMsg_p() { index_p = index_p%5 +1; channel_p(index_p); tempo_p(); }       
function tempo_p() { clearTimeout(timer_p);    timer_p = setTimeout("trocaMsg_p()",menu_time_p);}
function channel_p(idx) { index_p = idx; document.getElementById("tvp" + anterior_p).className= "transp"; document.getElementById("tvp" + idx).className = "opac"; document.getElementById('paptv').innerHTML=document.getElementById('ptv' + idx).innerHTML;    anterior_p = idx;}
function tvch_p(idx, out) {if (out == 1)    { clearTimeout(timer_p);    channel_p(idx);} else { tempo_p();}}
//channel_p(1);

//Função p/ n Aparecer erro de JS no navegador do Tiozinho
function semerro(){
return true;}
window.onerror=semerro;

</script>


<div id="tvshow">

<!-- SLIDE INICIAL-->

<a href="http://www.baixaki.com.br/download/google-chrome-6-0-beta.htm"><img height="177" width="354" src="http://www.baixaki.com.br/imagens/65395/106595.jpg" title="Google Chrome 6 Beta" />

Google Chrome 6 Beta

<br /><span>

As atualizações para o navegador do Google não param! Experimente a nova versão de testes liberada.

</span></a></div>



<div id="nav">

<!-- SLIDE  DE NAVEGAÇÕES // escolher o slide a ser visto-->

<!-- SLIDE  DE NAVEGAÇÃO 1-->

<a href="http://www.cblogger.tk/2010/05/barra-de-menu-do-seu-site-para.html"><img height="30" width="46" onmouseout="tvch(1,0)" onmouseover="tvch(1,1)" src="http://www.codigosbr.co.cc/imagens/conduit.png" class="transp" id="tvn1" /></a>

<!-- SLIDE  DE NAVEGAÇÃO 2--> 

 <a href="http://www.baixaki.com.br/download/google-chrome-6-0-beta.htm"><img height="30" width="46" onmouseout="tvch(2,0)" onmouseover="tvch(2,1)" src="http://www.baixaki.com.br/imagens/65395/93269.jpg" class="opac" id="tvn2" /></a>

 <!-- SLIDE  DE NAVEGAÇÃO 3--> 

 <a href="http://www.codigosbr.tk/2010/05/criar-templates-para-o-blogger.html"><img height="30" width="46" onmouseout="tvch(3,0)" onmouseover="tvch(3,1)" src="http://www.codigosbr.co.cc/imagens/Artisteer.png" class="transp" id="tvn3" /></a>

<!-- SLIDE DE NAVEGAÇÃO 4--> 

 <a href="http://www.cblogger.tk/2010/05/tutorial-java-script.html"><img height="30" width="46" onmouseout="tvch(4,0)" onmouseover="tvch(4,1)" src="http://www.codigosbr.co.cc/imagens/javascripttutorial.png" class="transp" id="tvn4" /></a>

<!-- SLIDE DE NAVEGAÇÃO 5-->  

 <a href="http://www.cblogger.tk/2010/05/dominio-gratis-tk.html"><img height="30" width="46" onmouseout="tvch(5,0)" onmouseover="tvch(5,1)" src="http://www.codigosbr.co.cc/imagens/logo_tk.png" class="transp" id="tvn5" /></a>
 </div>


<ul id="hid">

<!-- SLIDES--> 

<!-- SLIDE  1--> 

<li id="tv1">
<a href="http://www.cblogger.tk/2010/05/barra-de-menu-do-seu-site-para.html"><img height="177" width="354" src="http://www.codigosbr.co.cc/imagens/conduit.png" title="conduit " />

Conduit

<br /><span>

Crie uma barra de navegação so seu site para navegadores como - Internet explorer e Firefox

</span></a></li>


<!-- SLIDE  2-->

<li id="tv2">
<a href="http://www.baixaki.com.br/download/google-chrome-6-0-beta.htm"><img height="177" width="354" src="http://www.baixaki.com.br/imagens/65395/106595.jpg" title="Google Chrome 6 Beta" />

Google Chrome 6 Beta

<br /><span>

As atualizações para o navegador do Google não param! Experimente a nova versão de testes liberada.

</span></a></li>

<!-- SLIDE  3-->

<li id="tv3">
<a href="http://www.codigosbr.tk/2010/05/criar-templates-para-o-blogger.html"><img height="177" width="354" src="http://www.codigosbr.co.cc/imagens/Artisteer.png" title="Artisteer" />

Artisteer

<br /><span>

Excelente programa para criar templates pro blogger e outros serviços como  Wordpress e joomla

</span></a></li>

<!-- SLIDE  4--> 

<li id="tv4">

<a href="http://www.cblogger.tk/2010/05/tutorial-java-script.html"><img height="177" width="354" src="http://www.codigosbr.co.cc/imagens/javascripttutorial.png" title="AquaSnap" />

Tutorial javascript

<br /><span>

Tutorial de javasript básico para iniciantes.Clique e aprenda!

</span></a></li>

<!-- SLIDE  5--> 

<li id="tv5">

<a href="http://www.cblogger.tk/2010/05/dominio-gratis-tk.html"><img height="177" width="354" src="http://www.codigosbr.co.cc/imagens/logo_tk.png" title="TK" />

Dominio grátis .tk

<br /><span>

Veja como adquirir um verdadeiro domínio totalmente grátis e aprenda a configurar no blogger

</span>

</a></li>
</ul>


<script type="text/javascript">
channel(1);
</script>
</div>

Vá em Layout - Elementos da página - Adicionar um gadget. - Escolha HTML/Javascript ecole o código.

Veja que eu organizei o código pra facilitar a modificação

Vamos modificar!

Abaixo da linha <!-- SLIDE INICIAL--> é o slide inicial modifique as seguintes partes


laranjada - é o link do destino dessa slide
Verde - coloque a url da imagem pra esse slide
Roxo - é o titulo do slide
Rosa -  é a descrição do slide

Abaixo da linha <!-- SLIDE  DE NAVEGAÇÕES // escolher o slide a ser visto-->   modifique as seguintes partes

laranjada - é o link do destino dessa slide
Verde - coloque a url da imagem pra esse slide

Abaixo da linha <!-- SLIDES--> modifique as seguintes partes

laranjada - é o link do destino dessa slide
Verde - coloque a url da imagem pra esse slide
Roxo - é o titulo do slide
Rosa -  é a descrição do slide

Obs - coloque os links de destino e da imagem dos slides iguais

Exemplo

Essa parte

<!-- SLIDE  DE NAVEGAÇÃO 1-->

<a href="http://www.cblogger.tk/2010/05/barra-de-menu-do-seu-site-para.html"><img height="30" width="46" onmouseout="tvch(1,0)" onmouseover="tvch(1,1)" src="http://www.codigosbr.co.cc/imagens/conduit.png" class="transp" id="tvn1" /></a>

 é dessa

<!-- SLIDE  1-->

<li id="tv1">

<a href="http://www.cblogger.tk/2010/05/barra-de-menu-do-seu-site-para.html"><img height="177" width="354" src="http://www.codigosbr.co.cc/imagens/conduit.png" title="conduit " />

 <!-- SLIDE  DE NAVEGAÇÃO 2-->   

   é do 

< !-- SLIDE  2-->

  E ASSIM VAI...

Então coloque o link de destino e imagem da slide <!-- SLIDE  DE NAVEGAÇÃO 2--> por exemplo,   igual a do < !-- SLIDE  2>

Faça isso com todos.

Depois de ter modificado certinho, salve e pronto!