Dominio: mundoblogger.com.br
Chave: 6750f38d68212cb9ffc85aee2a0ef61d0ebf4f04
Hora do cache: 1511264362
Vida do cache: 1511307562
Status: 1
Mensagem: Centive nao respondeu
Chave do Pedido: 11808bbc6205bade68f0b70c302eaa74d4305945
Chave do Produto: PROKEY
Scroll Top

Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Criação de Blogs Profissionais e Redes Sociais.

Hospedagem - 728 x 90

Acessórios

Instalando um Slideshow no Blog – JQuery S3lider

Vou explicar aqui como colocar um slide no seu blog. Você vai ver o quanto é fácil e simples a instalação.
Veja imagem demonstrativa:
slideshow no Blogger

[becape]Só para lembrar, sempre é bom que você faça um Backup do seu template antes de prosseguir para evitar transtornos, caso algo saia errado.[/becape]

Primeiramente, você já deve saber que para o funcionamento do slide é necessário utilizar dois scripts:
jQuery
s3Slider

Clique nos links de cada arquivo acima para fazer o download automaticamente e veja neste artigos, uma relação de Sites para hospedar arquivos javascripts.

Depois de hospedados, você deverá acrescentar os arquivos no seu template.

1. Instalar o arquivo javascript

Entre no painel do blogger, acesse o menu “modelo” e vá em “Editar HTML” e procure pela tag </head>
e cole logo abaixo dela o código a seguir, acrescentando as URL dos seus arquivos js já hospedados:


<script src='url do arquivo jquery' type='text/javascript'/>
<script src='url do arquivo s3Slider' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
$('#s3slider').s3Slider({
timeOut: 4000
});
});
</script>

Salve as modificações!

2. Inserir o código CSS

Agora procure pela tag ]]></b:skin>
e cole ANTES dela:


/* s3slider
------------------ */
#s3slider {
background:#000000; /* edite cor de fundo*/
border:1px solid #1e1125; /* edite borda do slide*/
width: 380px; /* largura total do slide*/
height: 250px; /* altura total do slide*/
position: relative; /* important */
overflow: hidden; /* important */
}
#s3sliderContent {
width: 380px; /* as imagens devem ter a mesma largura ou mais - você pode editar a largura se quiser */
position: absolute; /* important */
top:-14px; /* important */
padding: 0px;
margin-left: 0; /* important */
}
.s3sliderImage {
float: left; /* important */
position: relative; /* important */
display: none; /* important */
}
.s3sliderImage span {
position: absolute; /* important */
left: 0;
font: 20px Trebuchet MS, sans-serif; /*tamanho da fonte do titulos das postagens*/
padding: 10px 0px;
width: 380px;
background-color: #000; /*cor de fundo do slide*/
filter: alpha(opacity=80);
-moz-opacity: 0.8;
-khtml-opacity: 0.8;
opacity: 0.8;
color: #fff;
display: none; /* important */
bottom: 0;
text-align:center;
}
.clear {
clear: both;
}

No código, eu determinei que o slide tenha uma largura de 380px, assim como as imagens.
Notem que todos os campos “width: 380px;” correspondem a largura do slide e das imagens.
Se você for usar imagens com largura maior ou menor que 380px você deverá editar o valor da largura e incluir a mesma largura que tiver a sua imagem.
Não se esqueça disso!

P.S: Não altere nada nos campos onde estão escrito: /* important */

Salve as modificações!

3. Escolhendo o local para instalar o slide

Agora você deve escolher onde quer posicionar o slide.

3.1. Abaixo do cabeçalho:

Um excelente local é logo abaixo do cabeçalho, ou abaixo do menu(caso seu blog tenha um menu instalado abaixo do cabeçalho).

