Tweet Slide show jQuery –

NOTA: Esse tutorial foi revisado e atualizado e testado em 28 de janeiro de 2010. Alguns leitores tiveram dificuldade para instalar e, realmente ele requer muita atenção na instalação para que possa funcionar perfeitamente. Boa sorte!

Neste tutorial vamos aprender a editar e inserir no Blogger . É um ótimo recurso para quem deseja expor seus trabalhos, layouts, fotos ou indicar outros sites, etc. As imagens se transformam em links.

Clic na imagem para vê-lo em ação.

Vamos ao tutorial.

Lembre-se de fazer um back up do seu template antes de qualquer alteração.


 
Copie todo o código CSS abaixo e cole acima do trecho (antes de) 

]]></b:skin>

IMPORTANTE!!  Confira!! A largura do slide Show deve ser a mesma ou menor que a do espaço onde será inserido. No modelo “Mínima do Blogger, por exemplo, a largura do Header é 660px. Portando será necessário redimensionar ou o slide ou o template.

CÓDIGO

/* CSS div#slide-holder */
div#headerSlider div.wrapSlider{
width:810px; /*largura do slideshow*/
height:288px;/*altura do slideshow*/
background:#000;
border: 2px solid #333;
padding-top: 10px;
margin: 0 auto;
}
div#headerSlider div#slide-holder{
z-index:40;
height:288px;
position:absolute;
}
div#headerSlider div#slide-holder div#slide-runner{
top:5px;
left:5px;
width:800px; /* largura*/
height:278px; /* altura*/
overflow:hidden;
position:absolute;
}
div#headerSlider div#slide-holder img{
margin:0;
display:none;
position:absolute;
}
div#headerSlider div#slide-holder div#slide-controls{
left:0;
bottom:228px;
width:800px; /* largura*/
height:46px;
display:none;
position:absolute;
background:transparent url(http://i9.photobucket.com/albums/a65/mamanunes/slide-bg.png) repeat scroll 0 0;
}
div#headerSlider div#slide-holder div#slide-controls p.text{
float:left;
color:#fff;
display:inline;
font-size:10px;
line-height:16px;
margin:15px 0 0 20px;
text-transform:uppercase;
}
div#headerSlider div#slide-holder div#slide-controls p#slide-nav{
float:right;
height:24px;
display:inline;
margin:11px 15px 0 0;
}
div#headerSlider div#slide-holder div#slide-controls p#slide-nav a{
float:left;
width:24px;
height:24px;
display:inline;
font-size:11px;
margin:0 5px 0 0;
line-height:24px;
font-weight:bold;
text-align:center;
text-decoration:none;
background-position:0 0;
background-repeat:no-repeat;
color:#ccc;
}
div#headerSlider div#slide-holder div#slide-controls p#slide-nav a.on{
background-position:0 -24px;
}
div#headerSlider div#slide-holder div#slide-controls p#slide-nav a{
background-image:url(http://i9.photobucket.com/albums/a65/mamanunes/silde-navSlider.png);
}

