Slide com menu em forma de números

DEMO

Mais um slide para o Blogger/Blogspot. Esse tem um efeito bonito com um menu em números, é leve e de fácil costumização. O único incômodo é que as imagens nele contidas devem ter um tamanho padrão, qe neste caso é de 300px de altura e 980 de comprimento.

Você poderá alterar esses números para isso, altere a numeração que está em vermelho neste primeiro código e consequentemente os números que estão em vermelho np último código.

Os números em azul representam a barra com os números.
O número em rosa representa a cor selecionada no menu em números.

Para coloca-lo em seu blog vá até o HTML de seu blog e antes de : ]]></b:skin>

Cole o códigoabaixo

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. Estas dicas se aplicam aos templates feitos até junho de 2010. Para reinstalar o antigo template clique AQUI

/* Slide
----------------------------------------------- */
.main_view {
float: left;
position: relative;
}
.window {
height:300px; /*ALTURA DAS IMAGENS-- */
width: 980px;  /*LARGURA DAS IMAGENS-- */
border:1px solid #04272D;
overflow: hidden;
position: relative;
margin: 0 0 20px 0;
}
.image_reel {
position: absolute;
top: 0; left: 0;
}
.image_reel img {
float: left;
}
.paging {
position: absolute;
bottom: 30px;
right: -1px;
width: 400px;
height:41px;
z-index: 100;
text-align: center;
line-height: 40px;
background:  url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5ki_EwSBW5t3Zhg9aYbheQu75gm4svRkbkGO266s2b3FylkxOkz2YHe-L9aU3Ux07uFwvjbJhYXJqc6suLS3sgMjQFNjsp_ECqrxTObu7hYmNIdt-01JGSnzJxzvyXgUK3YxWoe4p4tOy/s0/transparencia.png);
-moz-border-radius-topleft: 25px;
-moz-border-radius-bottomleft: 25px;
-webkit-border-radius-bottomleft: 25px;
-webkit-border-radius-topleft: 25px;
border:1px solid #000;
display: none;
}
.paging a {
outline:none;
padding: 5px 10px;
text-decoration: none;
color: #999;
background: #000;border: 1px solid #000;
-moz-border-radius: 17px;
-khtml-border-radius: 17px;
-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;
}

Agora depois de ]]></b:skin> Cole o código abaixo.

<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
    $(&quot;.paging&quot;).show();
    $(&quot;.paging a:first&quot;).addClass(&quot;active&quot;);
      
    //Get size of images, how many there are, then determin the size of the image reel.
    var imageWidth = $(&quot;.window&quot;).width();
    var imageSum = $(&quot;.image_reel img&quot;).size();
    var imageReelWidth = imageWidth * imageSum;
   
    //Adjust the image reel to its new size
    $(&quot;.image_reel&quot;).css({&#39;width&#39; : imageReelWidth});
   
    //Paging + Slider Function
    rotate = function(){   
        var triggerID = $active.attr(&quot;rel&quot;) - 1; //Get number of times to slide
        var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide

        $(&quot;.paging 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
        $(&quot;.image_reel&quot;).animate({
            left: -image_reelPosition
        }, 500 );
       
    };
   
    //Rotation + Timing Event
    rotateSwitch = function(){       
        play = setInterval(function(){ //Set timer - this will repeat itself every 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
            }
            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;).hover(function() {
        clearInterval(play); //Stop the rotation
    }, 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>

Procure então por: <div id='content-wrapper'>

E cole o próximo código abaixo dele, fazendo as modificações necessárias.

<div id='slide'>
<div class='folio_block'>

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

<a href='AQUI O ENDEREÇO DO LINK 1'><img width="980px"  src='AQUI O ENDEREÇO DA IMAGEM 1' heigth="300px" /></a>
<a href='AQUI O ENDEREÇO DO LINK 2'><img width="980px" src='AQUI O ENDEREÇO DA IMAGEM 2' heigth="300px" /></a>
<a href='AQUI O ENDEREÇO DO LINK 3'><img width="980px" src='AQUI O ENDEREÇO DA IMAGEM 3' heigth="300px" /></a>
<a href='AQUI O ENDEREÇO DO LINK 4'><img width="980px" src='AQUI O ENDEREÇO DA IMAGEM 4' heigth="300px" /></a>
<a href='AQUI O ENDEREÇO DO LINK 5'><img width="980px" src='AQUI O ENDEREÇO DA IMAGEM 5' heigth="300px" /></a>
<a href='AQUI O ENDEREÇO DO LINK 6'><img width="980px" src='AQUI O ENDEREÇO DA IMAGEM 6' heigth="300px" /></a>
<a href='AQUI O ENDEREÇO DO LINK 7'><img width="980px" src='AQUI O ENDEREÇO DA IMAGEM 7'/></a>
<a href='AQUI O ENDEREÇO DO LINK 8'><img width="980px" src='AQUI O ENDEREÇO DA IMAGEM 8' heigth="300px" /></a>
<a href='AQUI O ENDEREÇO DO LINK 9'><img width="980px" src='AQUI O ENDEREÇO DA IMAGEM 9' heigth="300px" /></a>
<a href='AQUI O ENDEREÇO DO LINK 10'><img width="980px" src='AQUI O ENDEREÇO DA IMAGEM 10' heigth="300px" /></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>
<a href='#' rel='7'>7</a>
<a href='#' rel='8'>8</a>
<a href='#' rel='9'>9</a>
<a href='#' rel='10'>10</a>
</div>
</div>

</div>
</div>

Como disse, esse slide é fácil de personalizar, veja outro modelo com fundo...

DEMO deste modelo

Créditos: