Como colocar Gadget de Publicidade!

Olá meus amorecos! uhsuahsuahusa
A pedido da nossa leitora Giovanna, vou ensinar à fazer um gadget de publicidade como a que temos ali em cima das postagens. O tutorial vai ser longo, por isso, tenha paciência e vamos fazer Passo a Passo.
Primeiro, use essa imagem como base para criar o seu próprio gadget:

Bom, salve essa base no seu computador e então edite em algum editor de imagens de sua preferência. 

Agora vamos fazer o slide de anuncios. Para isso, edite essa base aqui:

Salvem essa base 3 vezes e vá editando. Agora, copie o código abaixo e edite de acordo com o que se pede (em negrito)  

<div style="background:url(Url da imagem rosa aqui) right no-repeat; height: 100px; width: 532px;"><div style='float:right; padding-top:19px; padding-right:0px;'><style type="text/css">
#slider {
width: 522px;
height: 78px;
position: relative;
overflow: hidden;
}
#sliderContent {
width: 522px;
position: absolute;
top: 0px;
margin: 0px;
padding: 0px;
}
.sliderImage img{
width: 522px;
height: 78px;
}
.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
});
});
</script>
<div id="slider">
<ul id="sliderContent">
<li class="sliderImage">
<a href="Link 1"><img src="Banner 1" border="0"/>
<span class="top"></span></a>
</li>


<li class="sliderImage">
<a href="Link 2"><img src="Banner 2" border="0"/>
<span class="top"></span></a>
</li>


<li class="sliderImage">
<a href="Link 3"><img src="Banner 3" border="0"/>
<span class="top"></span></a>
</li>


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

Explicando: Link 1 é o link do primeiro anúncio, Link 2 do segundo e assim por diante. 

Onde está escrito Banner 1 é a url da imagem do primeiro anúncio, Banner 2 do segundo e assim por diante.

Pronto, agora é só ir em seu blog, adicionar um gadget HTML/JavaScript e colar o código que você editou no bloco de notas. Depois é só arrastar o gadget para cima das postagens e clicar no botão "Salvar". Fim.

Espero que tenham gostado do tutorial, e se usar, por favor, por favor, por favor, por favor, por favor, por favor, por favor, por favor, por favor, por favor, por favor, por favor, por favor, por favor, por favor, por favor, por favor, por favor, por favor, por favor, por favor, por favor, por favor, por favor, por favor, por favor, por favor credite tá? Fui eu basicamente "criei" o código, então por favor credite se usar. E não copie o tutorial senão eu nunca mais posto nada! NADA! 

Beijos. Até o próximo post! (eu tenho uma ideia de próximo post :)