Como fazer Apresentação de Slides com Banners

Vamos criar uma apresentação de slides com banners no seu blog, o código é um pouco longo, mas depois de instalar você verá que adicionar mais banners ou trocar os que já colocaram é muito simples de fazer é igual a mudar um banner comum. Já publicamos outro código pode ser utilizado para mostrar os banners deslizando pela pagina que também pode criar um bom efeito visual no seu blog.

Veja aqui uma demostração em nosso outro site com uma apresentação de slides com banners se você quiser ver o código em funcionamento, lá também poderá fazer o download dos arquivos javascript usados neste código.

Para colocar esses slides no seu blog entre na pagina Designer (layout), clique para adicionar um gadget, escolha a opção HTML/javascript e cole o código abaixo:


<style type="text/css">
#slider {
width: 400px; /* Largura das as imagens */
height: 300px; /* Altura das as imagens */
position: relative;
overflow: hidden;
}
#sliderContent {
width: 150px; /* Largura das as imagens */
position: absolute;
top: 0px;
margin: 0px;
padding: 0px;
}
.sliderImage img{
width: 400px; /* Largura das as imagens */
height: 300px; /* Altura das as imagens */
}
.sliderImage {
float: left;
position: relative;
display: none;
}
.sliderImage span {
position: absolute;
font: 10px/15px Arial, Helvetica, sans-serif;
padding: 10px 13px;
width: 100%;
background-color: #000;
filter: alpha(opacity=70);
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
color: #fff;
display: none;
}
.clear {clear: both;}
.sliderImage span strong {font-size: 14px;}
.top {top: 0px;left: 0px;}
.bottom {bottom: 0px;left: 0px;}
ul { list-style-type: none;}
</style>
<script src='http://dl.getdropbox.com/u/1659986/jquery.js' type='text/javascript'></script>
<script src='http://dl.getdropbox.com/u/1659986/s3Slider.js' type='text/javascript'></script>
<script type="text/javascript">
$(document).ready(function() {
$('#slider').s3Slider({
timeOut: 3000 /*Representa em milesimos de segundo o tempo de troca de imagem (neste caso temos 3 segundos)*/
});
});
</script>
<div id="slider">
<ul id="sliderContent">

<li class="sliderImage">
<a href="http://dicasparablogs.net"><img src="http://acessoriosparablogs.com.br/dicas/banneranime.gif" border="0"/>
<span class="top">Dicas</span></a>
</li>
<li class="sliderImage">
<a href="http://frasescurtas.com.br"><img src="http://acessoriosparablogs.com.br/dicas/dicas4.jpg" border="0"/>
<span class="top">Frases</span></a>
</li>

 
<div class="clear sliderImage"></div>
</ul>
</div>

Esse código é somente para banners(imagens e links) se para fazer o mesmo com postagens do blog temos outro código no tutorial sobre criar uma apresentação de slides com as postagens recentes do blog.

Veja que a parte final do código é igual qualquer HTML, portanto para trocar os banners ou usar mais só precisa colocar os códigos nesta parte, e claro troque também o endereço do site e o texto que aparece sobre ele:

<li class="sliderImage">
<a href="http://frasescurtas.com.br"><img src="http://acessoriosparablogs.com.br/dicas/dicas4.jpg" border="0"/>
<span class="top">Frases</span></a>
</li>

Mas alguns cuidados são necessários você deve usar banners todos do mesmo tamanho, porque se não forem iguais o código irá distorcê-los, então use um programa para editar as imagens antes de hospedar seus banners.

Outras partes importantes do código que você precisa alterar:

Para ajustar o tamanho da imagem procure esse trecho no código:
width: 400px;
height: 300px;
Ele aparece duas vezes então deve modificar para as dimensões das imagens que utilizará.

Tempo dos slides, isso você controla neste trecho: timeOut: 3000, basta mudar o valor, lembre que 3000 equivalem a 3 segundos, então deixe como desejar.

Mais uma coisa existe dois códigos javascripts que utilizados neste código que estão hospedados no site getdropbox.com:

<script src='http://dl.getdropbox.com/u/1659986/jquery.js' type='text/javascript'></script>
<script src='http://dl.getdropbox.com/u/1659986/s3Slider.js' type='text/javascript'></script>

Se quiser você pode baixar esses arquivos e hospedar você mesmo como já dissemos você pode baixa-los no link de nossa pagina de demonstração que está no inicio desta postagem, assim caso esses sejam deletados ou tenham algum problema você poderá substituí-los. Isso é útil principalmente por se tratar de um site de hospedagem grátis se muitos blogs usarem o mesmo arquivo ele pode ser apagado.