Slide no Blogger


Adicione um slider de noticias no seu blog, siga os passos abaixo e observe o bom resultado.
Clique aqui para ver um exemplo.

Obs: Antes de começarmos recomendo que faça um backup do seu template.


1. Já feito login no Blogger, 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>

E está parte acima de ]]></b:skin>: Clique aqui!

2.Adicione está parte em um elemento HTML / JavaScript :

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

Troque tudo o que for necessário por o que você quiser. 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>
20 comentários

Postagens mais visitadas