Customizando o gadget slide II
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script src="http://www.google.com/uds/solutions/slideshow/gfslideshow.js"
type="text/javascript"></script>
<style type="text/css">
#picasaSlideshow {
width: 250px;
height: 200px;margin-bottom: 5px;padding: 5px;border: 5px solid #000;}
</style>
<script type="text/javascript">
google.load("feeds", "1");
function OnLoad() {
var feed = "Coloque aqui a URL do FEED";
var options = {
displayTime:2000,
transistionTime:600,numResults : 8,scaleImages:true,maintainAspectRatio : false,};
fullControlPanel : true,
var ss = new GFslideShow(feed, "picasaSlideshow", options);
}
google.setOnLoadCallback(OnLoad);
</script>
<div id="picasaSlideshow" class="gslideshow"><div class="feed-loading">Loading...</div></div>
<a href="http://templatesparanovoblogger.blogspot.com/2009/07/customizando-o-gadget-slide-ii.html">Custom Slideshows.</a>
Copie este código, vá em Layout e clique em Adicionar Elemento de Página. Escolha entre as opções o gadget HTML/JavaScript e cole o código, salvando-o e arrastando para a sidebar ou para qualquer outra parte em que desejar mostrar o slide no blog (sobre os posts, em crosccol, abaixo dos posts, footer, etc).
O que deve ser modificado no código:
O primeiro a fazer é obter a url do feed do album que pretende exibir. Se for um album do Picasa, a url deve se apresentar desta maneira:
http://picasaweb.google.fr/data/feed/base/user/NAME/
albumid/NUMBER?kind=photo&alt=rss&authkey=KEY&hl=en
como obter a url do feed do album do Picasa
Você poderá exibir albuns do Flickr, Photobucket, Tinypic, ImageShack...bastando copiar e colar a url do feed no local indicado no código.
O que está em destaque na cor verde é o que você pode alterar em relação ao tamanho, bordas e espaçamento do slide.
Para alterar o número de imagens a serem exibidas, modifique o número neste trecho:
numResults : 8
Para controlar o tempo de transição das imagens :
displayTime:2000,
Para que haja um link na imagem que leve ao album original, acrescente (justo após displayTime:2000, nos códigos em azul):
linkTarget : google.feeds.LINK_TARGET_BLANK,
Por padrão, a transição das imagens faz uma pausa quando se coloca o cursor do mouse sobre uma imagem. Você pode modificar isso acrescentando a seguinte linha:
pauseOnHover : false
Para mostrar miniaturas das imagens em tamanho médio, acrescente:
thumbnailSize : GFslideShow.THUMBNAILS_MEDIUM
Para mostrar miniaturas em tamanho pequeno:
thumbnailSize : GFslideShow.THUMBNAILS_SMALL
Para mostrar o Painel de Controle com ícones pequenos (o painel aparece quando se passa o cursor do mouse sobre o slide), acrescente estas linhas, nesta ordem:
fullControlPanel : true,
fullControlPanelSmallIcons : true,
Para saber mais, visite a página do Google AJAX Feed API
13 comentários:
Muito Obrigado, essa dica quebrou meu galho.
Procurava exatamente por isso, não poderia estar melhor explicado
valeu por essa dica
mas eu queria saber se foi desse jeito q vc fez o do seu template?
F3N1X, que bom que gostou, fico contente em poder ajudar :)
yukiharuna o que eu uso aqui no TNB é este: http://templatesparanovoblogger.blogspot.com/2009/02/colocando-um-slide-no-blog.html
Ótima dica, assim como todas as que estão aqui...
Mas... vc saberia dizer o pq que as imagens perdem resolução?
Eu formatei minhas fotos com as medidas width: 800px e height:200px, e no código HTML de exibição do slide, coloquei exatamente as mesmas medidas, mas mesmo assim as fotos não ficam tão nítidas...
Meu blog de testes é este: http://mablogteste.blogspot.com/
Grande abraço...
Daniele
ARIANE EU AM TUDO POR AQUI VC É DEMAIS, PEGUEI ALGUMAS DICAS SUAS E POSTEI N MEU BLOG MAS LHE DEI S DEVIDS CRÉTIDOS E ATE TENHO SEU LINK E O INDICO PARA MEUS VISITANTES, SE PUDER DE UMA PASSADINHA PR LA E CONHEÇA MEU CANTINHO E SE CASO S CONTEÚDOS QUE UTILIZEI NÃ PUDEREM SER DIVULGADOS LA, ME AVISE QUE EU OS RETIRO OK?? BEIJOS AMADA.
http://cantinhodoblogger.blogspot.com/
Prezada Ariene
Talvez vc poderia me ajudar. Existe uma gadget para o iGloogle que eu gostei muito do seu formato, pois eu posso escolher o album do picasa. Mas não consegui colocá-lo no meu blog. Entrei em contato com o seu desenvolvedor (Kevin), mas suas dicas não foram úteis.
o link da gedget do iGloogle é:
http://www.google.com/ig/adde?hl=pt-BR&moduleurl=http://www.google.com/ig/modules/pwa.xml&source=imag
atenciosamente
Miguel pu2mnq@gmail.com
sabe porque o código que você forneceu anteriormente não funcionou para alguns usuários?
a questão é: o usuario tem um slide que nao tem a id slide1. ele pode ter adicionado dois slides e depois exclui. daí o id do slide continuou 2 ou 3 e etc. comigo funcionou perfeitamente mais depois de eu coorigir esse 'bug'.
Ariane, boa noite.
Tô vendo que vc entende bastante disso. Parabéns!
Estou montando um BLOG mas quero ele com cara de site. Já fizemos algumas modificações no modelo origianl, mas muito ainda precisa ser descoberto.
O slide da página, teima em ficar sempre com uma cor, mas quero mudar a cor. Há possibilidade?
www.plantaoreporter.com
Acredito muito que vc poderá me dar uma força. Forte abraço.
meu contato : gkjornalista@hotmail.com
Aguardo. Gilkleber
Oh teacher querida... salvando meu dia mais uma vez. Obrigada ♥♥
Não tem Como melhorar a qualidade da imagem, quando fica grande não???
Olha, eu gostaria de saber como personalizar os titulos do gatgets tipo colocar uma imagem lega, uma moldura e dentro dessa moldura o Gatget saka? tipo aqui o ,Quem sou eu, Rcomendados (Metablogs). Se puser me ajudar Ariane eu agradeço ♀♪►
sai muito ruim a qualidade de imagem neste slide
muito boa essa postagem nota 10! mas eu queria lhe perguntar se não tem alguma maneira de melhorar a qualidade das imagens pois fica meio embaraçado, será que não tinha algum jeito?
Postar um comentário
Os comentários são moderados.