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:
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 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.
As vendas de Smartphones estão aumentando. Segundo estudo, realizado pela empresa de pesquisas In-Stat, muitas pessoas vão utilizá-lo como substituto do notebook, além de ultrapassá-lo vendas até 2012. (Referência: InfoOnline)
