Slideshow com Menu Deslizante

E aew galera hj vou postar um tutorial muito pedido aqui no chat, neste tutorial você aprenderá um outro modelo de Slideshow que funciona a base de JQuery e CSS3.

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.







Demonstração

É bom que você faça um Backup do seu template antes de prosseguir para evitar transtornos, caso algo saia errado.


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

Faça download deste arquivo

Depois de ter feito o Download do arquivo Hospede o arquivo em seu próprio site de hospedagem tais como: Dropbox
Agora vá na aba >>design>>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!
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><---conteúdo do arquivo.txt--->




Agora volte em “Design >> Editar HTML” e procure pela tag ]]>e cole ANTES dela:
/* Slideshow com Menu ----------------------------------------------- */ .rotator{ background-color:#687684; 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:#fff; margin:1px -20px 1px 0px; opacity:0.7; color:#f0f0f0; font-size:20px; border:2px solid #ccc; 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 #ccc; font-weight:normal; font-size:46px; padding:15px;} .rotator .description{ width:500px; height:40px; position:absolute; bottom:0px; left:0px; padding:20px; background-color:#000; -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.5; border-top:1px solid #ccc; border-right:1px solid #ccc;} .rotator .description p{ text-shadow:-1px 1px 1px #000; text-transform:none; letter-spacing:normal; line-height:26px;} a.more{ color:#f9f9f9; text-decoration:none; text-transform:uppercase; font-size:10px;} a.more:hover{ color:#fff; }


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.
Volte na aba “Design” >>”Elementos da página”, 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>



Apesar de ser muito demorada vale a pena! Espero que tenham gostado...Comentem :3