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

Acessórios Vanessa S.

Instalar Slideshow com Menu Deslizante no Blogger

Eu já publiquei alguns tutoriais com diferentes slideshows para você instalar no seu blog, que você pode conferir no meu marcador: Slides.

Agora neste tutorial você aprenderá um outro modelo de Slideshow criado por Codrops que funciona a base de JQuery e CSS3.

Slideshow com Menu no Blogger

Demo

Este slideshow possui um efeito bem legal, além de ter menu na lateral , e ao clicar em um dos itens do menu, a função de reprodução automática do slide é interrompida.

[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]

Para instalar este Slideshow com menu,siga os passos a seguir:

1.Baixar, hospedar e Instalar o arquivo Javascript:

Este script funciona em conjunto com a biblioteca do JQuery, caso você já tenha esta biblioteca instalada em seu blog, não será necessário repetir a chamada dela.

Faça download deste arquivo
Hospede o arquivo em seu próprio site de hospedagem.
– Veja relação com opções de Sites para hospedagem de arquivos.

No painel do blogger, acesse o menu “modelo”, clique em “Editar HTML” e procure pela tag </head>
E cole logo ACIMA dela o código a seguir, acrescentando a URL do seu arquivo js já hospedado:


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="URL-DO-ARQUIVO-jquery-easing"></script>
<script type="text/javascript">
 $(function() {
 var current = 1;
var iterate = function(){
var i = parseInt(current+1);
var lis = $('#rotmenu').children('li').size();
if(i>lis) i = 1;
display($('#rotmenu li:nth-child('+i+')'));
}
display($('#rotmenu li:first'));
var slidetime = setInterval(iterate,3000);

$('#rotmenu li').bind('click',function(e){
clearTimeout(slidetime);
display($(this));
e.preventDefault();
});

function display(elem){
var $this = elem;
var repeat = false;
if(current == parseInt($this.index() + 1))
repeat = true;

if(!repeat)
$this.parent().find('li:nth-child('+current+') a').stop(true,true).animate({'marginRight':'-20px'},300,function(){
$(this).animate({'opacity':'0.7'},700);
});

current = parseInt($this.index() + 1);

var elem = $('a',$this);

elem.stop(true,true).animate({'marginRight':'0px','opacity':'1.0'},300);

var info_elem = elem.next();
$('#rot1 .heading').animate({'left':'-420px'}, 500,'easeOutCirc',function(){

$('h1',$(this)).html(info_elem.find('.info_heading').html());
$(this).animate({'left':'0px'},400,'easeInOutQuad');
});

$('#rot1 .description').animate({'bottom':'-270px'},500,'easeOutCirc',function(){
$('p',$(this)).html(info_elem.find('.info_description').html());
$(this).animate({'bottom':'0px'},400,'easeInOutQuad');
})
$('#rot1').prepend(
$('<img/>',{
style : 'opacity:0',
className : 'bg'
}).load(
function(){
$(this).animate({'opacity':'1'},600);
$('#rot1 img:first').next().animate({'opacity':'0'},700,function(){
$(this).remove();
});
}
).attr('src','images/'+info_elem.find('.info_image').html()).attr('width','800').attr('height','300')
);
}
});
</script>

Salve as modificações!

UPDATE 09.11.10
Se por acaso o arquivo js hospedado fora do Blogger não funcionar, tente usar o método de incluir o javascript diretamente no template.
Copie o conteúdo deste aquivo.txt
E cole-o logo abaixo da chamada do Jquery.
devendo ficar assim:


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
//*------------código-----------*//

2.Aplicar estilos ao Slideshow:

Agora volte no menu “modelo >>Editar HTML” e procure pela tag ]]></b:skin>
e cole ANTES dela:


