Tutorial: Slide + Como colocar no cabeçalho !

Yoo ~~

Primeiramente, peço ás postadoras para que pegue o arquivo que eu mandei no e-mail de vocês que é o modelo de postagem que agente usa aqui no BC !

Bom muita gente vem pedindo, de como colocar o slide igual ao do BC, e ainda colocá-lo no cabeçalho ! 

É fácil, só é difícil na hora de colocar no cabeçalho porque você tem que ajustar tudo direitinho.

Vamos lá ?

Enjoy ~~

FAZENDO O SLIDE !

1. Crie uma gadget html e cole :

<style type="text/css"> 

#slider {

width: 550px; /* Largura do slide */

height: 100px; /* Altura do slide */

position: relative;

overflow: hidden;

}

#sliderContent {

width: 550px; /* Largura das as imagens, mesma largura do slide */

position: absolute;

top: 0px;

margin: 0px;

padding: 0px;

}

.sliderImage img{

width: 550px; /* Largura das as imagens */

height: 100px; /* 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%;

filter: alpha(opacity=70);

-moz-opacity: 0.7;

-khtml-opacity: 0.7;

opacity: 0.7;

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="LINK AQUI"><img src="URL DA IMAGEM" border="0"/>

<span class="top"></span></a>

</li>

<li class="sliderImage">

<a href="LINK AQUI"><img src="URL DA IMAGEM" border="0"/>

<span class="top"></span></a>

</li>

<li class="sliderImage">

<a href="LINK AQUI"><img src="URL DA IMAGEM" border="0"/>

<span class="top"></span></a>

</li>

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

</ul>

</div>

Faça as alterações onde eu destaquei e salve ! Lembrando-se as imagens do slide tem que ter o mesmo tamanho que o slide ! 

 COLOCANDO O SLIDE NO CABEÇALHO 

1. Cole o seguinte código acima do código do slide

<div style="position: absolute; margin-top: -100px; left: -200px;">

Margin-top: Diminuir o número, faz com que o menu suba e aumentar faz com que ele desça. Veja que está como negativo, então aumentando e mantendo o sinal, é como diminuir. (por exemplo -200 é menor que -100)

left: É a mesma coisa. Se você diminuir, ele vai para a direita, se aumentar para a esquerda.

Não existe medida certa, você precisa fazer e ir testando até encontrar a que quer.

2. No final do código cole isso:

</div>

3. Salve e veja se está tudo certo !

OBS : Recomendo você deixar a gadget em que você irá colocar no cabeçalho, em cima da gadget de postagem. Assim irá ficar mais fácil.