Cursos 24 Horas - Cursos 100% Online com Certificado

Rotacionando imagens com Scriptaculous

Rotacionar imagens serve para diminuir o espaço ocupado por elas no template, elas seram exibidas de forma aleatória facilitando a colocação em qualquer espaço disponível, e também o efeito é muito bonito e pode ser aplicado para parceiros ou mesmo para exibição de papeis de parede veja como é fácil aplicar este efeito ao seu Blog :

1.Faça login no Blogger

2.Vá para Layout->Editar html



Obs: Se você já tem o Scriptaculous no seu blog pule este passo 2, e vá para o próximo para evitar a dublicidade de scripts.


Agora utilizando as teclas Ctrl e F que ajudam bastante na procura de códigos, encontre o código abaixo:
</head>

Agora acima do código de anterior coloque o código abaixo:
<script type='text/javascript' src='http://www.google.com/jsapi'></script>
<script type='text/javascript'>
google.load("prototype","1.6.0.3");
google.load("scriptaculous", "1.8.2");
</script>

Salve as alterações.

Adicionando Imagens ao script


1.Vá para Layout->Elementos da página->Adicionar um Gadget

Agora selecione html/JavaScript e como conteúdo coloque o código abaixo fazendo algumas alterações:
<div style="height: 200px; text-align: center; width: 100%;">
<div class="slide" id="slideshow1">
<div>
<img src="URL_DA_IMAGEM" /></div>
</div>
<div class="slide" id="slideshow2" style="display: none;">
<div>
<img src="URL_DA_IMAGEM" /></div>
</div>
<div class="slide" id="slideshow3" style="display: none;">
<div>
<img src="URL_DA_IMAGEM" /></div>
</div>

</div>

<script type="text/javascript">

start_slideshow(1, 3, 2000);

function start_slideshow(start_frame, end_frame, delay) {
setTimeout(switch_slides(start_frame,start_frame,end_frame, delay), delay);
}

function switch_slides(frame, start_frame, end_frame, delay) {
return (function() {
Effect.Fade('slideshow' + frame);
if (frame == end_frame) { frame = start_frame; } else { frame = frame + 1; }
setTimeout("Effect.Appear('slideshow" + frame + "');", 850);
setTimeout(switch_slides(frame, start_frame, end_frame, delay), delay + 850);
})
}
</script>

Nota: O código em vermelho é o total de imagens que o script está executando mude de acordo com a quantidade de imagens ex: 10.Adicione abaixo do código em azul o código abaixo para adicionar mais imagens ao script veja :
<div class="slide" id="slideshow4" style="display: none;">
<div>
<img src="URL_DA_IMAGEM" /></div>
</div>

E para adicionar mais além dessas que citei repita o mesmo código mudando o número em amarelo em ordem crescente 1,2,3,4,5... e assim vá adicionando.
E no código em verde adicione a url da imagem ex: http://i30.tinypic.com/zx1fn8.png ; para transformar a imagem em um link substitua o <img src="URL_DA_IMAGEM" /> por <a href="url-do-site"><img src="url-da-imagem"/></a> . Agora deixe um comentário mostrando a sua experiência com o script.

    Deixe o seu comentário

    Postar um comentário

    Deixe seu comentário aqui
    Para exibir sua foto, escreva o seu comentário e clique em "Visualizar" e em seguida clique em "Adicionar Foto de Perfil"(Só é exibido quando o comentário é publicado como Conta do Google). Para editar seu perfil Clique aqui.