Tutorial Blogger – Colocando slide de imagens em JQuery

Pode ver um pequena demostração acessando nossa página de testes. Está funcionando perfeitamente e sem erros na página, na plataforma Blogger.

Recomendo que faça o backup do template antes de seguir com este tutorial, para que possa voltar caso haja um erro na edição ou no layout.

Indo ao editor do template

Primeiramente, acesse o seu painel do Blogger, abra o menu dropdown e elcolha a opção “Modelo”. Depois clique no botão chamado “Editar HTML” e “Prosseguir”.

Código: no código HTML do blogger pesquise por :

</head>

Encontrou? Caso tenha visto, copie os códigos abaixo e cole em cima da linha pesquisada:
Código:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/> <!--[if IE]> <style type="text/css"> .timer { display: none !important; } div.caption { background:transparent; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000);zoom: 1; } </style> <![endif]--> <script type='text/javascript'> $(window).load(function() { $('#featured').orbit({ advanceSpeed: 5000, 'bullets': true, 'timer' : true, 'animation' : 'horizontal-slide' }); }); </script> <script type='text/javascript'> //<![CDATA[ /* * jQuery Orbit Plugin 1.1 * www.ZURB.com/playground * Copyright 2010, ZURB * Free to use under the MIT license. * http://www.opensource.org/licenses/mit-license.php */ (function(e){e.fn.orbit=function(a){a=e.extend({animation:"fade",animationSpeed:800,advanceSpeed:4E3,startClockOnMouseOut:true,startClockOnMouseOutAfter:3E3,directionalNav:true,captions:true,captionAnimationSpeed:800,timer:false,bullets:false},a);return this.each(function(){function m(c){function g(){f.eq(h).css({"z-index":1});s=false}var h=b,k=c;if(h==k)return false;if(!s){s=true;if(c=="next"){b++;if(b==n)b=0}else if(c=="prev"){b--;if(b<0)b=n-1}else{b=c;if(h<b)k="next";else if(h>b)k="prev"}a.bullets&& x();if(a.animation=="fade"){f.eq(h).css({"z-index":2});f.eq(b).css({opacity:0,"z-index":3}).animate({opacity:1},a.animationSpeed,g);a.captions&&o()}if(a.animation=="horizontal-slide"){f.eq(h).css({"z-index":2});k=="next"&&f.eq(b).css({left:t,"z-index":3}).animate({left:0},a.animationSpeed,g);k=="prev"&&f.eq(b).css({left:-t,"z-index":3}).animate({left:0},a.animationSpeed,g);a.captions&&o()}if(a.animation=="vertical-slide"){f.eq(h).css({"z-index":2});k=="prev"&&f.eq(b).css({top:u,"z-index":3}).animate({top:0}, a.animationSpeed,g);k=="next"&&f.eq(b).css({top:-u,"z-index":3}).animate({top:0},a.animationSpeed,g);a.captions&&o()}}}var b=0,n=0,t,u,s,d=e(this).addClass("orbit"),f=d.find("img, a img");f.each(function(){var c=e(this),g=c.width();c=c.height();d.width(g);t=d.width();d.height(c);u=d.height();n++});f.eq(b).css({"z-index":3});if(a.timer){d.append('<div class="timer"> <span class="mask"><span class="rotator"></span></span><span class="pause"></span></div> ');var j=e("div.timer"),p;if(j.length!=0){var C= a.advanceSpeed/180,v=e("div.timer span.rotator"),y=e("div.timer span.mask"),z=e("div.timer span.pause"),l=0,A,w=function(){p=true;z.removeClass("active");A=setInterval(function(){var c="rotate("+l+"deg)";l+=2;v.css({"-webkit-transform":c,"-moz-transform":c,"-o-transform":c});if(l>180){v.addClass("move");y.addClass("move")}if(l>360){v.removeClass("move");y.removeClass("move");l=0;m("next")}},C)},q=function(){p=false;clearInterval(A);z.addClass("active")};w();j.click(function(){p?q():w()});if(a.startClockOnMouseOut){var B; d.mouseleave(function(){B=setTimeout(function(){p||w()},a.startClockOnMouseOutAfter)});d.mouseenter(function(){clearTimeout(B)})}}}if(a.captions){d.append('<div class="caption"> <span class="orbit-caption"></span></div> ');var r=d.children("div.caption").children("span").addClass("orbit-caption").show(),o=function(){var c=f.eq(b).attr("rel"),g=e("#"+c).html(),h=r.height()+20;r.attr("id","#"+c).html(g);g?r.parent().stop().animate({bottom:0},a.captionAnimationSpeed):r.parent().stop().animate({bottom:-h}, a.captionAnimationSpeed)};o()}if(a.directionalNav){d.append('<div class="slider-nav"> <span class="right">Right</span><span class="left">Left</span></div> ');j=d.children("div.slider-nav").children("span.left");var D=d.children("div.slider-nav").children("span.right");j.click(function(){a.timer&&q();m("prev")});D.click(function(){a.timer&&q();m("next")})}if(a.bullets){d.append('<ul class="orbit-bullets"></ul> ');var E=e("ul.orbit-bullets");for(i=0;i<n;i++){j=e(" <li>"+i+"</li> ");e("ul.orbit-bullets").append(j); j.data("index",i);j.click(function(){a.timer&&q();m(e(this).data("index"))})}var x=function(){E.children("li").removeClass("active").eq(b).addClass("active")};x()}})}})(jQuery); //]]> </script>

