Hoje vamos aprender como criar uma galeria de imagens em formato de slide show com o título clicável!
Dica 1: Apesar de parecer, esse não é dos tutoriais mais difíceis, mas vai precisar de muita atenção e cuidado. O ideal seria você criar um blog de testes (se já não tem um) para tentar a instalação antes de fazer o mesmo em seu blog.
Dica 2: Se vai instalar a galeria em seu blog principal, salve antes uma cópia do seu template.
Passo 1: Arquivos no Código
Arquivos Necessários
Dois arquivos JavaScript serão os responsáveis por fazer a galeria de imagens funcionar.
Clique aqui para baixar o pacote com os scripts.
Agora, você vai precisar hospedar os arquivos que você baixou e em seguida adicionar a chamada para esses arquivos no código do seu blog ANTES da tag </head>:
<script src='ARQUIVO JQUERY.JS' type='text/javascript'/>
<script src='ARQUIVO S3SLIDER.JS' type='text/javascript'/><script type='text/javascript'>
$(document).ready(function() {
$('#s3slider').s3Slider({
timeOut: 3000
});
});
</script>
Onde está timeOut: 3000 basta que você altere esse número para mudar o tempo de transição das imagens (4000, 5000, você que sabe).
Passo 2: Estilos da Galeria
Agora procure pelo trecho ]]></b:skin> e adicione ANTES dele:
/* s3slider
----------------------------------------------- */
#s3slider {
width: 720px;
height: 300px;
position: relative;
overflow: hidden;
}
#s3sliderContent {
width: 720px;
position: absolute;
top: 0;
padding: 0px;
margin-left: 0;
}
.s3sliderImage {
float: left;
position: relative;
display: none;
}
.s3sliderImage span {
position: absolute;
left: 0;
font: 15px/20px Arial, Helvetica, sans-serif;
padding: 30px 13px;
width: 720px;
background-color: #000;
filter: alpha(opacity=70);
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
color: #fff;
display: none;
bottom: 0;
}
.clear {
clear: both;
}
Clique em SALVAR e em seguida clique em Expandir modelos de widgets. Agora procure pelo trecho abaixo:
<div id='content-wrapper'>
<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'/>
</div>
Onde está showaddelement='no' troque o no por yes. Ficaria assim:
<div id='content-wrapper'>
<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='yes'/>
</div>
Se você quiser a galeria de imagens igual a do meu blog de testes (acima da área do post) basta procurar pelo trecho abaixo:
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Postagens no blog' type='Blog'/>
</b:section>
</div>
Onde está showaddelement='no' troque o no por yes.
Depois clique em SALVAR e vamos para a próxima parte!
Passo 3: A Galeria de Fato
Agora que você já adicionou o código, vamos criar as chamadas para as imagens e links, ou seja, a galeria em si!
Vá até a página Elementos da página e clique Adicionar um Gadget. Na janela que se abre procure por HTML/JavaScript e clique nele.
Na próxima janela, adicione o código abaixo:
<div id="s3slider">
<ul id="s3sliderContent">
<li class="s3sliderImage">
<img src="URL IMAGEM LINK 01" />
<span><a href="URL PARA O LINK 01">TEXTO PARA O LINK 01</a>
<br/>
RESUMO PARA O LINK 01
</span>
</li>
<li class="s3sliderImage">
<img src="URL IMAGEM LINK 02" />
<span><a href="URL PARA O LINK 02">TEXTO PARA O LINK 02</a>
<br/>
RESUMO PARA O LINK 02
</span>
</li>
<li class="s3sliderImage">
<img src="URL IMAGEM LINK 03" />
<span><a href="URL PARA O LINK 03">TEXTO PARA O LINK 03</a>
<br/>
RESUMO PARA O LINK 03
</span>
</li>
<div class="clear s3sliderImage"></div>
</ul>
</div>
Veja que existem aqui trechos que se repetem, pois são os trechos responsáveis pelas imagens, links e resumos. Para tanto, basta identificá-los dentro do código e substituir o que está indicado. Por exemplo:
<img src="URL IMAGEM LINK 01" />
<span><a href="URL PARA O LINK 01">TEXTO PARA O LINK 01</a>
<br/>
RESUMO PARA O LINK 01
</span>
</li>
Substitua assim:
URL IMAGEM LINK 01 = Endereço da imagem que você quer apareça
URL PARA O LINK 01 = Link da página que você quer que redirecione ao clicar
TEXTO PARA O LINK 01 = Descrição do link
RESUMO PARA O LINK 01 = Resumo do texto ou chamada
Se você quiser adicionar mais que três imagens a sua galeria, basta adicionar tantos trechos desse para a quantidade de imagens que você quer.
Lembrando sempre que é preciso muito cuidado para não apagar as aspas, caso contrário o código não irá funcionar ok?
Depois de alterar tudo e adicionar os endereços, links, resumos, etc. Clique em SALVAR e pronto! Vá conferir sua galeria de imagens funcionando!
Faça bom uso!
Tutorial original (em espanhol): Gema Blog
Caramba meio complicado mais vou tentar fazer. Valeu pela dica.
Oi Concentrado, é só um pouquinho complicado vai?
Tente sim que você consegue!
Obrigado pelo comentário e pela força de sempre!
Olá , Sr. Tico Esteves . Eu não consegui fazer o slide show , eu baixei da internet um template e estou tentando editar , eu não estou conseguindo , por favor me ajude !
Fala ae Tico
Prazer
estou tentando esse slide aê, tenho um em meu blog mas esse é mais completo e com as legandas..
leva-eu.blogspot.com
se quiser da uma olhada ae.. ta em teste ainda
abraços
Fala Rodolfo, tudo bem?
Tente sim, ele é bem interessante e dá um efeito mito bom. E pode deixar que vou dar uma olhada no seu blog!
Abraços
ola Tico tudo bem? tem como colocar esta galeria em um site ao inves de um blog? vc sabe como?..muito obrigado abrasss
Olá Andrey,
Olha só, você precisa saber em que linguagem foi feito o site e entender um pouquinho de programação. Eu sinceramente nunca tentei, mas acredito que seja possível sim. De qualquer forma, dependendo da linguagem usada, no caso do php em WordPress por exemplo existem alguns plugins que dão conta do recado.
Um abraço e obrigado pelo comentário!
Valeu amigo. Eu conheço e utilizo o slideshow comum. Mas este com título clicável eu não conhecia. Obrigado.
Olá Fabio,
Que bom saber que te serviu. Faça bom uso!
Um abraço e obrigado pelo comentário!
Pingback: Slide Show: Como Criar Uma Galeria de Imagens com Título Clicável e Descrição | diggBlog
Tico
la na primeira parte, da dando isso aqui
Open quote is expected for attribute “{1}” associated with an element type “src”.
eu não sei o que faço.
abraços vey
esse já resolvi, preciso descobrir o q é isso aki agora.. rsrs
The element type “head” must be terminated by the matching end-tag “”.
abraços
Olá Rodolfo, o WordPress está com um pequeno bug onde está trocando as aspas simples por acentos agudos. Então procure no código e substitua tá bom?
É chato, mas infelizmente não posso fazer nada agora!
Abraços
Rodolfo, provavelmente você apagou ou esqueceu de alguma aspa, pois a mensagem indica que o código está cortando o seu template e o cabeçalho não está sendo fechado como deveria. Infelizmente fica difícil pra mim te dizer exatamente o que fazer, já que eu não estou vendo o que está acontecendo.
Sinto não poder ajudar mais, mas não tem como mesmo.
Abraços
desculpa a pertubação ae.. rsrs
mas eu consegui resolver esses pedaços ae cheguei até na parte de colocar igual ao do BABEL
só que nele é que dá um probleminha..
The element type “body” must be terminated by the matching end-tag “”.
tem algo errado ae?
Olá Rodolfo, como eu disse não tenho como ajudar mais, pois não estou vendo o código. Mas pelo que você escreveu dá para perceber que tem alguma coisa errada no código que está fechando o corpo (body) do template antes da tag que serve pra isso. Mas não tenho como te ajudar daqui e nem tempo para instalar um template igual ao seu para fazer testes.
A única coisa que eu posso te dizer é para tentar alterar as aspas e/ou procurar algum trecho que possa estar diferente.
Infelizmente é tudo que posso fazer!
Um abraço!
amigo meu blog é problematico.. rsrs
mas só uma duvida final
ele está aparecendo por cima de outro gadget
sabe qual o código pra fixar ele?
abraços e desculpe por tudo
fica com Deus
Olá Tico, gostaria de saber se tem como colocar esse slide não acima dos posts, mas no próprio cabeçalho…
Se olhares o blog que tou arrumando (http://3gbm-imperatriz.blogspot.com) vai ver que no cabeçalho, na parte cinza, deixei só o nome do Grupamento, pois sonho em um dia conseguir por um slide lá dentro. Será possível esse feito?
De já agradeço!
@Rodolfo: Pelo que pude ver você já resolveu o problema. Tudo bem, não tem que pedir desculpas! Um abraço!
@Walter Júnior: No caso não tem como te explicar isso aqui, teria que abrir um espaço no seu template e criar um campo de widget só para isso. É um trabalho demorado e precisa ter um pouquinho de conhecimento de edição. Eu trabalho com criação para o Blogger, se quiser dar uma olhada pode conferir no link abaixo e qualquer dúvida entre em contato por email:
Linketal/serviços
Um abraço!
Olá! Adorei esta dica! Tentei colocar o código em meu blog, mas mostrou um erro que já foi mencionado aqui. Corrigi as aspas simples, mas continuou. Seria, talvez um erro na hospedagem dos arquivos? Eu fiz o download e coloquei a pasta “examples” (descompactada) no C:/. É isso mesmo?
Desde ja muito obrigada!
Olá Elzilane, que bom que você gostou!
Quanto a hospedagem dos arquivos, pode ser que o problema esteja. Como não sou eu que hospedo esses arquivos, não tenho como te dizer ao certo. Já para hospedá-los por conta própria, você precisa de um espaço online (um servidor) e não no seu computador (c:/).
Até onde eu sei, existem alguns servidores gratuitos para hospedagem de scripts. Dá uma pesquisada no Google que você deve encontrar!
Um abraço!
Oii Tico, faz dois dias q estou tentando add esse slide. mas vc naum tem culpa. Eu sou poia mesmo kkk naum entendo muito de HTML. tipo hospedar script. isso eu naum sei. ja procurei tuto ensinando e naum achei.
:*
Oi Bruna, tudo bem?
As coisas são assim mesmo. Eu também vez ou outra me atrapalho com um código por aqui.
Olha só, melhor que eu tentar te explicar por aqui é você pesquisar no Google sobre “hospedagem de javascript” que você vai encontrar vários tutoriais sobre o assunto que explicam direitinho.
Um abraço e obrigado pelo comentário!
olá Tico,
Cara sou novo nesse negócio de blogs e estou com dificuldades em implementar esse slide no meu blog. Sei que é dificil pra você me ajudar dessa forma mas se fosse possivel me dar uma dica eu agradeceria. Após colocar o codigo da chamada dos arquivos me foi apresentado o seguinte erro xml:
Mensagem de erro em XML: Element type “script” must be followed by either attribute specifications, “>” or “/>”.
Já procurei no meu HTML exaustivamente mas não consegui achar onde seria esse erro acredito que seja nessa chamada onde eu tenha esquecido de fechar o script será que pode ser isso?
segue o trecho do html:
]]>
$(document).ready(function() {
$(‘#s3slider’).s3Slider({
timeOut: 3000
});
});
Desde já agradeço a atenção
Olá LuigiLegal,
Então, a mensagem está ligada ao “script” (abertura ou fechamento). Procure pelo trecho e tente corrigir.
Um abraço e boa sorte!
manow eu so um desastre em essas parada mas queria q vc desse um olhada no meu blog e pow me ajudase pq eu eu to muinto perdido
cara como que faço pra inserir no wordpress??? tipo eu quero inserir em um widget….
Cara eu queria colocar esse efeito dentro de uma página HTML que eu estou criando aqui para a empresa, mas a partir do momento de colocar o estilo da galeria eu me perco. Tem como me ajudar. No aguardo!
Ta dando esse erro porque ” 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”.”
Olá, desculpa encher o saco, mais quando voce tiver um tempo voce pode fazer esse trequihho pra mimm ??? eu passo akele html do meu blog, e vc inplanta pra mim , se precisar eu até pago !!! mais eu nessesito muito desse serviço pra empresa e não esta dando pra aplicar
Se nã der tudo blzaa !! eu entendoo
Pessoal, esse é um script para o Blogger! Nunca testei em outra plataforma ou em um site institucional. Quem quiser implementar coisa parecida em outra plataforma que não seja o Blogger, aconselho fazem em flash. O efeito pode ser o mesmo ou até melhor ok?
Para quem está encontrando erros na hora de aplicar, pode ser problemas nas aspas (o WordPress troca aspas simples por acentos agutos. Então basta substituir).
@brito000: Entre em contato pelo formulário e explique o que quer, passando url (endereço) do site e te passo um orçamento.
Abraços a todos e obrigado pelos comentários!
Oi Tico tdo bem? Gostaria de saber como fazer esse procedimento, mas não em forma de slides, queria em forma de coluna mesmo, uma coluna vertical com pelo menos 4 imagens, cm um título clicável em cada uma delas,que direcionasse pra outro site, ou pra uma postagem do meu blog enfim, tem um exemplo nesse blog aqui: http://sobrenaturalbrazil.blogspot.com/ ali na galeria de fotos, parceiros e etc, estou há um tempão procurando, ate´contatei a equipe desse blog mas ninguem me respondeu
vc sabe? me mande a resposta, lhe serei grata, beijos e sucesso!
Hey, amei o slide mas não funcionou. Acho q não fiz direito mas valeu a pena!
Olá! Tentei muito fazer esta galeria há dias mas não consigo. é que no meu blog não há alguns destes códigos que vc pede. Podes me ajudar se tiverem outros códigos. O trabalho é bom eu queria saber fazer.
Amigos,
as respostas para suas perguntas estão nos comentários anteriores (isso as que não estão no próprio texto).
Boa sorte a todos!
Abraços
Ola tico,preciso da sua ajuda eu tentei arrumar esse slide no meu blog mais eu nao consegui apareceu a seguinte informaçao:
”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”.”
OBS: isso apareceu na hora que eu fui Salvar o modelo!
por favor me ajude nao sei oque fazer
Tico Esteves,
Muito bom este slide show. Gostaria de saber como proceder no download dos arquivos, pois não entendo bem disso. Bem, já baixei os arquivos no meu computador; preciso fazer alguma coisa com os arquivos antes de hospedar em outro site que tenho? O que? Preciso colocar alguma coisa, algum código indicando que aquele arquivo está hospedado alí(naquele site)?
Aguardo resposta.
Muito obrigado.
Tentei más não consegui.
Desculpa se pareço ignorante, mas é que sou nova no assunto. Gostaria de saber como eu faço para hospedar os arquivos zip que baixei.
E queria saber se tenho que substituir onde está escrito ARQUIVO por algum html.
Gostaria de saber se posso configurar esses slides para exibir postagens expecificas, como de uma unica tag por exemplo, ou de um autor específico.
Desde já agradeço se puder me ajudar.
ui inserir essa galeria no meu blog, no primeiro passo sempre dava algum erro ao salvar e quando terminei de corrigir tudo o código ficou assim:
Não consigo entender o que pode estar dando errado. Se puder me ajudar agradeço, pois necessito de uma galeria dessas no meu blog.
Gostaria de saber como mudar a cor vermelha do título.
Cara…
Tenho esse slide no meu Blog e uma coisa que não esta funcionando é que quando chega na Penultima foto ele para (Não mostra a ultima e não recomeça) o que esta errado sera? Ja revisei, olhei tudo mais não consigo identificar onde esta o erro.
Ajuda Plis.
Obrigado
Oi Tico, gostaria mt de colocar um slide em meu blog. Tem um modelo q está sendo usado por algumas amigas, mas já tentei e não consegui. Pode me ajudar?
Mt obgd e espero q possa me ajudar. bj