19 de set. de 2009

Slide carousel

Para colocar um slide como este abaixo vá seguindo as dicas.;-)




Vá até o HTML de seu blog e acima de:

]]></b:skin>

Cole o código abaixo.

Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo.






#myslides{
background:#2C3133;/*bordas do slide*/
}
.stepcarousel{
position: relative;
overflow: scroll;
width: 600px; /*comprimento do slide*/
height: 265px; /*largura do slide*/
margin: 0px 14px 5px 14px;
background: #515F65;/*cor de fundo do slide*/
}
.stepcarousel .belt{
position: absolute;
left: 0;
top: 0;
}
.stepcarousel .panel{
float: left;
overflow: hidden;
margin: 10px 17px ;
width:220px; /*comprimento das imagens */
background:#202325;/*cor de fundo das imagens*/
height:240px;/*largura das imagens*/
border:1px solid #378AB4;/*cor da borda das imagens*/
}
.stepcarousel .panel p{
text-align: left;
overflow: hidden;
margin: 5px 5px ;
}
.stepcarousel .panel h2{
text-align: left;
height:20px;
overflow: hidden;
margin: 2px 5px ;
font-size:16px;
font-weight:bold;
text-align:center;
font-family:Georgia,century gothic,Arial,verdana, sans-serif;
}
.stepcarousel .panel img{
float: left;
background:#ffffff; /*cor de fundo das imagens*/
margin: 10px 10px 10px 10px;
padding:0px 0px;
}




Agora abaixo de:
]]></b:skin>

Cole o próximo código e depois insira o endereço no local indicado, substituindo o código na cor vermelha pelo endereço de seu scripts hospedados no Drop Box.
glide.js
jquery.js
slider.js
tabber.js


<script src='ENDEREÇO DO SRIPT glide.js' type='text/javascript'/>
<script src='ENDEREÇO DO SRIPT jquery.js ' type='text/javascript'/>
<script src='ENDEREÇO DO SRIPT slider.js ' type='text/javascript'/>
<script src='ENDEREÇO DO SRIPT tabber.js' type='text/javascript'/>
<script type='text/javascript'><!--//--><![CDATA[//><!--
sfHover = function() {
var sfEls = document.getElementById("menu").getElementsByTagName("LI");
var sfEls = document.getElementById("catmenu").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]></script>
<script type='text/javascript'>
if (window.jstiming) window.jstiming.load.tick(&#39;headEnd&#39;);
</script>



Agora este último código cole-o antes de:
<div id='content-wrapper'>

Faça as modificações necessárias colocando suas fotos e os links e salve.


<!-- Myslides -->
<div id='myslides'>
<script type='text/javascript'>
stepcarousel.setup({
galleryid: &#39;mygallery&#39;, //id of carousel DIV
beltclass: &#39;belt&#39;, //class of inner &quot;belt&quot; DIV containing all the panel DIVs
panelclass: &#39;panel&#39;, //class of panel DIVs each holding content
panelbehavior: {speed:500, wraparound:true, persist:true},
defaultbuttons: {enable: true, moveby: 2, leftnav: [&#39;http://web2feel.com/images/rem1.jpg&#39;, -14, 120], rightnav: [&#39;http://web2feel.com/images/rem2.jpg&#39;, 0, 120]},
statusvars: [&#39;statusA&#39;, &#39;statusB&#39;, &#39;statusC&#39;], //register 3 variables that contain current panel (start), current panel (last), and total panels
contenttype: [&#39;external&#39;] //content setting [&#39;inline&#39;] or [&#39;external&#39;, &#39;path_to_external_file&#39;]
})
</script>
<div class='stepcarousel' id='mygallery'>
<div class='belt'>
<div class='panel'>
<a href='ENDEREÇO DO LINK' target='_blanck' title='TEXTO'><img alt='TEXTO AO PASSAR O MOUSE' height='220' src='ENDEREÇO DA IMAGEM' width='200'/>
</a>
</div>
<div class='panel'>
<a href='ENDEREÇO DO LINK' target='_blanck' title='TEXTO AO PASSAR O MOUSE'><img alt='TEXTO' height='220' src='ENDEREÇO DA IMAGEM' width='200'/>
</a>
</div>

<div class='panel'>
<a href='ENDEREÇO DO LINK' target='_blanck' title='TEXTO AO PASSAR O MOUSE'><img alt='TEXTO' height='220' src='ENDEREÇO DA IMAGEM' width='200'/>
</a>
</div>

<div class='panel'>
<a href='ENDEREÇO DO LINK' target='_blanck' title='TEXTO AO PASSAR O MOUSE'><img alt='TEXTO' height='220' src='ENDEREÇO DA IMAGEM' width='200'/>
</a>
</div>

<div class='panel'>
<a href='ENDEREÇO DO LINK' target='_blanck' title='TEXTO AO PASSAR O MOUSE'><img alt='TEXTO' height='220' src='ENDEREÇO DA IMAGEM' width='200'/>
</a>
</div>

<div class='panel'>
<a href='ENDEREÇO DO LINK' target='_blanck' title='TEXTO AO PASSAR O MOUSE'><img alt='TEXTO' height='220' src='ENDEREÇO DA IMAGEM' width='200'/>
</a>
</div>

<div class='panel'>
<a href='ENDEREÇO DO LINK' target='_blanck' title='TEXTO AO PASSAR O MOUSE'><img alt='TEXTO' height='220' src='ENDEREÇO DA IMAGEM' width='200'/>
</a>
</div>

<div class='panel'>
<a href='ENDEREÇO DO LINK' target='_blanck' title='TEXTO AO PASSAR O MOUSE'><img alt='TEXTO' height='220' src='ENDEREÇO DA IMAGEM' width='200'/>
</a>
</div>

<div class='panel'>
<a href='ENDEREÇO DO LINK' target='_blanck' title='TEXTO AO PASSAR O MOUSE'><img alt='TEXTO' height='220' src='ENDEREÇO DA IMAGEM' width='200'/>
</a>
</div>
</div>
</div>
</div>
<!-- /Myslides -->



Querendo trocar as imagens das setas, troque o código que está na cor verde.

Créditos: John Resig

2 comentários:

  1. Elke, eu te amo!!! Vc salvou minha vida estava a procura desse codigo abraço!!!!

    ResponderExcluir
  2. Eita que esse blog ta nojeeeeeeeeeento tcham!
    adorei o fundo e a barra, Super Phoderosa meixxxxmo!

    bjks

    ResponderExcluir

A legislação brasileira prevê a possibilidade de se responsabilizar o blogueiro pelo conteúdo do blog, inclusive quanto a comentários; portanto, o autor deste blog reserva a si o direito de não publicar comentários que firam a lei, a ética ou quaisquer outros princípios da boa convivência. Não serão aceitos comentários anônimos ou que envolvam crimes de calúnia, ofensa, falsidade ideológica, multiplicidade de nomes para um mesmo IP ou invasão de privacidade pessoal / familiar a qualquer pessoa. Comentários sobre assuntos que não são tratados aqui também poderão ser suprimidos, bem como comentários com links. Este é um espaço público e coletivo e merece ser mantido limpo para o bem-estar de todos nós.


Copyright © Templates e Acessórios |
Design by Elke di Barros | Tecnologia do Blogger
    Twitter Facebook Google + YouTube