/* Slideshow com Menu
----------------------------------------------- */
.rotator{
 background-color:#222;
 width:800px; /*-- as imagens devem ter a mesma largura-- */
 height:300px; /*-- as imagens devem ter a mesma altura-- */
 margin:0px auto;
 position:relative;
 font-family:'Myriad Pro',Arial,Helvetica,sans-serif;
 color:#fff;
 text-transform:uppercase;
 letter-spacing:-1px;
 border:3px solid #f0f0f0;
 overflow:hidden;
 -moz-box-shadow:0px 0px 10px #222;
 -webkit-box-shadow:0px 0px 10px #222;
 box-shadow:0px 0px 10px #222;
}
img.bg{
 position:absolute;
 top:0px;
 left:0px;
}
.rotator ul{
 list-style:none;
 position:absolute;
 right:0px;
 top:0px;
 margin-top:6px;
 z-index:999999;
}
.rotator ul li{
 display:block;
 float:left;
 clear:both;
 width:260px;
}
.rotator ul li a{
 width:230px;
 float:right;
 clear:both;
 padding-left:10px;
 text-decoration:none;
 display:block;
 height:52px;
 line-height:52px;
 background-color:#222;
 margin:1px -20px 1px 0px;
 opacity:0.7;
 color:#f0f0f0;
 font-size:20px;
 border:2px solid #000;
 border-right:none;
 outline:none;
 text-shadow:-1px 1px 1px #000;
 -moz-border-radius:10px 0px 0px 20px;
 -webkit-border-radius:10px 0px 0px 20px;
 border-radius:10px 0px 0px 20px;
 -khtml-border-radius:10px 0px 0px 20px;
}
.rotator ul li a:hover{
text-shadow:0px 0px 2px #fff;
}
.rotator .heading{
position:absolute;
top:0px;
left:0px;
width:500px;
}
.rotator .heading h1{
text-shadow:-1px 1px 1px #555;
font-weight:normal;
font-size:46px;
padding:20px;
}
.rotator .description{
width:500px;
height:80px;
position:absolute;
bottom:0px;
left:0px;
padding:20px;
background-color:#222;
-moz-border-radius:0px 10px 0px 0px;
-webkit-border-radius:0px 10px 0px 0px;
border-radius:0px 10px 0px 0px;
-khtml-border-radius:0px 10px 0px 0px;
opacity:0.7;
border-top:2px solid #000;
border-right:2px solid #000;
}
.rotator .description p{
text-shadow:-1px 1px 1px #000;
text-transform:none;
letter-spacing:normal;
line-height:26px;
}
a.more{
color:orange;
text-decoration:none;
text-transform:uppercase;
font-size:10px;
}
a.more:hover{
color:#fff;
}

[dica]Atenção:
Este slide foi projetado com uma largura de 800px e 300px de altura.
Eu recomendo que você não faça alterações na largura do slide, a menos que você tenha um máximo conhecimento em CSS, porque se você modificar o tamanho da largura terá que editar completamente todo o código.
As imagens do slide deverá ter o tamanho de 800×300. Escolha ou crie imagens neste tamanho.[/dica]

3. Adicionar o código html do slide

Volte no painel do blogger, acesse o menu “layout”, no campo onde você quiser adicionar o slideshow, clique em “Adicionar um Gadget” e Selecione a opção “HTML/JavaScript” e cole o seguinte código dentro dele:


