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>

Comentários

webflow21 disse…
Olá Mateus Antônio, será que seria possível você colocar uma imagem de exemplo?

Obrigado e parabéns pela dica!!!
Halleth disse…
Parabéns pelo blog,encontrei muitas coisas que me ajudaram a esclarecer minhas duvidas,quando tiver um tempo de uma passada no www.assuntointerno.blogspot.com
Este comentário foi removido pelo autor.
Olá Matheus
Você autorizou a repostagem ou divulgação na íntegra, do teu blog no (http://mp3filmescdmusicasjogos.blogspot.com/2009/09/dicadedica_21.html)?
Porque achei estranho: meu blog inteirinho está sendo republicado lá sem minha autorização, e nem sabia da existência do tal blog. Penso que rouba feeds, já que encontrei o link quando estava editando o meu FeedBurner e checando o uncommom uses. E por acaso, vi outros blogs e sites conhecidos. Como não sei o que está acontecendo, resolvi te perguntar. Se puder me responder, te agradeço pois estou intrigada e outros blogueiros não me responderam nada!
Mateus Tavares disse…
Vera,
não autorizei e so autorizo se deixar o link de volta para o post original
Rodolfo Gomes disse…
Este comentário foi removido pelo autor.
Anônimo disse…
vey, to testando esse seu slide, gostei muito
só preciso sabe como faço pra aumentar o tamanho da tarja com o texto
mas ate agora tudo ok, abraços
Ézio Bessa disse…
Oi Mateus,
Eu sequi estes passos porém ele só funionou em um dos meus blogs. No outro blog com dominio personalizado a imagem fica estática. Não funciona.
Este erro tem realmente haver com o fato do meu blog ter dominio personalizado? Qual seria a outra alternativa pra por um slide (destaque de noticias) desses nele? Obrigado!
webflow21 disse…
É provavel que os arquivos JS nao estejao funcionando, voce tera que baixar os arquivos

http://dl.getdropbox.com/u/1815091/Slider/mootools.v1.11.js

http://dl.getdropbox.com/u/1815091/Slider/jd.gallery.js

e hospedar no seu dominio mudando o para o novo endereço no codigo...

ou usar outro slide show em jquary, veja alguns no link http://www.queness.com/post/222/10-jquery-photo-gallery-and-slider-plugins
Ézio Bessa disse…
Valeu Moises, obrigado cara

Ja identifiquei o problema.
O JQuery tava dando conflito com o script do meu menu que é Ajax ;/
quando tiro o menu o slide funciona normal e vice versa.
tem alguma forma de eu usar os dois sem dar conflito?

vlw champs
noEnigma disse…
http://dl.getdropbox.com/u/1815091/Slider/mootools.v1.11.js, bem verdade... esses arquivos ja nao funcionam nemo link... :((( como baixa-los, agora? obrigado pela atençao
HiagoCPS disse…
Não estou entendendo o que acontece, instalei o menu em meu blog, mais quando entra aparece a imagem, descrição e título, mais não o menu de slides. Como se fosse html básica. Gostaria de saber o que está acontecendo.
meus parabéns...muito bom essa explicação...vou por em meu blog ;)
@NadaDeTedio disse…
Opa, queria saber se tem como deixar o slide somente na home do blog, obrigado.

www.nadadetedio.com
@NadaDeTedio disse…
É possível deixar esse slide apenas na página inicial do blog?
Armando Arêde disse…
show de bola !! www.lagosesportivo.com.br