Tutorial - Colocando um Slide por Gadget

Boa noite pandas :3

Obaaaaaa, faltam só 4 seguidores para 120, que é a nossa meta! E eu tô preparando uma coisa muito legal, acho que uma batalha de blogs, e quem vencer vai ganhar muita coisa *u* . Mas enfim, o tutorial de hoje é como colocar um Slide por gadget, um modo mais simples pra quem nunca botou um slide no seu blog.

Pra quem não sabe, esse slide é oque eu usei no segundo lay do blog, o lay do Pusheen ^^

E é bem fácil mesmo de colocar esse Slide... 

AAAH, e voces viram que eu coloquei uma caixinha da Ask no blog? Agora fica mais fácil pra vocês :) , já que são preguiçosos U.U

☆ ★ Let's see !   ★ ☆

1. Fazendo o Slide

Crie um gadget HTML/Javascript , e nele 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>

Bom, eu destaquei as partes mais importantes, que é a altura do slide, a largura do slide, a altura das imagens e a largura das imagens. 

E não se esqueçam, AS IMAGENS DEVEM TER A  MESMA LAGURA E ALTURA DO SLIDE!

2. Colocando o slide no cabeçalho

Cole esse código acima do código do slide:

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

Margin-top : Faz com que o Slide suba. Se você que que ele suba muito você vai aumentando o valor, e se você quer que desça, é só você ir diminuindo o número.

Left : Ele é a quantidade de que o Slide vai pra esquerda. É a mesma coisa, se você quiser que ele vá mais pra esquerda é só você aumentar o número, se não, é só diminuir :)

Agora, no final de todo o código, cole:

</div>

Pronto ! Salve, e veja se tá tudo certo ^-^

Espero que tenham gostado... 

Não deixa de comentar :D

Kissus ;*