terça-feira, 25 de maio de 2010

Slide do "Baixaki"

A pedido do nosso parceiro kaytros, vou disponibilizar o código daquele slide que tem na página 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.

<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">

<!-- 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 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 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!

Atualização.
Olá pessoal, script em js do slide foi concertado =D

Marcadores: , ,

50 Comentários:

Às 25 de maio de 2010 21:43 , Blogger kaytros disse...

valeu, vou colocar no meu blog assim que possivel

 
Às 26 de maio de 2010 20:13 , Anonymous Anônimo disse...

cara qual devo alterar para poder aumentar a largura do suporte das fotos eu nao achei, eu achei apenas o das miniaturas, e dos que aumenta a foto, mais o suporte ainda fica pequeno eu quero acertar ele perfeitamente com o espaço disponivel no meu blog mais n achei

onde aumenta a largura do suporte das fotos?

 
Às 27 de maio de 2010 11:24 , Blogger Códigos Blogger disse...

http://www.codigosbr.co.cc/imagens/fundoslide.png

Copie essa imagem (que é o background)para seu pc,
Edite colocando o tamanho desejado
Hospeda na internet
Copie a url da img hospedada
E substitua no código.

Eu não sei se é bem isso, pq vc num explicou muito bem.Mas espero ter ajudado, e obrigado por comentar! =D

 
Às 27 de maio de 2010 21:03 , Anonymous Anônimo disse...

é exatamente isso ae que to falando, tenho que ajustar esse quadrado ae no blog ai as fotos da pra ajustar de acordo com o quadrado de boa.

mas eu ja alterei tudo de

width

para aumentar a largura disso mais n consegui. vo esperar vc que manja do assunto e que vai me ajudar de coração.

lembrando esse link com a foto ja tem la , mas mesmo assim alterei pra ver se 1 santo iria aparecer , mais nada disso.

mas encontrei uma brecha de luz para uma ajuda e sabe onde vim parar?

http://www.cblogger.tk

 
Às 1 de junho de 2010 22:34 , Blogger Códigos Blogger disse...

Para alterar o tamaho da imagem, tem q acrecentar

width: 100px;
height: 100px;

Na linha do .img ou #img

ex.

.img {
width: 100px;
height: 100px;
}

 
Às 27 de junho de 2010 01:09 , Anonymous Anônimo disse...

OLÁ BOM DIA |: gostaria muito de uma ajuda |: no meu caso eu queria coloca o ( slid ) no meu site. e posta dentro dele algumas novidades , ++ o problema que eu queria era sempre que alguém clicar em cima de algum arquivo para visualizar ele abriria em outra pagina sem sair da minha ( pagina ) isso tem como |: AGUARDO email : maedaduarte@hotmail.com . parabéns pelo seu site

 
Às 28 de junho de 2010 23:49 , Blogger Códigos Blogger disse...

Olá,tem sim.Te respondo por email.

 
Às 11 de julho de 2010 13:11 , Blogger andraD disse...

Pode disser o link para baixar o Java quando tento baixar por este link "http://www.codigosbr.co.cc/slide.js" da erro acredito que se muita gente vier a usar ,com o tempo o slid vai para de funcionar>mande pra esse e-mail a resposta ok> mk.andrad@yahoo.com

 
Às 11 de julho de 2010 14:40 , Blogger Códigos Blogger disse...

Olá, já concertamos o slide! =D

 
Às 11 de julho de 2010 22:21 , Blogger andraD disse...

tenho outra duvida
Como faço para remover as bordas das imagens

 
Às 12 de julho de 2010 00:28 , Blogger Códigos Blogger disse...

Procure por #tv img
Mais abaixo exclua a linha border:thin solid;

 
Às 19 de julho de 2010 11:31 , Blogger Gr34t H3LL disse...

achei muito legal esse codigo, coloquei no meu blog, ficou muito bom . Agora to fazendo meu com widgets do blogger , pra não precisar ficar inserindo os links direto no código. Quando estiver pronto mando uma prévia pra vcs.

http://nabalsa.blogspot.com

 
Às 25 de julho de 2010 14:15 , Blogger André Conceição disse...

como alterar o tamanho dele todo
ex: height=200 width=270
para ficar + ou - no tamanho que eu quero

 
Às 25 de julho de 2010 18:56 , Blogger Códigos Blogger disse...

@Gr34t H3LL - Agradeço pela colaboração. =D

@André - Abaixo da linha "#tv {" altere o valor do código "width" para um valor menor em pixels.

Abaixo da linha "#tv #nav {" altere o valor do código "left" para um valor menor em pixels.

E altere também o valor "width" e "height" de todas as imgs.

 
Às 15 de agosto de 2010 14:40 , Blogger ACCOUNT NEWS disse...

