Como instalar um slideshow com links para artigos no blogger

Por | 15 de Maio de 2008

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.

22 thoughts on “Como instalar um slideshow com links para artigos no blogger

  1. Iara

    OI
    gostei disso, vou ver se dará certo pra colocar os meus favoritos.

  2. Nuno Santos

    Oi Ricardo,
    Preciso da sua ajuda…
    Eu fiz tudo como está explicado, mas as fotos não passam. Fica sempre na primeira foto sem passar para a seguinte e assim sucessivamente.

    Dá para dar uma dica?

    Desde já Obrigado.

  3. Ricardo Santos

    Olá Nuno! Obrigado pela visita!

    Para te poder ajudar teria de ver o “paciente” e em nenhum dos 3 blogs que existem no teu perfil o vi….

  4. Edmar Pita

    vou fazer um teste agora para instalar essa galeria, abraço 🙂

  5. Mx5 Games

    primeiro eu tenho que ospedar o ficheiro do jeito que ele vem?compactado?e pramim ospedar, pode ser sites de ospedagem de arquivos como rapidshare e megaupload?e depois que eu ospedar o’que eu faço?

  6. Ricardo Santos

    Olá, tens de hospedar o que está dentro do ficheiro por hierarquia, sites como rapidshare e megaupload nao funcionam

    experimenta o geocities

  7. Pooh

    Ola no firefox funciona normalmente

    pq no explorer nao funciona

    desde ja agradeço…

  8. Ricardo Santos Post author

    Olá Pooh, já não estou não uso este slideshow há muito tempo, já experimentaste actualizar o teu Internet explorer? Que versão usas? 6?7?8?

  9. Pooh

    ola primeiramente obrigado pela resposta

    entao cara meu explorer e o 8 ja estranhei nao funcionar

    onde sera q posso achar a soluçao…

  10. Jr.

    Olá – Instalei um template que encontrei no Templates para você

    Acontece que nesse template tem uns links que fica abaixo da postagem e quando clicamos abre uma outra página que nada tem haver com meu blog.

    Veja o que tem:

    First Prev / Next Last

    Já tentei tirá mas não consegui.
    Dá uma dica aí de qual código preciso retirá para não aparecer mais esse link.

  11. Dionne Gonçalves

    Olá, tenho um pouco de noção sobre HTML, portanto,instalei um template em meu blog e neste template tinha um quadro de slide que rodava as notícias postadas ou no meu caso coloquei links para contato, página inicial e tal. Entretanto o slide não passa,fica somente na primeira imagem, gostaria de saber se poderia me ajudar.

    Obs: Serviço – Blogger
    WebSite – http://tst-dgoncalves.blogspot.com

    PS: meu blog utiliza o mesmo template que este aqui –> http://blog.tosemideia.com/ – mas neste funciona.

  12. Ricardo Santos Post author

    Olá Dionne, verifica se os scripts que fazem o quadro de slides estão hospedados, se nãop estiverem terás de os hospedar online.

  13. Ricardo Santos Post author

    Olá Dionne, tens de hospedar os scripts, ao verificar o código fonte do teu blog reparei que não hospedaste os scripts, as referência é esta:

    <script src='http://WWW.TST-DGONCALVES.BLOGSPOT.COM&#039; type='text/javascript'></script>
    <script src='http://WWW.TST-DGONCALVES.BLOGSPOT.COM&#039; type='text/javascript'></script>

    tens de substituir ‘http://WWW.TST-DGONCALVES.BLOGSPOT.COM’ pelo endereço dos scripts que hospedaste.

    Não te posso ajudar muito nisso pois requer conhecimento prévio da tua parte, se estiveres interessada posso disponibilizar algum tempo para “compôr” o teu blog mas não será ajuda gratuita.

    Entra em contacto aqui pelos coemntários se estiveres interessada.

  14. Marlon

    deu isso aki
    *———————————————————*
    Não foi possível analisar o seu modelo, pois sua formatação é inadequada. Certifique-se de que todos os elementos XML estão fechados adequadamente.
    Mensagem de erro em XML: Open quote is expected for attribute “{1}” associated with an element type “src”.
    *——————————————————————————————*
    se alguem souber oq é min add marlon.afonso@hotmail.com

  15. welington

    No meu template naum ta desse jeito= .
    Tá assim > /* sidebar-wrapper. Eu posso add o codigo assim msm q da certo?

    Se puder me ajudar!

  16. SISPMUC

    Olá Ricardo no meu template não achei a div da sidebar. Como faço para saber onde está a div?

    Eu uso o modelo SIMPLE do Blogger. Um abraço

Deixe uma resposta

O seu endereço de email não será publicado. Campos obrigatórios marcados com *