Imagens deslizantes em blogs no estilo Slides

Olá querido leitor! Hoje veio trazer algo bem interativo para você colocar em seu blog e ajudar seus leitores à buscar os destaques do seu blog. É um gadget de slides que você mesmo adiciona as imagens, link, descrição (pois não é automático). Com o estilo minimalista, é bem bonito e elegante. Fiz algumas modificações na estrutura dele para ficar mas chamativo.

Veja a demonstração

Gostarem de ver a demonstração? Então vamos seguir com o tutorial!

1. Acesse a guia Modelo e clique no botão Fazer backup/Restaurar e faça um cópia de segurança do seu template clicando no botão Fazer download do modelo completo.

2. Ainda na guia Modelo, clique no botão Editar HTML. Pressione Ctrl+F para abrir o Localizador e procure pela tag abaixo.

</head>

3. Depois de encontrada, cole acima dela o código a seguir. Se desejar fazer modificações para combinar com seu template, modifique apenas os locais indicados para não causar transtornos.

<style>

#slidearea{

height: 250px;

overflow: hidden;

position: relative;

width:980px;

background:#fff;

border:2px solid #fff;

margin:20px 0px 20px 0px;

box-shadow: 0 0 8px #aaa;

-moz-box-shadow: 0 0 8px #aaa;

-webkit-box-shadow: 0 0 8px #aaa;

}

ul.kwicks{

margin:0px;

padding:0px 10px;

list-style:none;

}

.kwicks li {

float: left;

width: 196px;

height: 250px;

position:relative;

}

.kwikmet{

position:absolute;

bottom:10px;

left:10px;

right:10px;

display:none;

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIUMLau_KvJOOGckEu2vhlqrbm5hHg9enXW-78PT5pYXmCn5wCYUREkdUA8R4vdNMpla9sDMamnC_Go4YoXGYRzxsIt3MZ7807CtV85EWABoN_ExA5t8IsALoGaV_x6mdQuLhnorkkk2g/s1600/trans.png);

padding:10px;

width:710px;

color:#888;

}

.kwikmet h2 a{

color:#fff;

font-size:16px;

text-align: center;

font-family:Arial;

font-weight:normal;

padding-bottom:10px;

}

.slidimg{

width:750px;

height:250px;

}

.rounded{

border-radius: 4px;

-moz-border-radius: 4px;

-webkit-border-radius: 4px;

}

</style>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.js' type='text/javascript'/>

<script type='text/javascript'><!--//--><![CDATA[//><!--

/**

* hoverIntent r5 // 2007.03.27 // jQuery 1.1.2+

* <http://cherne.net/brian/resources/jquery.hoverIntent.html>

* 

* @param  f  onMouseOver function || An object with configuration options

* @param  g  onMouseOut function  || Nothing (use configuration options object)

* @author    Brian Cherne <brian@cherne.net>

*/

(function($){$.fn.hoverIntent=function(f,g){var cfg={sensitivity:7,interval:100,timeout:0};cfg=$.extend(cfg,g?{over:f,out:g}:f);var cX,cY,pX,pY;var track=function(ev){cX=ev.pageX;cY=ev.pageY;};var compare=function(ev,ob){ob.hoverIntent_t=clearTimeout(ob.hoverIntent_t);if((Math.abs(pX-cX)+Math.abs(pY-cY))<cfg.sensitivity){$(ob).unbind("mousemove",track);ob.hoverIntent_s=1;return cfg.over.apply(ob,[ev]);}else{pX=cX;pY=cY;ob.hoverIntent_t=setTimeout(function(){compare(ev,ob);},cfg.interval);}};var delay=function(ev,ob){ob.hoverIntent_t=clearTimeout(ob.hoverIntent_t);ob.hoverIntent_s=0;return cfg.out.apply(ob,[ev]);};var handleHover=function(e){var p=(e.type=="mouseover"?e.fromElement:e.toElement)||e.relatedTarget;while(p&&p!=this){try{p=p.parentNode;}catch(e){p=this;}}if(p==this){return false;}var ev=jQuery.extend({},e);var ob=this;if(ob.hoverIntent_t){ob.hoverIntent_t=clearTimeout(ob.hoverIntent_t);}if(e.type=="mouseover"){pX=ev.pageX;pY=ev.pageY;$(ob).bind("mousemove",track);if(ob.hoverIntent_s!=1){ob.hoverIntent_t=setTimeout(function(){compare(ev,ob);},cfg.interval);}}else{$(ob).unbind("mousemove",track);if(ob.hoverIntent_s==1){ob.hoverIntent_t=setTimeout(function(){delay(ev,ob);},cfg.timeout);}}};return this.mouseover(handleHover).mouseout(handleHover);};})(jQuery);