Adicionando estilos ao slide

O próximo passo é adicionar os estilos (ou CSS).

Para colocar no template, pesquise por:
Código:

]]></b:skin>

E cole acima as seguintes linhas CSS:
Código: /* ORBIT SLIDER ----------------------------------------------- */ #featured {height: 1px; width: 1px; overflow: hidden;} div.orbit { width: 1px; height: 1px; position: relative; overflow: hidden; } div.orbit img { position: absolute; top: 0; left: 0; } div.orbit a img {border: none;} div.timer { width: 40px; height: 40px; overflow: hidden; position: absolute; top: 10px; right:10px; opacity: .6; cursor: pointer; z-index: 1001; } span.rotator { display: block; width: 40px; height: 40px; position: absolute; top: 0; left: -20px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMrn08wb2O9ox8n4WmnT5gP2uMbPQ5rWcT1VTCTEyC8OlZFNTSID4LHH3D_mv7ZwjECH6mxpEsr5VYcpAnhIwGMViy2XQMwuu3u3GbOF5fksiym4gSGWkDRREPAGlLfqEMmkHvvEwqHr3I/s1600/rotator-black.png); background-repeat: no-repeat; z-index: 3; } span.mask { display: block; width: 20px; height: 40px; position: absolute; top: 0; right: 0; z-index: 2; overflow: hidden; } span.rotator.move {left: 0;} span.mask.move { width: 40px; left: 0; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoO1loxHHFdnkvm7XTTR0wYIq49aeLXXCANrtrfcVAchGqfE_5dqZRfW8o3_lpZNdGxqAxHW3qbig4hkeoYtipiSt7TIE1vz-BrXqu21ou9RM2tDiTH09WryzlsYl9_ICiJgTpO5yrfveu/s1600/timer-black.png); background-repeat: repeat; background-position: 0px 0px; } span.pause { display: block; width: 40px; height: 40px; position: absolute; top: 0; left: 0px; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOaNpWc_PwRTytqftYaUlC3otYvAi-IWFEinr4PcZ8kgctveUQQt92_iTg2xu8kJh_ChgEQo5CDmTua8TzhxlhKijipILJWnv3sOJXU48IVhXB9mKYm5CNKANgNq89mTBuTI7evyIV-kZt/s1600/pause-black.png); background-repeat: no-repeat; z-index: 4; opacity: 0; } div.timer:hover span.pause, span.pause.active, div.timer:hover span.pause.active { opacity: 1; } div.caption { background: #000; background: rgba(0,0,0,.6); width: 100%; z-index: 1000; position: absolute; bottom:-100px; color: #fff; padding: 8px 0; text-align: center; } div.caption span { padding: 0 10px; font-size: 14px; text-shadow: 0px 1px 0px rgba(0,0,0,.8); margin: 0; } .orbit-caption { display: none; } div.orbit:hover div.slider-nav { display: block; } div.slider-nav { display: none; } div.slider-nav span { width: 33px; height: 33px; text-indent: -9999px; position: absolute; z-index: 1000; top: 43%; cursor: pointer; } div.slider-nav span.right { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgStcb0piHmbFJT9TKyMWP7qVLidNI0hfuPOV7P7HYMh_Z9rMJ8n5mVplpoFGsvdKNl75CRWAxItAChJvvobj0xztnXW0ZLLPjFC0qxXpmu4HCywdZgg9VwVQcx_ke9-UuRUmR1RAghbixy/s1600/right-arrow.png); right: 10px; } div.slider-nav span.left { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5ib9O0cJi2S063dqjHwxqHOxU_9kB-caOKBeIUDxPlnUTdjhGGJthskjGO3uORtuVfUAJfPQRbT4LlfYbKY6aU1C8jL9ZZcUTwu5hob4bTlKIt25AqOQ7CXAIobSXDzsUIwmfsxIqFWa9/s1600/left-arrow.png); left: 10px; } .orbit-bullets { position: absolute; z-index: 1000; list-style: none; top: 10px; left: 7px; margin: 0; padding: 0; } .orbit-bullets li { float: left; margin-left: 5px; cursor: pointer; color: #999; text-indent: -9999px; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkUHjZalrSqSCk46nOARU8TiGYn-mC3XCs2HEv487yhrVSYkuXL2FYwWov5o8DItEPkwIka-_EvNjkb5nspx9BVlxjC8lShgOwi6-gk7hM4jSB6VfT8OtozKDe9p64CFDJPP5XkgcxUSAx/s1600/bullets.png); background-repeat: no-repeat; background-position: 0 0; width: 7px; height: 7px; overflow: hidden; } .orbit-bullets li.active { color: #222; background-position: -7px 0; }