Copie todo o código  abaixo e cole abaixo de ]]></b:skin>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<!-- Javascript div#slide-holder -->
<script type='text/javascript'>var _siteRoot=&#39;index.html&#39;,_root=&#39;index.html&#39;;</script>
<script src='http://blogspot-choen.googlecode.com/files/scriptsSlider.js' type='text/javascript'/>
<script type='text/javascript'>
if(!window.slider) var slider={};slider.data=[{&quot;id&quot;:&quot;slide-img-1&quot;,&quot;client&quot;:&quot;Red Dark *by Mamanunes&quot;,&quot;desc&quot;:&quot;Free Blogger Template&quot;},
{&quot;id&quot;:&quot;slide-img-2&quot;,&quot;client&quot;:&quot;Spiral *by Mamanunes&quot;,&quot;desc&quot;:&quot;Free Blogger Template&quot;},
{&quot;id&quot;:&quot;slide-img-3&quot;,&quot;client&quot;:&quot;Clock In The Wall &quot;,&quot;desc&quot;:&quot;Mamanunes Free Blogger Template&quot;},
{&quot;id&quot;:&quot;slide-img-4&quot;,&quot;client&quot;:&quot;Salto Alto *by mamanunes&quot;,&quot;desc&quot;:&quot;Free Blogger Template&quot;},
{&quot;id&quot;:&quot;slide-img-5&quot;,&quot;client&quot;:&quot;Butterfly *by Mamanunes&quot;,&quot;desc&quot;:&quot;Free Blogger Template&quot;},
{&quot;id&quot;:&quot;slide-img-6&quot;,&quot;client&quot;:&quot;Fly *by Mamanunes&quot;,&quot;desc&quot;:&quot;Free Blogger Template&quot;},
{&quot;id&quot;:&quot;slide-img-7&quot;,&quot;client&quot;:&quot;Menina Jeans *by Mamanunes&quot;,&quot;desc&quot;:&quot;Free Blogger Template&quot;}];
</script>

ATENÇÃO!!

Os textos  em vermelho referem-se ao nome e descrição das fotos. Faça as mudanças com muito cuidado para não apagar nenhuma parte importante. 

Agora copie todo o código HTML abaixo e substiua o endereço em vermelho pelo endereço da sua foto/imagem. O que está escrito “Modelo” (em verde) é o texto que antecede a descrição das fotos, podendo ser trocado pelo que vc quizer.

<!--HTML div#slide-holder-->
<div id='headerSlider'><div class='wrapSlider'>
<div id='slide-holder'>
<div id='slide-runner'>
<a href=""><img id="slide-img-1" src="images/nature-photo.png" class="slide" alt="" /></a>
<a href=""><img id="slide-img-2" src="images/nature-photo1.png" class="slide" alt="" /></a>
<a href=""><img id="slide-img-3" src="images/nature-photo2.png" class="slide" alt="" /></a>
<a href=""><img id="slide-img-4" src="images/nature-photo3.png" class="slide" alt="" /></a>
<a href=""><img id="slide-img-5" src="images/nature-photo4.png" class="slide" alt="" /></a>
<a href=""><img id="slide-img-6" src="images/nature-photo4.png" class="slide" alt="" /></a>
<a href=""><img id="slide-img-7" src="images/nature-photo6.png" class="slide" alt="" /></a>
<div id='slide-controls'>
<p class='text' id='slide-client'><strong>Modelo: </strong><span/></p>
<p class='text' id='slide-desc'/>
<p id='slide-nav'/>
</div>
</div>
<!--content featured gallery here -->
</div>
</div></div>
<!-- End HTML div#slide-holder -->

Onde colar o código HTML

• Para  exibir o slideshow no Cabeçalho (header) do blog, procure em sua folha de estilos (documento HTML) pelo seguinte trecho:

<div id='header-wrapper'>

Cole o código HTML que copiou, abaixo do trecho.

• Para exibir abaixo do Header, procure pelo seguinte trecho:

<div id='content-wrapper'>

Cole o código HTML que copiou, abaixo do trecho

Prontinho.
Clic em VISUALIZAR e se estiver tudo bem clic SALVAR MODELO.


Eu recomendo que você faça o download dos scripts e hospede no Dropbox (site que presta serviço de hospedagem de documentos), Substitua o meu endereço pelo seu, é mais seguro. A Elke do Templates e Acessórios fez um tutorial ensinado como fazer isso. Veja lá:

• jQuery.min.js - Clic para download
• ScriptsSlider.js – Clic para download

Com um pouco de paciência e criatividade, você pode mudar o tamanho do slide, as cores dos botões, enfim, pode deixar do seu jeito.
Espero que você tenha gostado.


Fonte: Slideshow desenvolvido por Dream CSS
Veja também no CODE-CODE-AN (Indonésio)