<div class="rotator">
<ul id="rotmenu">
<li><a href="rot1">TÍTULO-DO-MENU-1</a>
<div style="display:none;">
<div class="info_image">
URL-IMAGEM-1</div>
<div class="info_heading">
TÍTULO-DO-TOPO-DA-IMAGEM-1</div>
<div class="info_description">
ESCREVA AQUI SEU TEXTO DE DESCRIÇÃO DA IMAGEM 1
<a href="LINK-DO-POST" class="more">Leia Mais...</a></div>
</div>
</li>
<li><a href="rot2">TÍTULO-DO-MENU-2</a>
<div style="display:none;">
<div class="info_image">
URL-IMAGEM-2</div>
<div class="info_heading">
TÍTULO-DO-TOPO-DA-IMAGEM-2</div>
<div class="info_description">
ESCREVA AQUI SEU TEXTO DE DESCRIÇÃO DA IMAGEM 2
<a href="LINK-DO-POST" class="more">Leia Mais...</a></div>
</div>
</li>
<li><a href="rot3">TÍTULO-DO-MENU-3</a>
<div style="display:none;">
<div class="info_image">
URL-IMAGEM-3</div>
<div class="info_heading">
TÍTULO-DO-TOPO-DA-IMAGEM-3</div>
<div class="info_description">
ESCREVA AQUI SEU TEXTO DE DESCRIÇÃO DA IMAGEM 3
<a href="LINK-DO-POST" class="more">Leia Mais...</a></div>
</div>
</li>
<li><a href="rot4">TÍTULO-DO-MENU-4</a>
<div style="display:none;">
<div class="info_image">
URL-IMAGEM-4</div>
<div class="info_heading">
TÍTULO-DO-TOPO-DA-IMAGEM-4</div>
<div class="info_description">
ESCREVA AQUI SEU TEXTO DE DESCRIÇÃO DA IMAGEM 4
<a href="LINK-DO-POST" class="more">Leia Mais...</a></div>
</div>
</li>
<li><a href="rot5">TÍTULO-DO-MENU-5</a>
<div style="display:none;">
<div class="info_image">
URL-IMAGEM-5</div>
<div class="info_heading">
TÍTULO-DO-TOPO-DA-IMAGEM-5</div>
<div class="info_description">
ESCREVA AQUI SEU TEXTO DE DESCRIÇÃO DA IMAGEM 5
<a href="LINK-DO-POST" class="more">Leia Mais...</a></div>
</div>
</li>
</ul>
<div id="rot1">
<img src="" width="800" height="300" class="bg" alt=""/>
<div class="heading">
<h1>
</h1>
</div>
<div class="description">
<p>
</p>
</div>
</div>
</div>

Para você entender melhor os campos que deve editar no código acima, na imagem abaixo eu identifiquei o que cada trecho do código representa:
slideshow