Colocando as linhas HTML no template

Por fim, ensinar a colocar algumas linhas adicionais para visualizar o slide na página do seu blog. Para isso, crie um novo gadget na página layout no painel do Blogger e cole dentro o seguinte código:
Código:

<b:if cond='data:blog.homepageUrl == data:blog.url'> <div id='featured'> <a href="LINK_IMAGEM_1"><img rel='foto1' src="URL_IMAGEM_1" style='width:580px; height:325px;'/></a><span class='orbit-caption' id='foto1'>DESCRIÇÃO_IMAGEM_1</span> <a href="LINK_IMAGEM_2"><img rel='foto2' src="URL_IMAGEM_2" style='width:580px; height:325px;'/></a><span class='orbit-caption' id='foto2'>DESCRIÇÃO_IMAGEM_2</span> <a href="LINK_IMAGEM_3"><img rel='foto3' src="URL_IMAGEM_3" style='width:580px; height:325px;'/></a><span class='orbit-caption' id='foto3'>DESCRIÇÃO_IMAGEM_3</span> <a href="LINK_IMAGEM_4"><img rel='foto4' src="URL_IMAGEM_4" style='width:580px; height:325px;'/></a><span class='orbit-caption' id='foto4'>DESCRIÇÃO_IMAGEM_4</span> </div> </b:if>

Coloque os links do artigo que representa a imagem onde está escrito “LINK_IMAGEM”, adicione a URL da imagem onde está aparecendo “URL_IMAGEM” e descrição em cada linha.

Qualquer duvida é só deixar seu comentário, Sucesso!

Posted in: Tutorial