Vá no menu “layout” verá um campo para “Adicionar Gadget” bem abaixo do cabeçalho do blog, é lá que você irá colar o código do slide que você quer instalar.
Se não houver um campo para “Adicionar Gadget” abaixo do cabeçalho, você terá que fazer algumas modificações no código do template. Siga este artigo e veja como Como Instalar Gadgets abaixo do Cabeçalho

3.2. Acima da coluna de postagens:

Caso queira instalar o slide na coluna acima das postagens, você precisa conferir no painel do blog se no seu template já existe a possibilidade de adicionar um gadget acima da coluna de postagens, através do menu “layout”.
Se não houver, você terá que fazer algumas modificações no código. Siga este artigo e veja como Como instalar gadgets acima da coluna de postagens.

Escolhido o local que ficará seu slide, Clique em “adicionar um gadget”, escolha o modo HTML/javascript e cole o seguinte código:


<div id="s3slider">
<ul id="s3sliderContent">
<li class="s3sliderImage">
<img src="link-da-sua-imagem" />
<span>Legenda</span>
</li>
<li class="s3sliderImage">
<img src="link-da-sua-imagem" />
<span>Legenda</span>
</li>
<li class="s3sliderImage">
<img src="link-da-sua-imagem" />
<span>Legenda</span>
</li>
<div class="clear s3sliderImage"></div>
</ul>
</div>

Caso você queira adicionar mais imagens no slide,adicione antes de <div class=”clear s3sliderImage”> o código abaixo:


<li class="s3sliderImage">
<img src="link-da-sua-imagem" />
<span>Descrição</span>
</li>

Sempre que quiser acrescentar mais imagens repita sempre o trecho acima.

Se quiser usar o slide como um menu, onde a imagem redireciona para alguma postagem do seu blog, use este código ao invés de usar o código anterior:


<li class="s3sliderImage">
<a href="link-do-post">
<img src="link-da-sua-imagem" />
</a>
<span>Descrição</span>
</li>

Importante: as imagens utilizadas no slide, devem medir o mesmo valor(ou mais)contido na largura (width) e altura(height) do slide Veja exemplo:
#s3slider {
width: 380px;
height: 250px;

Se você usar imagens menores vai ficar desconfigurada apresentação das imagens.
E se for usar imagens maiores, edite os valores em width e height.
Se você for instalar o slide abaixo do cabeçalho (em crosscol) você deve colocar a largura da imagem de acordo com a mesma medida total do seu template. Pode ser a mesma medida que está em “outer-wrapper”.

[alerta]ATENÇÃO:
O slide funciona a base de arquivo javascript e sua funcionalidade pode variar de acordo com o template.Templates que possuem muitos scripts, acabam gerando “conflitos” entre si. Caso este script não funcione em seu blog, faça uma avaliação de quais realmente são mais necessários. Para melhor entendimento, leia este artigo: Por que alguns scripts não funcionam no meu blog.[/alerta]

Caso queira aprender como ocultar ou exibir este slide que você instalou, em determinadas páginas, leia o artigo:
Ocultar Elementos em Página Específica



De um play no vídeo abaixo e aprenda a Criar blogs Profissionais




Gostou deste artigo? Ajude nosso projeto.
Compartilhe em suas redes sociais nos botões abaixo:

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

Sobre o autor | Website

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

