Como instalar um slideshow com links para artigos no blogger

Várias pessoas, através de email ou através dos comentários aqui no blog pediram-me para explicar como usar um slideshow como o que tenho no cimo da barra lateral do meu blog. Este slideshow é feito com o script SMOOTHGALLERY: uma combinção de JavaScript e Mootools que cria um slideshow de várias imagens com links para um ou mais posts do blog

Neste guia irei explicar como podem fazer um deste slideshows para usarem no vosso blog.

O SmoothGallery pode ser usado de diversas maneiras mas nem todas elas são compativeis com o Blogger/Blogspot, neste guia irão ser explicadas duas maneiras de utilizar este slideshow:

* Slideshow automático (como o que tenho na barra lateral)
* Slideshow manual, onde o visitante clica para mudar de imagem

Pré-requisitos (Importante!)

Precisam de ter acesso a um espaço de hospedagem onde possa hospedar imagens, javaScript e ficheiros CSS. Existem vários serviços de hospedagem gratuitos que permitem isso.

Irá precisar de várias imagens com o mesmo tamanho, neste guia irei utilizar imagens com largura de 200 pixeis e 100 de altura, se utilizar outras dimensões o slideshow não funcionará bem, se quiser utilizar outras dimensões mais á frente irei explicar como o fazer

Como instalar SmoothGallery Slide show?

Primeiro teremos de fazer o download dos ficheiros necessários para que o slideshow funcione, por questões de conveniência coloquei tudo dentro de um ficheiro zip pronto a ser usado, podem fazer fazer o download clicando no seguinte link:.

Download Blogger_SmoothGallery.zip

Depois de terem feito o download, façam o upload dos ficheiros para o vosso serviço de hospedagem mantendo a mesma posição hierárquica dos ficheiros.

De seguida vão ao vosso painel de controlo No blogger, Cliquem em ESQUEMA –>EDITAR HTML HTML e encontrem o seguinte código </head> . Imediatamente antes desse código, coloquem o seguinte codigo substituindo o que se encontra a vermeho com o endereço do vosso serviço de hospedagem:
<script src=’http://endereço/Blogger-SmoothGallery/scripts/mootools.v1.11.js’ type=’text/javascript’/>
<script src=’http://endereço/Blogger-SmoothGallery/scripts/jd.gallery.js’ type=’text/javascript’/>
<link href=’http://endereço/Blogger-SmoothGallery/css/jd.gallery.css’ media=’screen’ rel=’stylesheet’ type=’text/css’/>

De seguida encontrem o seguinte código </b:skin> no vosso tema. Imediatamente antes desse código coloquem o seguinte código:

#myGallery{
width: 200px !important;
height: 100px !important;
overflow: hidden;
}

Adicionar o slideshow ao blog:

Encontrem no código HTML a secção DIV onde a barra lateral começa que se parece com o seguinte código na maior parte dos temas:

<div id=’sidebar-wrapper’>

Imediatamente a seguir ao código acima coloquem o seguinte código:

<script type=’text/javascript’>
function startGallery() {
var myGallery = new gallery($(‘myGallery’), {
timed: true,
showArrows: false,
showCarousel: false
});
}
window.addEvent(‘domready’, startGallery);
</script>

Adicionar imagens e links ao slideshow:

Agora iremos precisar das imagens e links, lembrem-se que têm de ter todas o mesmo tamanho, coloquem as imagens no vosso serviço de hospedagem e anotem os endereços das imagens.

Este último passo é um bocado mais complicado mas nada do outro mundo!

1. Copiem o seguinte código abaixo para o Bloco de notas do Windows
2. Substituam o link das imagens com os links das imagens hospedadas.
3. Substituam os links com os links que querem utilizar.
4. Substituam o texto (entre as tags <h3> e </h3> tags) Com o título do post.
5. Substituam o texto (entre as tags <h2> e </h2> tags) com uma breve descrição do post

<div id=’myGallery’>
<div class=’imageElement’>
<a class=’open’ href=’http://endereço do artigo‘/>
<img class=’full’ src=’http://imagehost.com/your-image1.jpg‘ />
<h3>Titulo 1</h3>
<p>Descrição do artigo 1</p>
</div>
<div class=’imageElement’>
<a class=’open’ href=’endereço do artigo‘/>
<img class=’full’ src=’http://imagehost.com/your-image2.jpg‘ />
<h3>Titulo 2</h3>
<p>Descrição do artigo 2</p>
</div>
<div class=’imageElement’>
<a class=’open’ href=’http://endereço do artigo‘/>
<img class=’full’ src=’http://imagehost.com/your-image3.jpg‘ />
<h3>Titulo 3</h3>
<p>Descrição do artigo 3</p>
</div>
</div>

Depois de terem substituído, copiem-no e coloquem-no logo a seguir ao último código que colocaram no passo anterior.

Depois de terem adicionado o código cliquem ao fundo da página em PRÉ-VISUALIZAR e se tudo correu bem deverão ver o slideshow em funcionamento. Se mostrar algum erro verifiquem os códigos outra vez, uma letra a mais ou a menos faz a diferença. Cliquem em GUARDAR MODELO para finalizar a instalação.

Mudar o slideshow para modo manual:
Para ctivar o modo manual no slideshow substituam o seguinte código:

timed: true, showArrows: false,

Por este:
timed: false, showArrows: true,

Ao efectuarem estas mudanças irão aparecer uma setas semi transparente por cima das imagens para o visitante poder manualmente ver o slideshow

Para modificar as dimensões do sli
deshow no seguinte código mudem os valores a vermelho para os valores que querem utilizar, não se esqueçam que as imagens terão te ter a mesma dimensão:

#myGallery{
width: 200px !important;
height: 100px !important;
overflow: hidden;
}

Créditos
O script SmoothGallery scripts foi desenvolvido por JonDesign e Mootools. Os scripts originais e os disponiblizados aqui são disponibilizados sob os seguintes termos

Guia traduzido por Ricardo Santos a partir do guia disponibilizado em BloggerBuster

Se tiverem dúvidas ou precisem de ajuda comentem.