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.jsjquery.jsslider.jstabber.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('headEnd');
</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: 'mygallery', //id of carousel DIV
beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
panelclass: 'panel', //class of panel DIVs each holding content
panelbehavior: {speed:500, wraparound:true, persist:true},
defaultbuttons: {enable: true, moveby: 2, leftnav: ['
http://web2feel.com/images/rem1.jpg', -14, 120], rightnav: ['
http://web2feel.com/images/rem2.jpg', 0, 120]},
statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
contenttype: ['external'] //content setting ['inline'] or ['external', 'path_to_external_file']
})
</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
