Slide Thumbs

Encontrei este slide NESTE site. Gostei bastante, fiz algumas modificações e trago para vocês.

DEMO

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

Você precisa ir até o HTML do blog e procurar pelo seguinte código:

 ]]></b:skin>


Troque-o então, por este código abaixo

/*Slide-----------------------------------------------*/
#preview_wrap {
        margin: 0 -10px 0 30px;
    padding: 22px;
    width: 660px;/*LARGURA DO SLIDE*/
    height: 356px;/*ALTURA DO SLIDE*/
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPdme26Hrpa9XUsmGSBoDWgEnBFsUGU0oO0NLpFsqiiq7NXolWvQ0Qh9Up-3jtPo9VQUBzDyT3yhV0NMRvUHIyV6B5voeLf0ffX8gNijnPY2kXMpYZ2xo_cGapM-REoc7KLmzaa_YueZY/s1600/slideback.png) top left no-repeat;
}

#preview_outer {
    overflow: hidden;
    width: 600px;
    height: 364px;
    position: relative;
}

#preview_inner {
    text-align: left;
    height: 100%;
    position: relative;
}

#preview_inner img{
position: absolute;
width: 625px;
height: 360px;
}
#preview_inner div {
    float: left;
margin: 0  20px 0 -20px;
    width: 610px;
    height: 364px;
    position: relative;
}

#preview_inner div a {
    position: absolute;

    bottom: 0;
    left: 0;   
    display: block;
    width: 100%;
    text-indent: 20px;
    padding: 20px 0;
    color: #fff;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSuNH0R5zZ6EFRMJ7DRmOkYBj3H4-2ycqsVmg9DSoSuKSOEu2fByMrQq0yOGM-qlLUebBgaa63Vhb77XEhCU63dez4mJdeVbKred9FsxUUrOYmskijMTFCatHGOXRm_AgNdVt8In5vBuU/s1600/bg_trans.png);
    text-decoration: none;
    font-size: 18px;
}

#thumbs {
background: #fff;
    padding-top: -21px;
margin: 0 -20px 0 30px;
    position: relative;
    width: 640px;
    text-align: center;   
}

#thumbs span {
    padding: 12px;
    width: 80px;
    height: 80px;
    cursor: pointer;
    background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjI2dX_nosQAJkwWIE9SLpHHA1XIVQ-jOYEkXpxhK5zTfxXDjWH8YV54BhYNeIFIa0RgtoAhBhMdsCKy6IIv7lwSlX41nsUYVaDrBDhU0_CpNFns0xGtmpFkrqaGZFfHErKlnw_hcKws-4/s1600/bg_thumb.gif') top left no-repeat;
    display: inline-block;
}

#thumbs span img {
width: 80px;
height: 80px;
}
#arrow {
    position: absolute;
    top: -12px;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikdfoBydW-dWaJCLOZmqCyemRS4aRE8GMfD0dzm_bvgaBblDjIfvR8wtTBkJusEbOo2CaodO790kAzkmjlXHPC_yn02MYCPeGhzfr6fGVVgIA4PufWo4IK4Sru2i6LpT3FeWEKkEqacL0/s1600/Image129.png) top center no-repeat;
    width: 60px;
    height: 29px;
    display: none;}



]]></b:skin>

<!-- SLIDE SLIDE SLIDE -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
    // Save  the jQuery objects for later use.
    var outer    = $("#preview_outer");
    var arrow    = $("#arrow");
    var thumbs    = $("#thumbs span");

    var preview_pos;
    var preview_els    = $("#preview_inner div");
    var image_width    = preview_els.eq(0).width(); // Get width of imaages

    // Hook up the click event
    thumbs.click(function() {
        // Get position of current image
        preview_pos = preview_els.eq( thumbs.index( this) ).position();

        // Animate them!
        outer.stop().animate( {'scrollLeft' : preview_pos.left},    500 );
        arrow.stop().animate( {'left' : $(this).position().left },    500 );
    });

    // Reset positions on load
    arrow.css( {'left' : thumbs.eq(0).position().left } ).show();
    outer.animate( {'scrollLeft' : 0}, 0 );

    // Set initial width
    $("#preview_inner").css('width', preview_els.length * image_width);
});
//]]>
</script>

Agora acima de:

<b:section class='main' id='main' showaddelement='no'>

Cole o próximo código fazendo suas modificações. (Se quiser que o slide apareça nas páginas internas e nas páginas estáticas, apague a parte em rosa)

<!-- SLIDE TROQUE POR SUAS IMAGENS -->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div id='preview_wrap'>
<div id='preview_outer'>
<div id='preview_inner'>

<div>
<img alt='TITULO 1' src='ENDEREÇO DE SUA IMAGEM 1'/>
<a href='ENDEREÇO DO QUER LINKAR EM SUA IMAGEM 1' target='_blank'>ESCREVA ALGO SOBRE SUA IMAGEM 1</a>
</div>


<div>
<img alt='TITULO 2' src='ENDEREÇO DE SUA IMAGEM 2'/>
<a href='ENDEREÇO DO QUER LINKAR EM SUA IMAGEM 2' target='_blank'>ESCREVA ALGO SOBRE SUA IMAGEM 2</a>
</div>
          
<div>
<img alt='TITULO 3' src='ENDEREÇO DE SUA IMAGEM 3'/>
<a href='ENDEREÇO DO QUER LINKAR EM SUA IMAGEM 3' target='_blank'>ESCREVA ALGO SOBRE SUA IMAGEM 3</a>
</div>

<div>
<img alt='TITULO 4' src='ENDEREÇO DE SUA IMAGEM 4'/>
<a href='ENDEREÇO DO QUER LINKAR EM SUA IMAGEM 4' target='_blank'>ESCREVA ALGO SOBRE SUA IMAGEM 4</a>
</div>
       
<div>
<img alt='TITULO 5' src='ENDEREÇO DE SUA IMAGEM 5'/>
<a href='ENDEREÇO DO QUER LINKAR EM SUA IMAGEM 5' target='_blank'>ESCREVA ALGO SOBRE SUA IMAGEM 5</a>
</div>

</div>
</div></div>   

<div id='thumbs'>
    <div id='arrow'/>
    <span><img alt='REPITA O TITULO 1' src='REPITA O ENDEREÇO DE SUA IMAGEM 1'/></span>
    <span><img alt='REPITA O TITULO 2' src='REPITA O ENDEREÇO DE SUA IMAGEM 2'/></span>
        <span><img alt='REPITA O TITULO 3' src='REPITA O ENDEREÇO DE SUA IMAGEM 3'/></span>
    <span><img alt='REPITA O TITULO 4' src='REPITA O ENDEREÇO DE SUA IMAGEM 4'/></span>
        <span><img alt='REPITA O TITULO 5' src='REPITA O ENDEREÇO DE SUA IMAGEM 5'/></span>
     
</div>
</b:if>
</b:if>