Slider Numerado em Jquery para Blogger

Tutorial ensinando a colocar em seu blog  slider numerado em jquery, antes de mais nada esse slide e tutorial foi feito originalmente pela Xtreme Evollution creditos para eles, espero que o pessoal da xtreme não se importe. Então vamos começar.

1. No painel do blog clique em design > Editar HTML
2. Aperte CTRL + F e procure por: 

 ]]></b:skin>

1.  Depois copie o código abaixo e cole acima do ]]></b:skin>

/* Slide by Driigo
----------------------------------------------- */
.main_view {
float: left;
ative;
} 
position: re
l
 solid #0
.window {
height:300px;
width: 980px;
 overflow
border:1p
x00
;: hidden;
elative; 
position: 
r
n: absolute;
top: 0
margin: 0 0 20px 0;
}
.image_reel {
0;
}
.
positi
o; left:
 image_reel img {
ging { 
float: left;
}
.p
a
px;
height:40px;
z-
position: absolute;
bottom: 30px;
idth: 40
0in
right: -1px;

wdex: 100;
 center;
line-heigh
text-align
:t: 40px;
B00000%5DTemplate%20FDMDowns/transparencia.png);
-moz-border-radius-topleft: 25px;
-moz-border-radiu
background:  url(http://dl.dropbox.com/u/32586820/%
5s-bottomleft: 25px;
-webkit-border-radius-bottomleft: 25px;
-webkit-border-radius-topleft: 25px;
border:1px solid #000;
display: none;
}
.paging a {
radius: 17px;
outline:none;
padding: 5px 10px;
text-decoration: none;
color: #999;
background: #000;border: 1px solid #000;
-moz-border-radius: 17px;
-khtml-border
-
-webkit-border-radius: 17px;
}
.paging a.active {
font-weight: bold;
border: 1px solid #000;
color: #fff;
background: #188696;/*COR DE FUNDO DOS NUMEROS ATIVOS*/
-moz-border-radius: 17px;
-khtml-border-radius: 17px;
-webkit-border-radius: 17px;
}
.paging a:hover {
font-weight: bold;
}
/* Fim Slider */

1. Agora você vai procurar por:

 </head>

1.  Depois copie o código abaixo e cole acima

<!-- JS cod -->
<script src='http://dl.dropbox.com/u/32586820/www.xtremeevollution.com/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {

ing&quot;).show();
    $(&quot;.paging a:first&
//Set Default State of each portfolio piece
    $(&quot;.pa
gquot;).addClass(&quot;active&quot;);
      
 then determin the size of the image reel.
    var imageWidth = $(&quot;.window&quot;).
//Get size of images, how many there are
,width();
    var imageSum = $(&quot;.image_reel img&quot;).size();
    var imageReelWidth = imageWidth * imageSum;
   
    //Paging + Slider Function
    rotate =
//Adjust the image reel to its new size
    $(&quot;.image_reel&quot;).css({&#39;width&#39; : imageReelWidth});
   
 function(){   
mageWidth; //Determines the distance the image reel needs to slide

        $(&quot;.pagi
var triggerID = $active.attr(&quot;rel&quot;) - 1; //Get number of times to slide
        var image_reelPosition = triggerID * 
ing a&quot;).removeClass(&#39;active&#39;); //Remove all active class
        $active.addClass(&#39;active&#39;); //Add active class (the $active is declared in the rotateSwitch function)
       
        //Slider Animation
(){ //Set timer - this will repeat itself ev
$(&quot;.image_reel&quot;).animate({
            left: -image_reelPosition
        }, 500 );
       
    };
   
    //Rotation + Timing Event
    rotateSwitch = function(){       
        play = setInterval(functio
nery 3 seconds
            $active = $(&#39;.paging a.active&#39;).next();
            if ( $active.length === 0) { //If paging reaches the end...
                $active = $(&#39;.paging a:first&#39;); //go back to first
            }
(function() {
        clearInterval(play); //Stop the rotation
rotate(); //Trigger the paging and slider function
        }, 7000); //Timer speed in milliseconds (3 seconds)
    };
   
    rotateSwitch(); //Run function on launch
   
    //On Hover
    $(&quot;.image_reel a&quot;).hove
r
    }, function() {
        rotateSwitch(); //Resume rotation
    });   
   
    //On Click
    $(&quot;.paging a&quot;).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>

1. O próximo passo exige conhecimento do seu template, e de onde vc quer colocar, creio que nem em todos os templates ele vai funcionar. 
2. Agora procure o local que deseja adicionar o slider, ex: abaixo do header, no rodape, no header,você precisa saber bem onde quer colocar abaixo do <body> e cole o seguinte código:

<div class='main_view'>
<div class='window'>
l'>

<a href='#'><img he
<div class='image_re
eigth='300px' src='http://dl.dropbox.com/u/32586820/%5B00000%5DTemplate%20FDMDowns/destaques1.jpg' width='980px'/></a>
a href='#'><img heigth='300px' src='http://dl.dropbox.com/u/32586820/%5B00000%5DTemplate%20FDMDowns/destaques2.jpg' width='980px'/></a> 
<
 href='#'><img heigth='300px' src='http://dl.dropbox.com/u/32586820/%5B00000%5DTemplate%20FDMDowns/destaques3.jpg' width='980px'/></a>  
<
a<a href='#'><img heigth='300px' src='http://dl.dropbox.com/u/32586820/%5B00000%5DTemplate%20FDMDowns/destaques1.jpg' width='980px'/></a>
a href='#'><img heigth='300px' src='http://dl.dropbox.com/u/32586820/%5B00000%5DTemplate%20FDMDowns/destaques3.jpg' width='980px'/></a> 
<a href='#'><img heigth='300px' src='http://dl.dropbox.com/u/32586820/%5B00000%5DTemplate%20FDMDowns/destaques2.jpg' width='980px'/></a>


<

</div></div>
<div class='paging'>
<a href='#' rel='1'>1</a>
<a href='#' rel='2'>2</a>
<a href='#' rel='3'>3</a>
<a href='#' rel='4'>4</a>
<a href='#' rel='5'>5</a>
<a href='#' rel='6'>6</a>
</div>
</div>

1.  Agora só salvar seu template.
2. Caso tenha duvidas ou tenha algum erro no tutorial deixe um comentario que responderei o mais rapido póssivel.