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.
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!
<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>
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>
<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
Obrigado e parabéns pela dica!!!
este é o link para o exemplo
http://i38.tinypic.com/25tfer7.png
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!
não autorizei e so autorizo se deixar o link de volta para o post original
só preciso sabe como faço pra aumentar o tamanho da tarja com o texto
mas ate agora tudo ok, abraços
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!
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
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
www.nadadetedio.com