Colocando Slides no Blogger

Eae galerinha, voltei a postar kkk, o kyo esta sem net no momento, ele ficara um tempo off e sem postar, mas vamos ao tutorial.

Slides, são umas imagens que passam de um tempo em tempo, muito top, estou tentando pegar o efeito de slides da antiga PUNCH!, alguem ae lembra como era top, vamos la.

Primeiro, adicione o seguinte JS abaixo da tag </head>
<script src="http://dl.getdropbox.com/u/1815091/Slider/mootools.v1.11.js" type="text/javascript"></script>
<script src="http://dl.getdropbox.com/u/1815091/Slider/jd.gallery.js" type="text/javascript"></script>

Agora, este CSS acima da tag ]]></b:skin> (esta o link, pois é muito grande o código, e o post ira ficar imenso)
Código

Bom, apos adicionar esse CSS acima da tag marcada, salve e vá em Elementos da Página e crie uma nova widget HTML / JavaScript, e cole o seguinet código nela:

<style type="text/css">
#myGallery
{
width: 100% !important;
height: 250px !important;
}
</style>

<script type="text/javascript">
function startGallery() {
var myGallery = new gallery($('myGallery'), {
timed: true
});
}
window.addEvent('domready',startGallery);
</script>

<div id="myGallery">
<div class="imageElement">
<h3>Titulo da Imagem</h3>
<p>Descrição da imagem</p>
<a href="URL do Post" class="open" title="Read More"></a>
<img alt="Titulo da Imagem" src="URL DA IMAGEM" class="full"/>
<img alt="Titulo da Imagem" src="URL DA IMAGEM" class="thumbnail"/>
</div>

<div class="imageElement">
<h3>Titulo da Imagem</h3>
<p>Descrição da imagem</p>
<a href="URL do Post" class="open" title="Read More"></a>
<img alt="Titulo da Imagem" src="URL DA IMAGEM" class="full"/>
<img alt="Titulo da Imagem" src="URL DA IMAGEM" class="thumbnail"/>
</div>

</div>

Adicione as IMGs e os Titulos/Links nos lugares marcados, para ver uma demonstração clique no link aseguir.

Breve

Créditos SoluçõesBlog, Postado por Ka.