Instalando um Slideshow no Blog - JQuery S3lider

Vou explicar aqui como colocar um slide no seu blog. Você vai ver o quanto é fácil e simples a instalação.

Veja imagem demonstrativa:



Só para lembrar, sempre é bom que você faça um Backup do seu template antes de prosseguir para evitar transtornos, caso algo saia errado.

Primeiramente, você já deve saber que para o funcionamento do slide é necessário utilizar dois scripts:

- jQuery

- s3Slider

Clique nos links de cada arquivo acima para fazer o download automaticamente e veja neste artigos, uma relação de Sites para hospedar arquivos javascripts.

Depois de hospedados, você deverá acrescentar os arquivos no seu template.
1. Instalar o arquivo javascript
Vá em "Editar HTML" e procure pela tag </head>
e cole logo abaixo dela o código a seguir, acrescentando as URL dos seus arquivos js já hospedados:

<script src='url do arquivo jquery' type='text/javascript'/>
<script src='url do arquivo s3Slider' type='text/javascript'/>

<script type='text/javascript'>
$(document).ready(function() {
$('#s3slider').s3Slider({
timeOut: 4000
});
});
</script>

Salve as modificações!
2. Inserir o código CSS
Agora procure pela tag ]]></b:skin>
e cole ANTES dela:

/* s3slider
----------------------------------------------- */
#s3slider {
background:#000000; /* edite cor de fundo*/
border:1px solid #1e1125; /* edite borda do slide*/
width: 380px; /* largura total do slide*/
height: 250px; /* altura total do slide*/
position: relative; /* important */
overflow: hidden; /* important */
}
#s3sliderContent {
width: 380px; /* as imagens devem ter a mesma largura ou mais - você pode editar a largura se quiser */
position: absolute; /* important */
top:-14px; /* important */
padding: 0px;
margin-left: 0; /* important */
}
.s3sliderImage {
float: left; /* important */
position: relative; /* important */
display: none; /* important */
}
.s3sliderImage span {
position: absolute; /* important */
left: 0;
font: 20px Trebuchet MS, sans-serif; /*tamanho da fonte do titulos das postagens*/
padding: 10px 0px;
width: 380px;
background-color: #000; /*cor de fundo do slide*/
filter: alpha(opacity=80);
-moz-opacity: 0.8;
-khtml-opacity: 0.8;
opacity: 0.8;
color: #fff;
display: none; /* important */
bottom: 0;
text-align:center;
}
.clear {
clear: both;
}

No código, eu determinei que o slide tenha uma largura de 380px, assim como as imagens.
Notem que todos os campos "width: 380px;" correspondem a largura do slide e das imagens.
Se você for usar imagens com largura maior ou menor que 380px você deverá editar o valor da largura e incluir a mesma largura que tiver a sua imagem.
Não se esqueça disso!
P.S: Não altere nada nos campos onde estão escrito: /* important */

Salve as modificações!
3. Escolhendo o local para instalar o slide
Agora você deve escolher onde quer posicionar o slide.

3.1. Abaixo do cabeçalho:

Um excelente local é em crosscol, que fica logo abaixo do cabeçalho, ou abaixo do menu(caso seu blog tenha um menu instalado abaixo do cabeçalho).

Vá para a aba "design", em "Elementos de Página" verá um campo para "Adicionar Gadget" bem abaixo do cabeçalho do blog, é lá que você irá colar o código do slide que você quer instalar.
Se não houver um campo para "Adicionar Gadget" abaixo do cabeçalho, você terá que fazer algumas modificações no código do template. Siga este artigo e veja como Como Instalar Gadgets abaixo do Cabeçalho

3.2. Acima da coluna de postagens:

Caso queira instalar o slide na coluna acima das postagens, você precisa conferir no painel do blog se no seu template já existe a possibilidade de adicionar um gadget acima da coluna de postagens, através de "Elementos de Página".

Se não houver, você terá que fazer algumas modificações no código. Siga este artigo e veja comoComo instalar gadgets acima da coluna de postagens.

Escolhido o local que ficará seu slide, Clique em "adicionar um gadget", escolha o modo HTML/javascript e cole o seguinte código:

<div id="s3slider">
<ul id="s3sliderContent">
<li class="s3sliderImage">
<img src="link-da-sua-imagem" />
<span>Legenda</span>
</li>
<li class="s3sliderImage">
<img src="link-da-sua-imagem" />
<span>Legenda</span>
</li>
<li class="s3sliderImage">
<img src="link-da-sua-imagem" />
<span>Legenda</span>
</li>
<div class="clear s3sliderImage"></div>
</ul>
</div>

Caso você queira adicionar mais imagens no slide,adicione antes de <div class="clear s3sliderImage"> o código abaixo:

<li class="s3sliderImage">
<img src="link-da-sua-imagem" />
<span>Descrição</span>
</li>

Sempre que quiser acrescentar mais imagens repita sempre o trecho acima.
Se quiser usar o slide como um menu, onde a imagem redireciona para alguma postagem do seu blog, use este código ao invés de usar o código anterior:

<li class="s3sliderImage">
<a href="link-do-post">
<img src="link-da-sua-imagem" />
</a>
<span>Descrição</span>
</li>

Importante: as imagens utilizadas no slide, devem medir o mesmo valor(ou mais)contido na largura (width) e altura(height) do slide Veja exemplo:
#s3slider {

width: 380px;
height: 250px;
Se você usar imagens menores vai ficar desconfigurada apresentação das imagens.
E se for usar imagens maiores, edite os valores em width e height.
Se você for instalar o slide abaixo do cabeçalho (em crosscol) você deve colocar a largura da imagem de acordo com a mesma medida total do seu template. Pode ser a mesma medida que está em "outer-wrapper".
ATENÇÃO:

O slide funciona a base de arquivo javascript e sua funcionalidade pode variar de acordo com o template.Templates que possuem muitos scripts, acabam gerando "conflitos" entre si. Caso este script não funcione em seu blog, faça uma avaliação de quais realmente são mais necessários. Para melhor entendimento, leia este artigo: Por que alguns scripts não funcionam no meu blog.

Caso queira aprender como ocultar ou exibir este slide que você instalou, em determinadas páginas, leia o artigo:

• Ocultar Elementos em Página Específica

Fonte: http://www.mundoblogger.com.br/2009/11/instalando-um-slide-no-blog.html