Galeria animada de artigos em destaque

A apresentação dos melhores artigos do blogue em forma de uma Galeria de Destaques com imagens e animação, não é privilégio de quem usa o Wordpress e paga por hospedagem.

Quem tem um blogue gratuito no Blogspot só por diversão, ou até para tirar uns trocados, também pode utilizar recursos profissionais sem gastar nenhum centavo!

Isso graças a abnegados como o pessoal do estúdio Jon Design, que desenvolveu sob a GNU General Public License a Smooth Gallery, que usa JavaScript, CSS e MooTools, para criar uma Galeria de Destaques animada, com imagens e que pode ser indexada pelo Google.

E também da Blogger Guru americana, Amanda Fazani do Blogger Buster que publicou a técnica original (em inglês) onde baseei este tutorial e que recomendo a leitura.

Porém na dica da Amanda é necessário hospedar alguns scripts e imagens de uma forma que o Blogger não suporta, por isso fiz algumas adaptações que permitem usar a Galeria de Destaques hospedando todos os arquivos no Google Pages ou qualquer outro serviço de sua preferência*.

Aviso: Antes de começar vou advertir que esta não é uma implementação difícil de executar, mas é um pouco trabalhosa. Requer paciência, um certo conhecimento e experiência com os códigos do Blogspot. Por isso não esqueça de fazer um becape do seu template antes de começar.

1 - A primeira coisa a fazer é baixar o pacote com os arquivos necessários para o funcionamento da galeria:

Download JonDesign's SmoothGallery

Se preferir você pode baixar o pacote original diretamente no site do desenvolvedor, mas como o arquivo sofre atualizações constantes, alguns detalhes podem estar diferentes do que é mostrado a seguir.

2 - Em seguida hospede todas as imagens localizadas no diretório SmoothGallery\css\img\ do pacote que você baixou, num local de sua preferência sem alterar os nomes dos arquivos e anote o endereço das imagens.

3 - Abra o arquivo SmoothGallery\css\ jd.gallery.css no bloco de notas ou outro editor de textos e altere o endereço de todas as imagens pelos endereços das imagens que você anotou no passo anterior. Por exemplo:

Onde estiver assim:
background-image: url('img/loading-bar-black.gif');
Deixe assim:
background-image: url('http://URL_DA_IMAGEM/loading-bar-black.gif');

4 - Hospede o arquivo CSS que você acabou de modificar e anote sua URL. Faça o mesmo com os arquivos JavaScript jd.gallery.js e mootools.v1.11.js que estão na pasta SmoothGallery\scripts\ do pacote que você baixou no passo 1.

5 - Chegou a hora de fazer o becape do seu template, pois vamos fazer alterações no código. Entre no modo de edição HTML e clique em Baixar modelo completo.

Na seqüência procure pela tag </head> e logo em seguida cole o trecho de código abaixo, alterando os campos destacados em vermelho pela URL dos arquivos que você hospedou no passo 4:

<script src='http://URL_DO_ARQUIVO/mootools.v1.11.js' type='text/javascript'/>
<script src='http://URL_DO_ARQUIVO/jd.gallery.js' type='text/javascript'/>
<link href='http://URL_DO_ARQUIVO/jd.gallery.css' media='screen' rel='stylesheet' type='text/css'/>

6 - Agora vamos definir as dimensões da Galeria de Destaques, isso vai depender do local onde você pretende posicioná-la, na sidebar ou na coluna principal onde estão os posts.

Ainda na edição HTML procure agora pela tag </b:skin> e logo antes dela insira as linhas abaixo, alterando os valores width e height para refletir a largura e a altura da sua galeria:

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

Visualize para testar e salve o template.

7 - Todos os passos anteriores foram só preparativos técnicos. Agora é que vamos realmente por a mão na massa e criar a Galeria de Destaques.

Abra o bloco de notas ou outro editor de textos de sua preferência e anote as URLs dos artigos que pretende destacar na galeria.

Escolha uma imagem para ilustrar cada um dos artigos a serem destacados e dimensione-as para o mesmo tamanho da galeria definido no passo 6. Hospede as imagens e anote suas URLs.

8 - Crie um novo elemento de página (Gadget) do tipo HTML/JavaScript no local onde pretende posicionar a galeria e preencha com o código abaixo, substituindo os campos apropriados, destacados em vermelho:

<script type='text/javascript'>
function startGallery() {
var myGallery = new gallery($('myGallery'), {
timed: true,
showArrows: false,
showCarousel: false
});
}
window.addEvent('domready', startGallery);
</script>
<div id='myGallery'>
<div class='imageElement'>
<a class='open' href='http://URL_DO_ARTIGO_1'/>
<img class='full' src='http://URL_DA_IMAGEM_1/IMAGEM1.jpg' />
<h3>TÍTULO DO ARTIGO 1</h3>
<p>BREVE DESCRIÇÃO DO ARTIGO 1</p>
</div>
<div class='imageElement'>
<a class='open' href='http://URL_DO_ARTIGO_2'/>
<img class='full' src='http://URL_DA_IMAGEM_2/IMAGEM2.jpg' />
<h3>TÍTULO DO ARTIGO 2</h3>
<p>BREVE DESCRIÇÃO DO ARTIGO 2</p>
</div>
<div class='imageElement'>
<a class='open' href='http://URL_DO_ARTIGO_3'/>
<img class='full' src='http://URL_DA_IMAGEM_3/IMAGEM3.jpg' />
<h3>TÍTULO DO ARTIGO 3</h3>
<p>BREVE DESCRIÇÃO DO ARTIGO 3</p>
</div>
</div>

Salve e está pronto!

Galeria compulsiva de artigos em destaque

OBS: Este recurso pode deixar seu blogue lento, caso o serviço onde os arquivos auxiliares (JavaScripts, CSS e imagens) estão hospedados se tornar instável.

* Por indicação do MalcomTux, parceiro lá do Grupo de Discussão Blogspot Brasil, conheci o serviço 000webhost.com que oferece 250MB de espaço em disco, 100Gb de transferência mensal, PHP, MySQL, cPanel entre outros recursos, tudo na faixa!

OBS2: Sugiro exibir a Galeria de Destaques seletivamente apenas na página inicial do blogue e não nas páginas individuais dos posts, para isso use a dica compulsiva Gadgets só na home do Blogger, ou não.