12 de jan. de 2011

Slide Thumbs

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



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>

 

3 comentários:

  1. Oi Elke, antes de mais nada, obrigada pelo tutorial. Bom demais.
    Fia tudo, só tenho uma dúvida, qual o tamanho da imagem que devo utilizar para que não fique distorcida?

    Obrigada, volto para ler a resposta

    ResponderExcluir
  2. Silvia, dê preferência a imagens grandes de mais ou menos 800px. Beijos

    ResponderExcluir

A legislação brasileira prevê a possibilidade de se responsabilizar o blogueiro pelo conteúdo do blog, inclusive quanto a comentários; portanto, o autor deste blog reserva a si o direito de não publicar comentários que firam a lei, a ética ou quaisquer outros princípios da boa convivência. Não serão aceitos comentários anônimos ou que envolvam crimes de calúnia, ofensa, falsidade ideológica, multiplicidade de nomes para um mesmo IP ou invasão de privacidade pessoal / familiar a qualquer pessoa. Comentários sobre assuntos que não são tratados aqui também poderão ser suprimidos, bem como comentários com links. Este é um espaço público e coletivo e merece ser mantido limpo para o bem-estar de todos nós.


Copyright © Templates e Acessórios |
Design by Elke di Barros | Tecnologia do Blogger
    Twitter Facebook Google + YouTube