Como colocar Slide no blog e no cabeçalho

Olá amores, hoje trouxe esse tuto que ajuda muito o blog e seus leitores, se quiser conferir Leia Mais!

Meninas colocar um slide no seu Blog é bem fácil sem muitas complicações, então come on!

SLIDE

Layout >> Adicionar Gadget >> HTML/JS 

 <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>

Agora é só modificar o que se pede, no caso o que esta destacado no código

COLOCANDO SLIDE NO CABEÇALHO 

Primeiro cole o código a seguir em cima 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.

e depois cole </div> no final 

Créditos: Birthday Cake