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