TUTORIAL: SLIDE DE IMAGENS E NUMERAÇÃO

Yo minna-san! Desta vez trago um tutorial de slide bem legal para vocês meus brigadeiros. Os créditos são do blog, Cherry Bomb. Estive sem tempo para postar, mas agora que tudo se normalizo, posso voltar a postar que nem uma doida rsrsrs. Vamos lá então?
Como disse vou mostrar como fazer um slide simples, com numeração como o que usei no cabeçalho do theme Ice Cream. 

Primeiramente, vá em seu HTML e procure por </head>, copie o próximo código e cole a cima dele.
Ele e meio grandinho então dexei ele dentro de uma caixinha:

<!-- JavaScript Slider Horizontal - Inicio--><br />
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
//Set Default State of each portfolio piece
$(".paging").show();
$(".paging a:first").addClass("active");
//Get size of images, how many there are, then determin the size of the image reel.
var imageWidth = $(".window").width();
var imageSum = $(".image_reel img").size();
var imageReelWidth = imageWidth * imageSum;
//Adjust the image reel to its new size
$(".image_reel").css({'width' : imageReelWidth});
//Paging + Slider Function
rotate = function(){
var triggerID = $active.attr("rel") - 1; //Get number of times to slide
var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide
$(".paging a").removeClass('active'); //Remove all active class
$active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)
//Slider Animation
$(".image_reel").animate({
left: -image_reelPosition
}, 500 );
};
//Rotation + Timing Event
rotateSwitch = function(){
play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
$active = $('.paging a.active').next();
if ( $active.length === 0) { //If paging reaches the end...
$active = $('.paging a:first'); //go back to first
}
rotate(); //Trigger the paging and slider function
}, 7000); //Timer speed in milliseconds (3 seconds)
};
rotateSwitch(); //Run function on launch
//On Hover
$(".image_reel a").hover(function() {
clearInterval(play); //Stop the rotation
}, function() {
rotateSwitch(); //Resume rotation
});
//On Click
$(".paging a").click(function() {
$active = $(this); //Activate the clicked paging
//Reset Timer
clearInterval(play); //Stop the rotation
rotate(); //Trigger rotation immediately
rotateSwitch(); // Resume rotation
return false; //Prevent browser jump to link anchor
});
});
</script><br />
<!-- JavaScript Slider Horizonta - Fim-->

Depois de aplicar o codigo, procure por ]]></b:skin>, e acima dele coloque esse codigo:

/*--Container geral--*/<br />.main_view {<br />float: left;<br />position: relative;<br />}<br />/*--Estilos do container das imagens--*/<br />.window {<br />height:200px; /*-- Altura do Slide (as imagens devem ter a mesma altura */<br />width: 550px;  /*-- Largura do Slide (as imagens devem ter a mesma largura)-- */<br />overflow: hidden;<br />position: relative;<br />}.image_reel {<br />position: absolute;<br />top: 0; left: 0;<br />}<br />.image_reel img {<br />float: left;<br />}<br />/*--Estilos do container da numeração(Não precisa mudar nada aqui)--*/<br />.paging {<br />position: absolute;<br />bottom: 40px;<br />right: -1px;<br />width: 220px;<br />height:41px;<br />z-index: 100;<br />text-align: center;<br />line-height: 40px;<br />-moz-border-radius-topleft: 15px;<br />-moz-border-radius-bottomleft: 15px;<br />-webkit-border-radius-bottomleft: 15px;<br />-webkit-border-radius-topleft: 15px;<br />display: none;<br />}<br />/*--Estilos do link da numeração (Estilo dos numeros)--*/<br />.paging a {<br />outline:none;<br />padding: 5px 10px;<br />text-decoration: none;<br />color: #fff;<br />background: #bad5d9;<br />-moz-border-radius: 17px;<br />-khtml-border-radius: 17px;<br />-webkit-border-radius: 17px;<br />}<br />/*--Estilos do link ativo da numeração--*/<br />.paging a.active {<br />font-weight: bold;<br />color: #fff;<br />background: #b97ac9;<br />-moz-border-radius: 17px;<br />-khtml-border-radius: 17px;<br />-webkit-border-radius: 17px;<br />}<br />/*--Estilos do link hover da numeração--*/<br />.paging a:hover {<br />font-weight: bold;<br />}.feed-links { <br />display: none; }

No código acima, você altera as medidas e as cores da numeração do slide, ok?

Salve as alterações, e vá para Layout, então crie gadget de HTML/Javascript e cole esse codigo dentro:

<div class="main_view">
<div class="window">
<div class="image_reel">
<a href="LINK_1" alt="" ><img src="URL_IMG_1"/></a>
<a href="LINK_2" alt=""><img src="URL_IMG_2"/></a>
<a href="LINK_3" alt=""><img src="URL_IMG_3"/></a>
<a href="LINK_4" alt=""><img src="URL_IMG_4"/></a>
</div></div>
<div class="paging">
<a href="www.blogger.com" rel="1">1</a>
<a href="www.blogger.com" rel="2">2</a>
<a href="www.blogger.com" rel="3">3</a>
<a href="www.blogger.com" rel="4">4</a>
</div></div>

Nesse codigo e onde você coloca suas imagens, e os links lembrando que as imagens devem ter as mesmas medidas do codigo anterior, ou ficara torto e aparecendo bordas. Por exemplo no codigo esta  200 de altura e 550 de largura. Os www.blogger.com não precisa mudar nada, eles  não vão funcionar no slide, é só para aparecer aquela mãozinha do mouse em cima dos números.