Instalar Slideshow com Menu Deslizante no Blogger

• Facebook
• WhatsApp
• Twitter
• Pinterest
• LinkedIn

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.

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:

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

• Facebook
• WhatsApp
• Twitter
• Pinterest
• LinkedIn