Olá muito legal o Slide e fiz o mesmo em meu Blog, gostaria de saber se é possivel colocar um efeito de PIXELIZAR nas imagens ficaria bem legal.

Abs

 
Às 19 de agosto de 2010 11:02 , Blogger Códigos Blogger disse...

Olá, sim é possível, mas teria que fazer uma mudança radical no javascript.

 
Às 19 de agosto de 2010 23:26 , Blogger Kevin(Tiesto) disse...

Mano,eu coloquei no meu blog e parece que deu um errozinho ,tem uma imagem desse jeito aki <''> queria que vc me dissece como tira ela.

pode conferir aki http://enemys-hackers.blogspot.com/

 
Às 20 de agosto de 2010 00:56 , Blogger Códigos Blogger disse...

Amigo, talves na hora de colocar as URL's das imagens, você alterou o código.Sendo assim, instale o código novamente, mas tenha cuidado na hora de colocar as URL.

 
Às 21 de agosto de 2010 13:48 , Blogger X-Pro Games disse...

Opa, antes de instalar o slide em meu blog, montei ele em um blog teste e deu tudo certo. Quando coloquei ele no meu blog, parecia que estava tuo certo, mas, não estava. O slide funciona perfeitamente, mas problema é que quando eu passo o mouse sobre os mini-ícone do slide que fica aki (>>>) o 1º capta uma imagem do meu blog e coloca lá. :S Não sei se deu para entender muito bem, caso queira, dê uma olhada você mesmo: http://x-pro-games.blogspot.com/

Eu gostaria também de saber se tem como tirar o Slide Inicial do script, eu tentei mas não consegui.

Aguardo resposta, e parabens pelo blog, muito organizado!

 
Às 14 de setembro de 2010 18:03 , Blogger Flor do Ebano disse...

Gostaria de saber como se faz o banner da radio antena 01, a rolagem é diferente se possivel poderia me responder.
bobrigada

 
Às 15 de setembro de 2010 12:19 , Blogger Douglas Soares disse...

cara obrigado.
nerdlivre.blogspot.com

 
Às 18 de setembro de 2010 10:30 , Blogger Anônimo disse...

Valeu mesmo cara tava precisando!

 
Às 20 de setembro de 2010 20:22 , Blogger jair.vasconcelos@yahoo.com.br disse...

Olá ?/
Você está de parabens pelo seu Blog de ajuda para os outros Blogs..
Eu estava a muito tempo procurando este slide e encontrei aqui.
Só que estou com um problema :
Como faço para centrar ele,pois onde ele está,o widget é bem maiór que o corpo do slide,e fica muito desproporcional,e na estética ficou meio ruim.
Você pode ensinar-me por favor,ou a centrar ou aumentar a largura,que no caso seria 580 px de largura.
Eu prefiro aumentar a largura,maaaaaais o que for mais viável,eu aceito...
Por inquanto muito obrigado. :-^

 
Às 21 de setembro de 2010 12:18 , Blogger DDG-admin disse...

Ola sou o Jair aí de cima..
Já consegui arrumar o slide...ok..

 
Às 21 de setembro de 2010 14:42 , Blogger Códigos Blogger disse...

Ok amigo

 
Às 28 de setembro de 2010 17:37 , Blogger leonardo disse...

Olá , você consegue o código do slide do yahoo...
No aguardo,
leonardo

 
Às 29 de setembro de 2010 23:39 , Blogger Gisele Caldas disse...

Muito bom! só de não ter de mexer no html do blog está ótimo. testei no meu blog de testes e deu certo. Escuta: duas pessoas pediram o código do blog do yahoo e o da rádio antena 1. Vc consegue pra gente? Um abraço! continue ajudando a galera.
bjs

 
Às 3 de outubro de 2010 22:53 , Blogger Códigos Blogger disse...

@leonardo - O código do slide do yahoo é bem complexo e ruim de juntar os códigos para o perfeito funcionamento.

@Gisele E @Flor do Ebano - Como falei é dificil conseguir o slide, até eu não sei como conseguir, mas sei que o slide da radio antena 1 é criado no macromedia flash player e não tem código HTML. E se eu conseguisse, seria impossível alterar imagens, links e links.

 
Às 15 de outubro de 2010 01:50 , Blogger RikeOwned disse...

Olá tudo bom? primeiramente gostaria de dizer que os conteúdos postados aqui só ótimos, bom agora vem uma dúvida... eu gostaria de saber se tem como colocar esse slide dentro de uma postagem
vlw õ/

 
Às 15 de outubro de 2010 11:21 , Blogger Códigos Blogger disse...

