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

21 junho 2009

Customizar o gadget Slide

Quando vi a primeira vez o gadget de slide do Blogger, fiquei toda animada achando que exibiria alguns dos meus albuns de maneira decente mas o que acabou aparecendo na minha sidebar foi isso:


Isso é um slide. Minúsculo. Decepcionante. Tirei do blog.

Mas como sou teimosa, tornei a colocar e comecei a tentar maneiras de transformar aquilo que o Blogger me apresentava, nestes slides que estão em meu blog de testes.

O primeiro é gigante e foi inserido dentro da div crosscol. O segundo tem a largura de main-wrapper e foi inserido acima desta coluna. O terceiro está na sidebar, muito maior que o padrão do Blogger.

Não é possível fazer muita coisa para customizar o slide, além de redimensioná-lo e colocar uma borda para destacá-lo. Pelo menos até agora, não descobri o que mais é possível fazer.

Para redimensionar o slide, acrescente este código no CSS (clique em Editar HTML e acrescente o código em qualquer local antes da tag ]]></b:skin> ):

#Slideshow1 .slideshow-container {
width: 980px;
height:480px;
margin: 10px auto 10px;
padding:0 0 0;
border: 10px solid #000;background: #000}

.slideshow-container a img{position:absolute;top:0;left:0;width:100%; height:100%}

Em width você deve determinar a largura do seu slide, em height a altura. Margin como se apresenta aqui, centraliza o widget  e dá uma distância de 10px para cima e para baixo. Em border você determina a largura e cor da borda. Em .slideshow-container a img width e height devem ser 100% ou a imagem não ocupará toda a largura e altura que você determinou para o slide.

Se você pretende acrescentar mais de um slide, repita o código, mudando apenas #Slideshow1 para #Slideshow2.

Mas Ariane, eu não quero um slide enorme em todas as páginas do meu blog, só na home, comofas?

Depois de inserir o slide e fazer as modificações, clique em Expandir Modelo de Widget e encontre este trecho, acrescentando o que está em vermelho:

<b:widget id='Slideshow1' locked='false' title='Apresentação de slides' type='Slideshow'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<div class='slideshow-container' expr:id='data:widget.instanceId +   &quot;_slideshow&quot;'>
<span class='slideshow-status'>Loading...</span>
</div>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

Pronto, o slide vai aparecer apenas na primeira página.

Há novidades sobre este assunto! Por favor, leia também: Customizar gadget slide II

Artigos Relacionados

18 comentários:

Taillard disse...

Você é ótima!Cada dia tu melhora e dai para frente.
Muito mas muito criativa!
Beijos dessa sua fça de carteirinha

Meri Pellens disse...

Por favor, ensina como fazer para ao clicar no marcador aparecer apenas os títulos das postágens como vc fez aqui, e com imagem na frente.
O povo agradece! Bj.

Elke di Barros disse...

Grande Ariane !!!!!!

Virtualz Downloads disse...

ta dificiu postar um comentário

Taillard disse...

Coisa linda ,linda e linda minha querida Ariane!!!
Ficou joia e estou tentando colocar as fotos do meu album aqui,diretamente da minha pasta do flick.
Pois eu não consigo de forma alguma colocar um slider fixo pessoal!
Beijockasss

Gem@ disse...

Te felicito por el nuevo diseño del blog Ariane, me encanta :)

Brechó Maluco disse...

Infelizmente ainda não descobri como coloco as fotos que eu quero do meu album fica aparecendo aquela padrão SUNSET... AFF, desculpe a burrice... sou mega amadora...

Rafaela Regis disse...

Ariane...

Gostaria de fazer slides so usando as fotos ja postadas no blog, é possivel??

Não tenho as fotos no meu pc keria usar as que ja tem no blog! é possivel?

Ariane disse...

Rafaela, quando vc posta uma imagem ela é automaticamente guardada em uma pasta no picasa que você acessa usando o mesmo nome/senha que usa para entrar no blog. Esta pasta geralmente tem o mesmo nome do seu blog então, quando for adicionar o gadget de slide, clique na opção picasa e escolha a pasta com o nome do seu blog.

Hamilton disse...

Olá, só tenho uma apresentação de slides no meu blog, o Slideshow1. Fiz o procedimento co mo indicado, mas nada aconteceu.
Por que terá sido?

luiz disse...

essa dica do slide só na home é tão perfeita que eu tinha blogger com outro tipo de slide e ele aparecia em todas as paginas e usei essa dica e funcionou direitinho obrigado ary

O seu dia-a-dia disse...

eu adicionei a galeria em meu blog, com a origem no meu Flickr na opção Usuário. mas só aparece a primeira foto, ele não fica trocando e nem se eu apertar a seta para os lados.
obrg

Thannillo disse...

poderia dar uma ajuda pra gente fazer esse truque de não aparecer em todas as paginas para outros modelos de slide, é muito chato abrir todas as paginas e ver o slide. alguma sugetão ?

Marketing disse...

O que é CSS??? Obrigada... pois sem saber isso não sei nem por onde começar, bj

Denison disse...

Muito obrigado. Usei o código para ficar só na primeira página, os destaques do meu blog. Funcionou perfeitamente.

Yarick Ivens disse...

a imagem fica em uma qualidade ruim, tem como melhorá-la?

Amanda Fonseca disse...

Adorei a dica! Obrigada!!!

Natalia Boska disse...

Ariane, poderia me direcionar?
Gostaria de fazer em meu blogger, o tamanho da gadget entitulado no blogger de testes http://templatebasic.blogspot.com/, como Apresentação de Slides2, que está na lateral direita, um pouco mais abaixo do que os slides superiores.

Poderia me ajudar?!

Obrigada!!

Postar um comentário

Os comentários são moderados.