//--><!]]></script>

<script type='text/javascript'><!--//--><![CDATA[//><!--

/*

 Kwicks for jQuery (version 1.5.1)

 Copyright (c) 2008 Jeremy Martin

 http://www.jeremymartin.name/projects.php?project=kwicks

 Licensed under the MIT license:

  http://www.opensource.org/licenses/mit-license.php

 Any and all use of this script must be accompanied by this copyright/license notice in its present form.

*/

(function($){$.fn.kwicks=function(n){var p={isVertical:false,sticky:false,defaultKwick:0,event:'mouseover',spacing:0,duration:500};var o=$.extend(p,n);var q=(o.isVertical?'height':'width');var r=(o.isVertical?'top':'left');return this.each(function(){container=$(this);var k=container.children('li');var l=k.eq(0).css(q).replace(/px/,'');if(!o.max){o.max=(l*k.size())-(o.min*(k.size()-1))}else{o.min=((l*k.size())-o.max)/(k.size()-1)}if(o.isVertical){container.css({width:k.eq(0).css('width'),height:(l*k.size())+(o.spacing*(k.size()-1))+'px'})}else{container.css({width:(l*k.size())+(o.spacing*(k.size()-1))+'px',height:k.eq(0).css('height')})}var m=[];for(i=0;i<k.size();i++){m[i]=[];for(j=1;j<k.size()-1;j++){if(i==j){m[i][j]=o.isVertical?j*o.min+(j*o.spacing):j*o.min+(j*o.spacing)}else{m[i][j]=(j<=i?(j*o.min):(j-1)*o.min+o.max)+(j*o.spacing)}}}k.each(function(i){var h=$(this);if(i===0){h.css(r,'0px')}else if(i==k.size()-1){h.css(o.isVertical?'bottom':'right','0px')}else{if(o.sticky){h.css(r,m[o.defaultKwick][i])}else{h.css(r,(i*l)+(i*o.spacing))}}if(o.sticky){if(o.defaultKwick==i){h.css(q,o.max+'px');h.addClass('active')}else{h.css(q,o.min+'px')}}h.css({margin:0,position:'absolute'});h.bind(o.event,function(){var c=[];var d=[];k.stop().removeClass('active');for(j=0;j<k.size();j++){c[j]=k.eq(j).css(q).replace(/px/,'');d[j]=k.eq(j).css(r).replace(/px/,'')}var e={};e[q]=o.max;var f=o.max-c[i];var g=c[i]/f;h.addClass('active').animate(e,{step:function(a){var b=f!=0?a/f-g:1;k.each(function(j){if(j!=i){k.eq(j).css(q,c[j]-((c[j]-o.min)*b)+'px')}if(j>0&&j<k.size()-1){k.eq(j).css(r,d[j]-((d[j]-m[i][j])*b)+'px')}})},duration:o.duration,easing:o.easing})})});if(!o.sticky){container.bind("mouseleave",function(){var c=[];var d=[];k.removeClass('active').stop();for(i=0;i<k.size();i++){c[i]=k.eq(i).css(q).replace(/px/,'');d[i]=k.eq(i).css(r).replace(/px/,'')}var e={};e[q]=l;var f=l-c[0];k.eq(0).animate(e,{step:function(a){var b=f!=0?(a-c[0])/f:1;for(i=1;i<k.size();i++){k.eq(i).css(q,c[i]-((c[i]-l)*b)+'px');if(i<k.size()-1){k.eq(i).css(r,d[i]-((d[i]-((i*l)+(i*o.spacing)))*b)+'px')}}},duration:o.duration,easing:o.easing})})}})}})(jQuery);