58 Comentários

  1. Oi! nossa não sabe o quanto estava atras de um slide desse tipo ^^ Obrigada pela força! e deu tudo certinho no template.
    bjus

  2. Well disse:

    Perfeito, hospedei os js no google code e consegui ajustar para o tamanho 300×180. O Blog ainda está em construção, logo posto o resultado e verá muitas das duas dicas lá :)
    parabéns pelo blog fantástico que mantém, nos ajuda muito! (sempre clico nas suas publicidades para dar uma força também!)

    Grande abraço!

  3. Jhe disse:

    Site hiper maravilhoso, explicação magnifica! Mas eu não entendo como hospedar, como faço? D:
    Desde já agradeço, bjs :*

  4. ola queria parabenisar você pelo blog tudo muito bem explicado e eu consegui so tenho uma duvida e queria muito sua ajuda o slider funciona, mais como faço para ele funcionar somente na primeira pagina??

  5. Fabricio disse:

    No primeiro passo eu coloco a tag depois de e então aparece assim: Erro ao analisar XML, linha 1040, coluna 89: The reference to entity “d” must end with the ‘;’ delimiter.
    Por que acontece isso?

  6. Gih disse:

    Muito obrigada pela ajuda!
    Mas estou com dúvida em uma coisa..
    Instalei o slide e ele funciona bem, mas a parte onde escreve em cima das imagens desscrevendo o post só aparece em um slide, nos outros não!
    como posso arrumar isso?
    Obrigada

  7. Lucas Patrick disse:

    Olá, queria saber como faço pra deixar o texto no slider com um Título (fonte maior na esquerda) e uma descrição (fonte menor também na esquerda). Obrigado e parabéns pelo post!

  8. Ana Maria disse:

    Aqui aparece um quadrado preto, e não funciona :(
    O que será que fiz de errado?
    Maravilhoso seu site, muito explicativo, parabéns!

    • Vanessa disse:

      Recursos que funcionam a base de arquivo javascript a sua funcionalidade pode variar de acordo com o template. Templates que possuem muitos scripts, acabam gerando “conflitos” entre si.

      • Ana Maria disse:

        Muito obrigada por ter respondido, eu acho que fiz algo errado, porque testei o slide no meu computador, sem nada, apenas com o slide na página e ele ficou preto… então com certeza, algo de errado eu fiz… Obrigada mesmo assim!

  9. Cah disse:

    Oii… eu estou desesperada nenhum slider funciona… Já tentei em milhares de sites e NADA….

    Quando adiciono fica tudo preto e só :(

    • Vanessa disse:

      Slide funciona a base de arquivo javascript e sua funcionalidade pode variar de acordo com o template.

  10. Leonardo Machado disse:

    Disseram que não roda no IE ?
    Já tentaram usar o código abaixo entre as tags [HEAD] e [/HEAD] (OBS.: substituam “[” por “”)
    Tentem aqui rodou um slider que não rodava no IE9, usando este código funcionou perfeitamente.
    Até Galera.

  11. Fernanda disse:

    Olá, eu amo tudo aqui é perfeito e estou terminando meu blog, assim que terminar colocarei todos os creditos. Eu consegui fazer o slide, mas queria que você me tira-se uma duvida como colocar o slide dentro de um banner como esse blog aqui.OBRIGADA, E AGUARDO ALGUMA RESPOSTA. *-*

  12. Weslei Arantes disse:

    Deu quase tudo certo!
    Mas a ultima imagem do slide n aparece.

    desde ja aguardo uma resposta ;D

  13. Expedito Gonçalves Dias disse:

    Tutos fantásticos. Adorei o o blog!
    Abraços!

  14. Ariane disse:

    Eu adoro esse código.
    É bom guardar os endereços dos scripts.
    Agradeço muito a sites como este. Eles me ensinaram tudo que sei sobre html. 😀

    Obrigada!

  15. ? Jão Bless ? disse:

    Pow! Ninguém Sabe Informar Como Fazer o Endereço do Slide Abrir em Outra Pagina???! Já passei por uns 20 ou mais blogs de tutoriais e seus autores nem tocam no assunto! =/

  16. all best buys disse:

    Olá! primeiramente gostaria de parabeniza la pelo seu trabalho, esta extremamente excelente. Um duvida q tenho com relaçao aos slides é que nao consigo de forma alguma adicionar mais imagens, mesmo seguindo tudo direitinho conforme vc explicou, nao consigo adicionar mais do que duas imagens no slide, vc saberia me responder?..Obrigada! e continue assim

  17. Rpdo disse:

    Olá clau gostei muito do seu site, to começando a mexer com isso agora, fiz o tutorial certinho, mas tenho uma duvida, coloquei o slide no lugar que vc disse mas ele fica no canto esquerdo da tela tem como colocar ele no centro???

  18. .:: Clau ::. disse:

    Contrast Sound
    Menu dropdown só dá certo se ficar longe de outros elementos. Vc tem que ter em mente que o dropdown possui submenus e eles "abrem" para baixo. Se vc coloca outro elemento muito próximo a ele, é óbvio que vai ficar um sobre o outro. Vc terá que escolher qual é o mais necessário no seu blog.

  19. Contrast Sound disse:

    Ola Clau,

    Instalei o Slider e ficou bem legal, pórem, tenho um menu dropdown logo acima dele e quando eu abro o menu as opções ficam atras do slider. Oq será q fiz de errado??? Tentei alterar o z-index mas não rolou… sera alguma outra coisa???

    Obrigado de antemão

  20. .:: Clau ::. disse:

    rac
    Olha o IEca realmente é um problema…eu já percebi que alguns recursos funcionam normalmente para alguns e para outros não…no meu IEca eu conferi, e o slide aparece normal..mas vc disse que no seu não…infelizmente, eu não sei como ajudar…esse IEca é uma porcaria mesmo…rsrs

  21. rac disse:

    Clau virei seu fã, tenho aplicado vários de seus ensinamentos no blog que estou administrando.
    Também apliquei este slide e funciona que é uma beleza, mas…tem um probleminha. Apesar dele funcionar em qualquer outro navegador de internet perfeitamente, no IEca(Internet Explorer 9) não funciona, fica uma imagem preta.
    Sem querer abusar mas já abusando, rsrsrsr, você poderia escrever mais algumas linhas sobre isso?

  22. .:: Clau ::. disse:

    Rodrigo
    Vc tem que alterar o trecho "font:20px no código CSS. Dá uma olhada no tutorial que lá já está destacado.

  23. .:: Clau ::. disse:

    Alana
    Por favor, peço que leia os leia os Termos de Uso do Blog.
    Obrigada!

  24. Alana Cardoso disse:

    Gostaria muito de sua ajuda na seguinte questão: eu baixei um template que já tem um slide, só que algumas imagens que tem nele não me agradam, na verdade eu gostaria de trocar todas as imagens dele por outras imagens, já tentei de tudo fazer isso, mais a única coisa que eu consigo mudar é o título da imagem, já a descrição e todo o resto não. Meu Blog de teste ainda está com o template, entra lá por favor e dá uma olhada: http://wevcardoso.blogspot.com/
    a proposito eu adorei o seu blog, sempre que estou com duvidas em alguma coisa eu entro aqui e saio bem informada por sinal,

  25. Rodrigo disse:

    Consegui fazer o slide funcionar, mas gostaria de alterar o tamanho das fontes do texto que aparece para cada imagem e alinhamento, igual ao exemplo na imagem no início deste tutorial. Poderia passar como se faz?? Obrigado.

  26. Chico Canavieira disse:

    eu queria colocar em uma pagina estatica especifica. tentei colocar para aparecer na url da pagina + nao deu certo, ele acaba que nao aparece em lugar nenhum!

  27. Chico Canavieira disse:

    como deixo o slide show apenas na pagina inicial. nao sei se isso é possivel + vale a pergunta. grato.

  28. Gui Souza disse:

    Olá Parabens pelo blog
    Uma duvida meio besta.
    Seguinte
    Eu diminui o tamanho do slide, só que a camada escura
    da legenda está cobrindo quase a foto inteira.
    Se diminuir o tamanho do slide, sou obrigado a mexer na legenda para não tampar a foto?

  29. .:: Clau ::. disse:

    Caio
    2. Já inclui a informação no final do artigo.
    3. Procura no menu, o link do tutorial "efeito opacity em imagens", pode ser que te ajude.

  30. Caio Lopes disse:

    Olá.
    1- Parabens pelo otimo blog. Ele me ajudou muito. ^^

    2- Estou usando esse script e não tá show de bola, mas eu to com uma duvida: Tem como fazer com que os slides só apareçam na página inicial? Como?

    3- Uma coisa que eu queria saber e acho que não tem no blog: Você sabe como faço para que quando o mouse ficar em cima de uma imagem, ela mude?

    Obrigado por tudo. Bjs. \o

  31. .:: Clau ::. disse:

    Gleydson
    Não tenho como te ajudar, pois não há como eu saber o que ocorre no seu template. Sugiro que vc reporte seu problema diretamente no Forum Oficial do Blogger.

  32. Gleydson disse:

    Deixa eu perguntar só uma coisinha… O slide da super certo quando EU ESTOU LOGADO (com a conta do blogger) mas toda vez que eu não estou logado, NENHUM outro elemento que necessite de script funciona (eu instalei os scripts desse tutorial e do ShadowBox). O que que eu to fazendo de errado? Já procurei no post "porque os scripts não funcionam no meu blog" e também não consegui respostas. Me ajuda? D:

    AH! E parabéns pelo blog. Me ajudou e MUITO!

  33. Kevvin Oliveira disse:

    Oie Clau! Fico direitinho no meu ;). Adorei a dica \o/. Abraços!

  34. .:: Clau ::. disse:

    Demetrius Silva
    Lamento, mas não tenho como te ajudar. Não há como eu saber o q acontece no seu template.

  35. Demetrius Silva disse:

    Olá, blz, o passo a passo foi feito com precisõa graças ao otimo tutorial, porem, em vez ou outra os slides somem do meu blog
    e reaparecem, e não entendi nada sobre o crosscol, não encontro aquela linha para colocar o texto html logo abaixo e nem encontro no html do tamplate. Será que é esse o problema, eu não colocar o html do crosscol?
    Bom, me ajudem, por favor, agradeço, pois tbm achei que era conflito dos scrpits mas tbm não entendi como resolve este problema. Obrigado, e vlw mesmo.

  36. Alex Lopes disse:

    Tão simples assim? Já fiz tudo e funcionou perfeitamente, vc é show garota!!

  37. .:: Clau ::. disse:

    Alex Lopes
    Dá uma lida no item 1 deste tutorial:
    Widget de Boas Vindas e Feed no Blogger.
    Siga o procedimento que está no item 1: "1. Configurar o local onde o widget será instalado – Acima da coluna de postagens".

  38. Alex Lopes disse:

    Oi Clau tudo bem sou mais um dos seus novos fans e estou com um problema, consegui perfeitamente adicionar um novo espaço para gadget onde vc mostrou porém estou com um novo template e preciso colocar um espaço desse na coluna de postagem logo acima da primeira postagem, vc poderia me ajudar?

  39. Nauan disse:

    Queria saber se tem como o slider ficar igual ao desse: http://www.nintendoblast.com.br?

  40. ::Clau:: disse:

    @Orichalcum the Hedgehog:
    Vc não deve ter fechado os códigos CSS direito. Observe se acrescentou –> ; (ponto e virgula) ou –> { } (chave) em todas as partes do CSS.

  41. Orichalcum the Hedgehog disse:

    Bom dia.

    Estou tendo problemas para instalar o Slide no meu template. Fiz todos os passos corretamente, hospedei os arquivos e coloquei os códigos nos locais ditos. Mas quando eu salvei e visualizei, o código #s3slider inteiro apareceu no topo do template.

    O que pode estar acontecendo?

  42. ::Clau:: disse:

    @SocialLie:
    Para este tipo de slide não tem como as imagens aparecerem de forma aleatória, pois ele funciona a base de inserção manual de cada imagem e elas sempre irão aparecer de acordo com a ordem que vc colocou o código para cada uma.

  43. SocialLie disse:

    Já coloquei todas as 20 imagens que precisava com os links tudo certinho, abrindo em outra pagina e tal, a unica coisa que falta, é randomizar essas 20 imagens, pode me ajudar?

  44. SocialLie disse:

    Funcionou com algumas edições para ficar do tamanho e cor que queria, muito bom mesmo o codigo. Mas me falta uma ajuda urgente, como faço para que as fotos que apareçam sejam aleatorias, não queria que ficassem sempre na mesma ordem =(

    Tem como editar levemente o codigo para tal?

    ah sim, como coloco para abrir em outra pagina? não queria que saisse do meu site quando clicasse na foto e sem abrisse outra no browser…
    Obrigado.

  45. ::Clau:: disse:

    @Renata, @Rafa Lima:
    Desculpe, mas não sei o q vcs devem ter feito de errado, pois o slide abre normalmente no blog de testes e no Template Dark Purple. Pode ser algo relacionado ao modelo do template de vcs.Não tenho como ajudar.

    @Renatto França:
    é q neste tutorial ensina a instalar o slide na parte acima do cabeçalho mesmo e não na sidebar.
    Se vc for instalar em outro local, terá q editar todo o código e vai ter q ir testando até atingir o resultado q vc quer.

    @Frez:
    Me desculpa mas eu não faço ideia do q possa ter feito de errado. Pode ser q tenha algo relacionado ao modelo do seu template, ou tenha algum outro script instalado q esteja dando conflito com o script do slide.
    Dá uma lida neste artigo:
    Saiba porque alguns scripts não funcionam no seu blog.

  46. Frez disse:

    Eu ate consegui instalar mas fica aparecendo a mensagem> No content exists at page 1! Loading 1st page instead. Ajuda por favor…=(

  47. animesmarc disse:

    Valeu!
    Muito bom esse tutu!

  48. Renatto França disse:

    Olá, no meu blog funciona perfeitamente, só que envés de ficar na sidebar lateral como eu coloco, ele fica por cima do cabeçalho pq?
    Help!
    Abçs

  49. Rafa Lima disse:

    Bom dia.

    Estou com o seguinte problema. Quando salvo as modificações e vou vizualizar o Blog, ainda na parte de edição de HTML, o slide aparece normal, perfeito. Mas quando abro o blog em outra pagina o slide não funciona.

    Acompanho seu blog há muito tempo e acho maravilhoso seu trabalho.

    Conto com sua ajuda e eclarecimento.

    o Endereço do meu blog é: http://www.rfstore.blogspot.com ou http://www.rfstore.com.br

    Muito obrigado pela atenção
    Rafael Lima

  50. Renata disse:

    Ola Bom dia.

    Segui todos os passos deste tutorial que é excelnte por sinal, mas etou com o seguinte problema. Quando viualiso o blog ainda na pag. de edição de HTML o slide esta funcionando normalmente mas quando tento abrir o blog em outra pag o slide não funciona. Não alterei nenhum valor, apenas a altura e a largura do slide.

    Vocè poderia me ajudar

    Parabéns pelo trabalho.

  51. .:: Clau ::. disse:

    Carlos:
    Essa sua maneira tb funciona, é mais trabalhosa e requer um conhecimento em edição de imagens gifs, mas funciona.
    Obrigada pela dica e pelo comentário.
    Volte sempre!

  52. Carlos Moreira disse:

    ola td bem??
    muito legal seu blog.
    sou meio novato nessa area mas gostaria de dizer como faço para colocar slide no blog. Primeiro eu crio o filme com as fotos e os efeitos.Depois converto o filme para gif atraves do programa movietoagifwmv (acho que peguei no baixaki). armazeno o gif no photobucket, pego o código e coloco na área do blog. E da certo fica legal.

    quem escreve é Antonio
    de curitiba
    abração

Desculpe, os comentários deste artigo estão desativados.

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.