Slide Estilo BaixaKi

Descrição: Tutorial de como colocar um slider no seu blog estilo baixaki

Nossa avaliação do conteúdo:

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.

<style type="text/css"> #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"><br /> <!-- SLIDE INICIAL--> <br /> <br /> <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 /> <br /> <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 /> <br /> <br /><span> Crie uma barra de navegação so seu site para navegadores como - Internet explorer e Firefox<br /> <br /> </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 /> <br /> <br /><span> As atualizações para o navegador do Google não param! Experimente a nova versão de testes liberada.<br /> <br /> </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 /> <br /> <br /><span> Excelente programa para criar templates pro blogger e outros serviços como Wordpress e joomla<br /> <br /> </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 /> <br /> <br /><span> Tutorial de javasript básico para iniciantes.Clique e aprenda!<br /> <br /> </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 /> <br /> <br /><span> Veja como adquirir um verdadeiro domínio totalmente grátis e aprenda a configurar no blogger<br /> <br /> </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 e cole 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 parte
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

<!-- <br /> SLIDE  DE NAVEGAÇÃO 1--></b> </div><div style="background-color: #cccccc;"><br /> </div><br /> <div style="background-color: #cccccc;"><a href="<span style="color: orange;">http://www.cblogger.tk/2010/05/barra-de-menu-do-seu-site-para.html</span>"><img<br /> height="30" width="46" onmouseout="tvch(1,0)" onmouseover="tvch(1,1)" <br /> src="<span style="color: #38761d;">http://www.codigosbr.co.cc/imagens/conduit.png</span>"<br /> class="transp" id="tvn1" /></a></div><div style="background-color: #cccccc;"><br /> </div><div style="background-color: #f3f3f3;"><br /> </div><div style="background-color: #f3f3f3;"> é dessa</div><div style="background-color: #f3f3f3;"><br /> <br /> </div><div style="background-color: #cccccc;"><b><!-- <br /> SLIDE  1--> </b></div><div style="background-color: #cccccc;"><br /> </div><div style="background-color: #cccccc;"><li <br /> id="tv1"></div><div style="background-color: #cccccc;"><a<br /> href="<span style="color: orange;">http://www.cblogger.tk/2010/05/barra-de-menu-do-seu-site-para.html</span>"><img<br /> height="177" width="354" src="<span style="color: #38761d;">http://www.codigosbr.co.cc/imagens/conduit.png</span>"<br /> title="<span style="color: purple;">conduit</span> " /></div><br /> <div style="background-color: #cccccc;"><br /> </div><div style="background-color: #f3f3f3;"><br /> </div><div style="background-color: #f3f3f3;"> <b><!-- <br /> SLIDE  DE NAVEGAÇÃO 2-->   </b></div><div style="background-color: #f3f3f3;"><br /> </div><div style="background-color: #f3f3f3;"><b>   é do </b></div><div style="background-color: #f3f3f3;"><br /> </div><br /> <div style="background-color: #f3f3f3;"><b>< </b><b>!--<br /> SLIDE  2--></b>

  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, visualize e salve e pronto!