Os tutoriais e templates aqui apresentados são voltados para os Modelos de layout (lançados em 2006). A eficácia das dicas aqui apresentadas não foram testadas nos novos modelos de templates do Blogger (2010).

05 julho 2009

Customizando o gadget slide II

Expliquei anteriormente como aumentar o tamanho do slide do Blogger usando CSS e apesar de ter funcionado para mim, parece que algumas pessoas não conseguiram obter o mesmo resultado. Continuei pesquisando sobre o assunto e encontrei uma outra maneira de redimensionar e dar algum estilo para o gadget. O resultado pode ser visto aqui (é o primeiro slide, com borda rosa). O Google AJAX Feed API forneceu o código completo que carrega do slide no blog e com isso é possível fazer algumas modificações:

<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

Artigos Relacionados

13 comentários:

F3N1X disse...

Muito Obrigado, essa dica quebrou meu galho.
Procurava exatamente por isso, não poderia estar melhor explicado

Carola disse...

valeu por essa dica
mas eu queria saber se foi desse jeito q vc fez o do seu template?

Ariane disse...

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

.: Moça Arteira - Dani Pimenta :. disse...

Ó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

Hagia Shopia disse...

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/

Miguel_PU2MNQ disse...

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

Gustavo Valério disse...

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

Plantão Repórter disse...

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

Mamanunes disse...

Oh teacher querida... salvando meu dia mais uma vez. Obrigada ♥♥

Frank Lane disse...

Não tem Como melhorar a qualidade da imagem, quando fica grande não???

Anônimo disse...

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 ♀♪►

jhosé Soares disse...

sai muito ruim a qualidade de imagem neste slide

Daniel Lima disse...

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.