Como colocar um slide no blog

Um Slide bonito e agradavel é indispensável para blogs de noticias, mas indenpendente do nicho em que seu blog atua, este slide pode ser um aliado para deixar seus melhores posts em destaque. Este Slide não deixará seu blog pesado, e irá se ajustar automaticamente ao tamanho de sua pagina  além de possuir setas de para esquerda e direita.




Veja o slide funcionando em 2 Blogs: Clique aqui ou Clique Aqui

Antes de começar recomendo que faça um backup do seu template.

Colocando Slide no Blog

1.Entre em Layout > Editar HTML

Adicione o código abaixo antes de </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>

2. E esta parte acima de ]]></b:skin> Clique para ver o Codigo!

3. Agora vá até Layout > Elementos da pagina:

Crie um novo elemento HTML / JavaScript com o seguinte codigo:

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

4. Agora adicione as URLS de suas imagens e os titulos nos locais indicados em vermelho no codigo,

5. Salve e veja o resultado

Se quiser adicionar mais imagens copie o código abaixo e cole entre: <div id="myGallery"> & </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>