Dilvugue nosso Blogger

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: 160px; /* Largura das as imagens */
height: 160px; /* 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: 160px; /* Largura das as imagens */
height: 160px; /* Altura das as imagens */
}
.sliderImage {
float: left;
position: relative;
display: none;
}
.sliderImage span {
position: absolute;
font: 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://ermivanmendes.blogspot.com/" target="_blank"><img border="0" src="http://files.oferta-esod.webnode.pt/200000016-4fcbc51bf2/OI.jpg" />
<span class="top">Blogger Ermivan Mendes</span></a>
</li>
<li class="sliderImage">
<a href="http://ermivanmendes.blogspot.com/" target="_blank"><img border="0" src="http://lojasinternet.com/wp-content/uploads/2010/07/lojas-de-informatica-em-brasilia.jpg" />
<span class="top">Tecnologia da Informação</span></a>
</li>
<li class="sliderImage">
<a href="http://ermivanmendes.blogspot.com/" target="_blank"><img border="0" src="http://t2.ftcdn.net/jpg/00/01/18/75/400_F_1187551_CoYW7G5mXUSuaPVcQXdSuxHshsyR2M.jpg" />
<span class="top">Blogger Ermivan Mendes</span></a>
</li>
<div class="clear sliderImage">
</div>
</ul>
</div>
<center>Para divulgar o Blogger de Ermivan Mendes</center>
<a href="http://ermivanmendes.blogspot.com/2011/09/dilvugue-nosso-blogger.html" target="_blank"><center>Clique aqui!!</center></a>

Esse código é somente para banners(imagens e links)
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://ermivanmendes.blogspot.com/"><img border="0" src="http://t2.ftcdn.net/jpg/00/01/18/75/400_F_1187551_CoYW7G5mXUSuaPVcQXdSuxHshsyR2M.jpg" />
<span class="top">Blogger Ermivan Mendes</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>