Slideshow no Blogger

Bem galera hoje vou ensinar como colocar Slideshow do topo do do blogger!
Primeiro vai um tutorial e depois a video aula ok!

Para colocar um slideshow em seu blog, antes de mais nada é preciso encontrar as imagens que farão parte do conjunto de slides. No tutorial da amiga Gema, foram utilizadas imagens no tamanho 750 x 250 px. Edite as imagens de sua preferência, usando um site ou programa apropriado e hospede-as no Tinypic.
Faça um backup do template. Vá em design>editar HTML e, usando o comando Crtl+F do teclado,  procure pela tag </head>. Cole antes dela o seguinte código:

<style>

#slidearea{
height: 250px;
overflow: hidden;
position: relative;
width:980px;
background:#fff;
border:5px solid #fff;
margin:20px 0px 20px 0px;
box-shadow: 0 0 10px #aaa;
-moz-box-shadow: 0 0 10px #aaa;
-webkit-box-shadow: 0 0 10px #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/AVvXsEhW6QymQ9yYpAcNXS-Vt9HJo9hg6QnWO5JnazDWSD9Rq6__qYIG5A-oFbK8pcl_diIgigLjKOgUH83j9__D5xdzTVoAVywZNWD7xh6_T-jbcCYtkOHfZlnMbatcmRh_CqHy8govjRHEMrI/s1600/trans.png);
padding:10px;
width:710px;
color:#888;
}
.kwikmet h2 a{
color:#fff;
font-size:16px;
font-family:georgia;
font-weight:normal;
padding-bottom:10px;
}
.slidimg{
width:750px;
height:250px;
}
.rounded{
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
</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>

Visualize o template para verificar se está tudo bem e salve.

Agora, vá em design>elementos de página e clique em adicionar gadget.

Escolha o gadget HTML/javascript e cole o seguinte código:

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

A cada slide que você for incluir, faça as seguintes substituições:

<a href='#'> (coloque o link que será associado à imagem)
<img alt="" class="slidimg" src="URL da imagem" style="width: 750px; height: 250px;" />
</a> (cole a URL e o tamanho da da imagem)
<div class='kwikmet rounded'>
<h2><a href='#' rel='bookmark' title=''>Título</a></h2> (dê um título à imagem)
<p>Conteúdo</p> (escreva uma descrição)

Vejam um exemplo, usando o template Style:

<a href='http://www.templates.dicasblogger.com.br/2010/09/template-style.html'> (link que será associado à imagem)
<img alt="" class="slidimg" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimpVtl_PeV2sXb2jTEDPbagv3aYZsbpOCAfx8pySCZir4W5efPBb9e3NIVfQrZ21W2TiZbIWS9dHgTvfIYNqX0WyZuOBPL0ED46qKZ04xkD7nISBIY5oP8OlJzXMwuBbM_XQdw1p9Uu1Jl/?imgmax=800" style="width: 750px; height: 250px;" />
</a> ( URL e tamanho da imagem)
<div class='kwikmet rounded'>
<h2><a href='#' rel='bookmark' title=''>Template Style</a></h2> (título)
<p>O template Style possui  1 coluna de cada lado etc…</p> (descrição)

Gostou da caixinha de códigos?Aprendi a fazer lá no Dicas Blogger ;)