//--><!]]></script>

<script type='text/javascript'>

jQuery().ready(function() {

jQuery(&#39;.kwicks&#39;).kwicks({

  max: 750,

       duration: 1000

 });

jQuery(&quot;.kwik&quot;).hoverIntent(function() {

 jQuery(this).children(&quot;.kwikmet&quot;).fadeIn(&quot;slow&quot;) ;

 }, function() {

 jQuery(this).children(&quot;.kwikmet&quot;).fadeOut(&quot;3000&quot;);

 });

}); 

</script>

4. Depois, clique no botão Visualizar e veja se estar tudo correto, depois clique no botão Salvar modelo.

5. Acesse agora a guia Layout e procure o local desejado para colocar o gadget e clique em Adicionar um gadget. Escolha a opção Editar HTML/JavaScript e cole o código a seguir.
Aviso: O local mais conveniente para se colocar o gadget, é o footer, como coloquei no blog de testes. Já tentei colocar por meio de códigos (header-outer) e nçao deu certo, também acima das postagens o gadget fica cortado e abaixo do cabeçalho, deu erro. Mas tente em seu template, pois tudo depende do que se estar usando!

<div id='slidearea'>
<ul class='kwicks'>
<li class='kwik'>
<a href='#'>
<img alt="" class="slidimg" src="URL da imagem" style="width: 750px; height: 250px;" />
</a>
<div class='kwikmet rounded'>
<h2><a href='#' rel='bookmark' title=''>Título</a></h2>
<p>Conteúdo</p>
</div>
</li>
<li class='kwik'><a href='#'><img alt="" class="slidimg" src="URL da imagem" style="width: 750px; height: 250px;" /></a>
<div class='kwikmet rounded'><h2><a href='#' rel='bookmark' title=''>Título</a></h2><p>Conteúdo</p></div></li>
<li class='kwik'>
<a href='#'>
<img alt="" class="slidimg" src="URL da imagem" style="width: 750px; height: 250px;" />
</a>
<div class='kwikmet rounded'>
<h2><a href='#' rel='bookmark' title=''>Título</a></h2>
<p>Conteúdo</p>
</div>
</li>
<li class='kwik'>
<a href='#'>
<img alt="" class="slidimg" src="URL da imagem" style="width: 750px; height: 250px;" />
</a>
<div class='kwikmet rounded'>
<h2><a href='#' rel='bookmark' title=''>Título</a></h2>
<p>Conteúdo</p>
</div>
</li>
<li class='kwik'>
<a href='#'>
<img alt="" class="slidimg" src="URL da imagem" style="width: 750px; height: 250px;" />
</a>
<div class='kwikmet rounded'>
<h2><a href='#' rel='bookmark' title=''>Título</a></h2>
<p>Conteúdo</p>
</div>
</li>
</ul>
<div class='clear'/>
</div></div>

Modifique as partes destacadas de rosa, pelo link da sua postagem ou algo em destaque, blog parceiro. Modifique as partes destacadas de laranja pelo link que queira que fique no título (por exemplo: link de postagem). Modifique as partes destacadas de vermelho pelo Título do slide ou postagem. As partes de verde, a descrição do slide ou da postagem. E as de azul, pelo link da imagem. Caso queira colocar mais slides, repita a parte destacada de negrito.

6. Clique em Salvar e depois em Salvar organização. Depois visualize o seu blog.

Pronto, slide colocado com sucesso. Para não deixar o post tão grande como já está, vamos logo terminá-lo, né? Então, utilize os botões abaixo para compartilhar o artigo e até mais (Boa sorte!).