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.

Colocamos em nosso outro site 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.

Compartilhe - Redes Sociais

Link para esta página
<a href='http://www.dicasparablogs.com.br/2010/07/como-fazer-apresentacao-de-slides-com.html'>Como fazer Apresentação de Slides com Banners</a>

Recomende por E-mail