Pular para o conteúdo principal

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 ;)
Unknown disse…
pow...estranho...no meu bloga de teste funcionou direitinho... (mp3teste.blogspot.com) ...mais na matrix nao deu certo (mp3sambaepagode.blogspot.com) ...pq isso? abraços
Unknown disse…
só vai dar certo se eu pegar essa ultima parte e add num html/javascript ? eu colocando dentro do "editar html" n dá certo n?
@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

Postagens mais visitadas deste blog

Top 5 Programas Gratuitos Para Animar suas Festas

Agora chegando 2009, um ano com muitos feriados e com certeza com muitas festas!!!! Eu quero deixa alguns softwares que vão animar todas elas. Recomendo 5 programas e o Frest on fire é o melhor deles, mais como cada um tem sua utilidade é recomendável variar entre os programas de acordo com o publico da festa. O FrestOnFire que é o clone do Guitar Hero para PC e em português é o melhor para ser usado durante a festa e a qualquer hora, mais veja a lista abaixo esses são na minha opinião os 5 melhores programas gratuitos para animar qualquer festa. Se lembrarem de outros que estou es favor comentar ;) ------ Frets On Fire - (Guitar Hero - Clone Para PC) "Agarre seu teclado e mostre quem é que manda em incríveis solos de guitarra neste jogão emocionante!" - Aproveitando o novo nicho de mercado que o jogo abriu, foi desenvolvido Frets On Fire, seguindo o mesmo estilo de Guitar Hero com duas grandes vantagens: gratuito e em português! Frets On Fire oferece três músicas difere

Maneira fácil de contabilizar as visitas

Sei que muitos blogueiros já sabem, mais essa dica é muito importante para aqueles que estão dando os primeiros passos na blogosfera, listo abaixo os melhores sistemas que achei para contabilizar as visitas de forma gratuita dos meus blogs e sites! Para saber: Quantos usuários online, em que lugar e o que estão vendo no seu site ou blog é só add o elemento de página do site whos.amung.us . De onde estão vindo as visitas, a orígen dos visitantes que acessão seu site coloque o elemento de pagina do site e-referrer . Simplesmente o numero de visitas, tem o elemento de pagina do site amazingcounter . Nenhum desses widgets nunca me deram problemas por isso uso e recomendo sem ganhar nada com isso!!! Se souberem de algo melhor, podem ficar a vontade para postar seus comentários!!! Origem dos visitantes do DicaDeDica! www.e-referrer.com

Papercraft e PaperToys: Animes e Cartoons em Brinquedos de Papel

É uma pena que muitos cartoons e animes que assistimos na internet não encontramos para vender em bonecos no Brasil. Mais isso não impede que a galera que é fã destes animes tenha sua própria miniatura feita pelas próprias mãos, e para ajudar esta galera, eu mostro a galeria que achei dos Brinquedos de papel, chamados de Papercraft dos animes e cartoons mais famosos que está bombando na internet. Vídeo Tutoral PaperCraft Instruções: Como Montar um PapeCraft: 1 - Baixe o pdf do personágem 2 - Tenha instalado uma o leitor de pdf se não tiver baixe e instale aqui 3 - Imprima no modo colorido na folha de papel A4 4 - Recorte as peças seguindo as instruções do arquivo pdf (Peça supervisão de um adulto) 5 - Para melhor resistência cole as peças recortadas em cartolina ou papel cartão... 6 - Dobre as arestas serrilhadas 7 - Cole seguindo o modelo indicado nas intruções... Pronto Galeria PapeCraft Animes Brinquedos de papel todos os níveis: Death Note 1 Light Yagami Baixar RYUK é SHINIGAM