@RikeOwned
Sim, tem como.É só criar uma nova postagem e clicar na aba "Editar HTML" e colocar o código, depois publique.

 
Às 15 de outubro de 2010 22:12 , Blogger RikeOwned disse...

Eu ja tentei isso mas na postagem o slide fica todo desconfigurado aqui ta um print ( http://img214.imageshack.us/img214/8056/printhr.jpg ), eu só joguei o código la no " editar HTML da postagem ", quando eu utilizo o código no gadget de HTML/JavaScript ele funciona numa boa... eu ja tentei de várias formas, rodei o google inteiro rs
só na postagem que não vai .-.

 
Às 1 de dezembro de 2010 11:00 , Blogger RODRIGO disse...

como eu faço pra que quando alguem clicar abrir a pagina sem sair da minha??
valeu

 
Às 2 de dezembro de 2010 12:48 , Blogger Códigos Blogger disse...

use a tag 'target' com o valor '_blank'
exemplo.
<a href="link" TARGET="_BLANK">exemplo</a>

 
Às 11 de dezembro de 2010 19:40 , Blogger Gustavo Silva disse...

Como mudar o posicionamento da barra de navegação? Mais especificamente, como deslocá-la para a direita?

 
Às 13 de dezembro de 2010 11:40 , Blogger Nathan disse...

Coloquei ele no meu blog de teste, fiz umas modificações: http://yvtbhdusjnudwiprbv8grfnpdeuiwgchaiuwd.blogspot.com/

queria saber como tirar o sublinhado?

 
Às 13 de dezembro de 2010 16:27 , Blogger Códigos Blogger disse...

@Nathan
Talves seja a configuração do seu template. Vá em Editar HTML e pesquise por a:hover , ao lado dela exclua a linha text-decoration:Aqui vai esta um valor(overline,overline...);

 
Às 9 de julho de 2011 15:20 , Blogger FellipeReale disse...

Como faço para aumentar o slide para se adequar ao tamanho do template do meu blog?

 
Às 1 de agosto de 2011 15:20 , Blogger Zanellato disse...

pohh... só funfa no chromee??? fico sem transparencia no IE e nao apareceu a imagem grande no FF, só a miniatura sem tranparencia tb... =/

 
Às 29 de agosto de 2011 12:02 , Blogger Equipe do Blog disse...

Tem como fazer o slide aparecer apenas na página inicial do blog??

 
Às 29 de agosto de 2011 13:55 , Blogger Códigos Blogger disse...

Tem sim! CONFIRA CLICANDO NO LINK ABAIXO:

http://www.cblogger.net/2010/06/ocultando-widgetsgadgets-no-blogger.html

 
Às 16 de setembro de 2011 13:33 , Blogger Vanessa Rodrigues disse...

Este comentário foi removido pelo autor.

 
Às 16 de setembro de 2011 14:54 , Blogger Vanessa Rodrigues disse...

Muito legal mais teria como vc editar esse codigo para mim com as mesmas larguras desse site aqui garotasestupidas.com?Tem como vc me mandar por email?
vanessa@batomcereja.com

 
Às 12 de outubro de 2011 12:43 , Blogger Tales Gomes disse...

Me desculpa a pergunta mas isto não seria um plagío?

 
Às 12 de outubro de 2011 13:28 , Blogger Códigos Blogger disse...

De forma alguma. Plagio seria seu eu escrevesse "Eu criei um slide igual a do baixaki". Como dito no post, apenas pequei os códigos e organizei de modo que funcionasse no blogger.

 
Às 7 de novembro de 2011 13:23 , Blogger Sara Nossa Terra Pacatuba disse...

Como faço para colocar o TWITTER VOANDO perto do mouse. me passa por email sntpacatuba@gmail.com

 
Às 29 de novembro de 2011 00:34 , Blogger Marie Gamer disse...

Cara vc me ajudou muitoo!!! VALEW! MUITO GRATA! =)

 
Às 5 de dezembro de 2011 10:34 , Blogger Lucas Lima disse...

Não pegou :(

 
Às 30 de julho de 2012 16:09 , Blogger PacTudo disse...

Este comentário foi removido pelo autor.

 
Às 8 de agosto de 2012 16:46 , Blogger PacTudo disse...

Este comentário foi removido pelo autor.

 
Às 9 de agosto de 2012 15:29 , Blogger PacTudo disse...

Este comentário foi removido pelo autor.

 

Postar um comentário

Se você gostou deste artigo deixe um comentário!

Duvidas ou sugestões comentem aqui! =D
*Não insultar autor ou leitores da postagens
*Não pedir parceria por comentários
*Não publicar spam ou similar.

Assinar Postar comentários [Atom]

Links para esta postagem:

Criar um link

<< Página inicial