Slide de Publicidade

Olá Pessoal, hoje estarei ensinando a vocês como adicionar um slide de anúncios em seu blog no tamanho 468x60 que é o mais comum, esse slide tem um efeito bem legal e pode ser usado até para outros fins. Confesso que eu não sou muito fã de slides em blogs pois a maioria deles pesa muito no carregamento do blog, mas esse slide é super leve e pode ser adicionado no blog sem preocupação nenhuma, eu mesmo estou usando aqui no PB em nossa sidebar, o código é simples e fácil de instalar, vamos ao tutorial.
Demonstração
Vamos la, procure por :

]]></b:skin>
Antes da tag cole o codigo :

#slider { width: 300px; /* Largura das as imagens */
height: 250px; /* Altura das as imagens */
position: relative;
overflow: hidden;
}
#sliderContent {
width: 300px; /* Largura das as imagens */
position: absolute;
top: 0px;
margin: 0px;
padding: 0px;
}
.sliderImage img{
width:300px; /* Largura das as imagens */
height: 250px; /* Altura das as imagens */
}
.sliderImage {
float: left;
position: relative;
display: none;
}
.sliderImage span {
position: absolute;
font: 10px/15px Arial, Helvetica, sans-serif;
padding: 1px 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;}

Depois procure por:
</head>

Antes da tag cole o codigo :
<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: 10000 /*Representa em milesimos de segundo o tempo de troca de imagem*/
});
});
</script>Agora basta colar este código onde deseja que o menu apareça:


<div id="slider"> <ul id="sliderContent">
<li class="sliderImage">
<a href="LINK DA PUBLICIDADE" target='_blank'"><img src="URL DA IMAGEM DE PUBLICIDADE" border="0"/>
<span class="top">DESCRIÇÃO DA PUBLICIDADE</span></a>
</li>
<li class="sliderImage">
<a href="LINK DA PUBLICIDADE" target='_blank'"><img src="URL DA IMAGEM DE PUBLICIDADE" border="0"/>
<span class="top">DESCRIÇÃO DA PUBLICIDADE</span></a>
</li>
<li class="sliderImage">
<a href="LINK DA PUBLICIDADE" target='_blank'"><img src="URL DA IMAGEM DE PUBLICIDADE" border="0"/>
<span class="top">DESCRIÇÃO DA PUBLICIDADE</span></a>
</li>
<div class="clear sliderImage"></div>
</ul>
</div>
Não esqueça de fazer as alterações nas partes destacadas em vermelho. LINK DA PUBLICIDADE: Link que vai abrir ao clicar no banner. URL DA IMAGEM DE PUBLICIDADE: Endereço do banner. DESCRIÇÃO DA PUBLICIDADE: Escreva sua descrição sobre o anúncio.

Créditos Claudio Luiz