3 de março de 2012

Slide parecido com o do Baixaki

Ricardo
Vamos lá:
1°-vá no painel do blog 
2°-Designer 
3°-Elementos da Pagina 
4° Adicionar um Gadget (ponha dentro de um já criado)
5°- Html-java Script↑↑
6°- copie esse 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://4.bp.blogspot.com/-kMJ1P90OoHo/TsHUfQUVtlI/AAAAAAAAC0w/5OozYPc-tgo/s1600/background.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="link  de destino da 2° imagem "><img height="177" width="354" src="http://4.bp.blogspot.com/-jlHi4F2rjwg/TsHZNe-iGOI/AAAAAAAAC04/aBqLuAl24YM/s1600/2.png" title="

ponha aqui um titulo curto ao passar o mause 
" />
ponha aqui um titulo curto da 2° imagem
<br /><span>
ponha aqui uma descrição da 2° imagem
</span></a></div>




<div id="nav">
<!-- SLIDE  DE NAVEGAÇÕES // escolher o slide a ser visto--> 
<!-- SLIDE  DE NAVEGAÇÃO 1-->
<a href="link de destino da 1° imagem"><img height="30" width="46" onmouseout="tvch(1,0)" onmouseover="tvch(1,1)" src="http://1.bp.blogspot.com/-pAyDh06ZwDg/TsHUXaLGjiI/AAAAAAAAC0o/7fHRr2SswAI/s1600/slide1.png" class="transp" id="tvn1" /></a>
<!-- SLIDE  DE NAVEGAÇÃO 2-->
 <a href="link de destino da 2° imagem"><img height="30" width="46" onmouseout="tvch(2,0)" onmouseover="tvch(2,1)" src="http://4.bp.blogspot.com/-jlHi4F2rjwg/TsHZNe-iGOI/AAAAAAAAC04/aBqLuAl24YM/s1600/2.png" class="opac" id="tvn2" /></a>
 <!-- SLIDE  DE NAVEGAÇÃO 3-->
 <a href="link de destino da 3° imagem"><img height="30" width="46" onmouseout="tvch(3,0)" onmouseover="tvch(3,1)" src="http://1.bp.blogspot.com/-3wvGInKO2KE/TsHZPVbtFII/AAAAAAAAC1A/I5leMXHetc0/s1600/3.png" class="transp" id="tvn3" /></a>
<!-- SLIDE DE NAVEGAÇÃO 4-->
 <a href="link de destino da 4° imagem"><img height="30" width="46" onmouseout="tvch(4,0)" onmouseover="tvch(4,1)" src="http://1.bp.blogspot.com/-08ZraJ6qhKM/TsHZTTXMLPI/AAAAAAAAC1I/YHVykgJjveM/s1600/4.png" class="transp" id="tvn4" /></a>
<!-- SLIDE DE NAVEGAÇÃO 5--> 
 <a href="link de destino da 5° imagem"><img height="30" width="46" onmouseout="tvch(5,0)" onmouseover="tvch(5,1)" src="http://2.bp.blogspot.com/-hRx64rJgQ30/TsHZWBT6yNI/AAAAAAAAC1Q/HI76b-ClaCs/s1600/5.png" class="transp" id="tvn5" /></a>
 </div>


<ul id="hid">
<!-- SLIDES-->
<!-- SLIDE  1-->
<li id="tv1">
<a href="link 

de destino
 da 1° imagem"><img height="177" width="354" src="http://1.bp.blogspot.com/-pAyDh06ZwDg/TsHUXaLGjiI/AAAAAAAAC0o/7fHRr2SswAI/s1600/slide1.png" title="ponha aqui um titulo curto ao passar o mause " />
ponha aqui um titulo curto da 1° imagem 
<br /><span>
ponha aqui uma descrição da 1° imagem
</span></a></li>


<!-- SLIDE  2-->
<li id="tv2">
<a href="link  de 

de destino
da 2° imagem" /><img height="177" width="354" src="http://4.bp.blogspot.com/-l-b0GsGirkY/TsHoZRlEGFI/AAAAAAAAC1Y/tHNK0eSn7n4/s1600/2.png" title="
ponha aqui um titulo curto ao passar o mause
" />
ponha aqui um titulo curto da 2° imagem
<br /><span>
ponha aqui uma descrição da 2° imagem
</span></a></li>
<!-- SLIDE  3-->
<li id="tv3">
<a href="link de destino da 3° imagem"><img height="177" width="354" src="http://1.bp.blogspot.com/-3wvGInKO2KE/TsHZPVbtFII/AAAAAAAAC1A/I5leMXHetc0/s1600/3.png" title="
ponha aqui um titulo curto ao passar o mause
" />
ponha aqui um titulo curto da 3° imagem 
<br /><span>
ponha aqui uma descrição da 3° imagem
</span></a></li>
<!-- SLIDE  4-->
<li id="tv4">
<a href="link de destino da 4° imagem"><img height="177" width="354" src="http://1.bp.blogspot.com/-08ZraJ6qhKM/TsHZTTXMLPI/AAAAAAAAC1I/YHVykgJjveM/s1600/4.png" title="
ponha aqui um titulo curto ao passar o mause
" />
ponha aqui um titulo curto da 4° imagem 
<br /><span>
ponha aqui uma descrição da 4° imagem
</span></a></li>
<!-- SLIDE  5-->
<li id="tv5">
<a href="link de destino da 5° imagem "><img height="177" width="354" src="http://2.bp.blogspot.com/-hRx64rJgQ30/TsHZWBT6yNI/AAAAAAAAC1Q/HI76b-ClaCs/s1600/5.png" title="
ponha aqui um titulo curto ao passar o mause
" />
ponha aqui um titulo curto da 5° imagem 
<br /><span>
ponha aqui uma descrição da 5° imagem
</span>
</a></li>
</ul>


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


Editando e entendendo o código:
background:url("http://4.bp.blogspot.com/-kMJ1P90OoHo/TsHUfQUVtlI/AAAAAAAAC0w/5OozYPc-tgo/s1600/background.png") : edite ponha uma imagem de sua escolha...não altere o tamanho!


link  de destino da imagem: Ponha o link de destino da imagem (para a pagina de destino).


ponha aqui um titulo curto ao passar o mause: Esse titulo aparece quando se passa o mause em cima dele (imagem).



ponha aqui um titulo curto da  imagem: Esse titulo aparecera no topo! por isso tem que ser curto!

ponha aqui uma descrição da  imagem: Essa descrição ficara em baixo da imagem!!! aqui você pode por toda a descrição à bastante espaço.

0 comentários:

Postar um comentário