Uma sugestão:Um excelente local é logo abaixo do cabeçalho, ou abaixo do menu(caso seu blog tenha um menu instalado abaixo do cabeçalho).
Antes de mais nada, você precisa conferir no painel do blog se no seu template já existe a possibilidade de adicionar um gadget nesta área, através do menu “layout”.
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

 
[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

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.

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

33 Comentários

  1. Victor disse:

    Oi novamente, galera, funciona sim… só tem que olhar com atenção 😉 Valeu blogueira 🙂

  2. Victor disse:

    Realmente é uma pena que todos digam o mesmo. É um slide muito bom mas não funciona…já mudei e mudei e reinstalei mas não funciona… deve faltar qualquer coisa no código porque uma pessoa dizer que não funciona é uma coisa, agora muitas… acho que só devia postar se realmente for compatível senão estará a induzir o resto do utilizadores em erro. Contudo, agradecido por toda a partilha 🙂

  3. RochinhaNews disse:

    Consegui instalar mas aparece só três(3) das cinco(5)imagens.
    Vou tentar outra vez até dar certo.
    Vanessa queria dar parabéns pelo seu trabalho; é muito bom.
    Visitei o teu blog gótico e achei de muito bom gosto.
    abraço
    Carlos(nick RochinhaNews)

  4. Gabriela disse:

    Oiie, eu ameeeei o tutorial fiz tudo certinho mas eu queria sabe se da pra ter esse codigo com a resolução de 500×300 :/
    pode me ajudar ?
    Obrigada!

  5. Alguém poderia me responder onde eu mudo o tamanho do “box” do slideshow? Ele está muito grande para o espaço que eu tenho disponível para o meu blog, eu já consegui modificar todas as coisas, tamanho da fonte, título, descrição… menos o box em sí… se alguém puder me ajudar nisso eu agradeço…

    • Vanessa disse:

      Carlos, dá uma lida no box “atenção” que tem logo acima do item 3, lá eu recomendo que não faça alterações nos tamanhos a menos que tenha um bom conhecimento em css. Mas caso vc queira se aventurar vai ter que editar o slide todo, começando pelo tamanho das imagens.
      Boa Sorte.

  6. Nina G. Marchesi disse:

    oi eu não consegui instalar o menu e gostaria de saber se a dona do blog ou alguém dos comentários poderia me dar algum tipo de ajuda pois não consegui instalar o jquery e nem hospedar o arquivo js meu conhecimentos dessa área são mínimos. Desde já agradeço.

    • Vanessa disse:

      Lamento, mas alguns casos só é possível encontrar alguma resolução testando, e por não dispor de tempo para isso, no momento não estou prestando este tipo de suporte.

  7. Para as imagens mudarem, vá nesse trecho do script:
    .attr(‘src’,’images/’+info_elem.find(‘.info_image’).html()).attr(‘width’,’800′).attr(‘height’,’300′)
    );

    E apaguem a parte “images/” deixando as aspas vazias. ^^

  8. Chapodin disse:

    Clau, muito obrigado!! Adorei o tutorial, estou aprendendo muito no seu blog!! Parabéns amo seus posts… Meu Blog Ficou show de bola!! Valew continue assim!

  9. raven_will disse:

    Não funcionou…
    A imagens não aparecem e nem os comentarios em baixo
    que pena =(

  10. Octavio Silvério de Souza Vieira Neto disse:

    Olá Clau,

    Segui todas as suas o orientações e não apareceram as imagens. Daí inseri hospedei o arquivo jquery diretamente no template e deu tudo certo. Valeu muito por me ensinar a colocar o slideshow no blog. Posso colocar o link do seu blog no meu? Colocaria o link do meu blog no seu?
    Me faça uma visita: http://www.filosofiaeposmodernidade.blogspot.com
    abçs.

  11. Sr. X disse:

    oi clau eu tentei colocar esse slide no meu site web mas não consegui. Isso só funciona com blog, pq meu site é profissonal em vez de blog igual o de vcs, desde já agradeço e blo tuto.

  12. Maah disse:

    Clau…muito show seus tutorias..pena que não consegui .,..fazer nenhum…..não foi possivel analisar…o seu formato…tem outro codigo ??

  13. .:: Clau ::. disse:

    Ariana,
    Sispmuc

    Lamento mas não tenho como ajudar. Observem o meu comentário nº 15.

  14. SISPMUC disse:

    Olá! Primeiro parabéns pela dica, é a única até agora que funcionou quase perfeitamente. No entanto, como os colegas acima estou tendo problemas com as imagens. Fiz tudo o que foi recomendado mas as imagens não aparecem.

    Aguardo contato. Um grande abraço!

  15. Ariana L. Prestes disse:

    Oi.
    Olha só, os efeitos funcionam corretamente, mas não consigo fazer a imagem ser reconhecida. Não aparece no slide.
    Já tirei os outros recursos que continham o JQuery e já tentei usar também em um blog "limpo" de teste e ainda assim não consegui fazer com que as imagens aparecessem.
    Teria como ajudar?
    Obrigada.

  16. Kevvin Oliveira disse:

    Adorei a dica Clau! Você como sempre nós surpreendendo \o/. Existem tutoriais muito interessantes no Codrops, e espero um dia vêlos futuramente aqui no MB, principalmente algo que sempre quis saber, que é como criar uma galeria de imagens a estilo WoodPress =).
    Adoros suas dicas!
    Abraços!

  17. .:: Clau ::. disse:

    Vegas
    Eu testei o slide, e funcionou perfeitamente. A ultima dica:
    Abaixo da linha
    div id="rot1"
    Vai aparecer esta linha:
    img src="url-imagen-1" width="800" height="300" class="bg" alt=""

    apague o trecho -> url-imagen-1
    Deixe-o assim:
    img src="" width="800" height="300" class="bg" alt=""

    Se nem assim der certo, sinto muito, mas não tenho como ajudar mais, pois pode ser algum problema com o seu template, pq eu instalei este slide em um blog de testes para testa-lo, e ele funcionou direitinho.

  18. vegas disse:

    clau consegui 95% do efeito com suas novas dicas, as imagens agora apareceu, mas a um porem, ela da só uma rodada e para, tem mais alguma dica para resolver este quebra cabeça, de uma olhada neste link de teste meu.

    http://vegas-tesste.blogspot.com/

  19. .:: Clau ::. disse:

    Silas,
    Vegas

    Tentem hospedar o arquivo js diretamente no template.
    Eu disponibilizei o código completo e atualizei o post.
    Se mesmo assim continuar sem aparecer as imagens, verifiquem se vcs incluíram a chamada do JQuery corretamente, e principalmente, verifiquem se já não usam algum outro recurso que utiliza o JQuery e se não há chamadas repetidas ou em outras versões, já instalada no template de vcs.

  20. vegas disse:

    é o Slideshow sim, fica em movimento e tudo, mas infelismente as imagens ao ser add não aparece!!!

  21. .:: Clau ::. disse:

    Silas Yudi
    Não sei o q pode ter acontecido, pois o código no tutorial é exatamente igual ao que o autor do slide explicou, ou seja, é o mesmo código usado no demo.

  22. Silas Yudi disse:

    Tentei descobrir sozinho, mas não consegui:
    Se eu declarar o src da imagem na div rot1 só aparece a imagem 1.

    No código fonte do demo tem assim: img src="" width="800" height="300" class="bg" alt=""/, e funciona perfeitamente, mas quando deixo dessa forma, não aparece nenhuma imagem…

    Entende o que eu quero dizer? Tem como resolver este problema?

  23. Alex- Admin disse:

    Muito obrigado por me responder tão rápido! To colocando o Breadcrumb no meu Blog! Até +

  24. .:: Clau ::. disse:

    Mundodadanca1,
    Juliana

    Obrigada pelos comentários! *_*

    Silas Yudi
    Realmente vc tinha razão…verifiquei que o restante do código não apareceu no post, não sei pq..mas eu já corrigi..obrigada pelo toque! 😉

    Alex-Admin
    Eu já publiquei um tutorial ensinando a instalar esse recurso. Dá uma conferida neste tutorial:
    Instalar Ferramenta Breadcrumb no Blog

  25. Alex- Admin disse:

    Olá Clau! Muito boa esta postagem… Posso te pedir uma coisa?
    Como é que coloca isto (Inicio » Slides » Slideshow com Menu Deslizante) em meu Blog. Esta Hierarquia de links, que está acima do post?
    Desde já, agradeço!

  26. Silas Yudi disse:

    No meu não funcionou e olhando o código fonte do demo descobri q está faltando mais um script… com ele funcionou…

  27. Juliana disse:

    Lindo!!!!!!!!!!!!!

  28. mundodadanca1 disse:

    Excelente Slide Show, de muito bom gosto e bem profissional. Futuramente aplicarei este em meu blog para inaugurar uma sessão de vendas.

    Abraço
    Roger Dance

  29. .:: Clau ::. disse:

    Felipe Correia
    Se vc não viu, há 2 dias atrás eu publiquei um tutorial que ensina a Ocultar widgets em determinada página. Dê uma conferida no tutorial que irá te ajudar.

  30. Felipe Correia disse:

    eu so não gostei que colocando em um Gadget ele aparece em todas as paginas, se tiver como ensinar como colocar so na primeira pagina eu ficarei grato!
    Mais fora isso é tudo perfeito!

  31. animais-nanet disse:

    Otimo, esse eu vou usar no meu blog! valeu!

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