Slideshow no Blogger

Slideshow no Blogger

6 10 99
Slideshow no Blogger 10 6 99
A última moda em matéria templates personalizados para o Blogger, é o uso de um slideshow no alto dos posts ou embaixo do cabeçalho.

Já existiam várias formas de se colocar um slideshow no Blogger, mas a maioria delas dependia de  hospedar externamente um arquivo do tipo .js (javascript).

Por que isso era ruim? Porque no Blogger não existe um serviço de hospedagem de arquivos; dos serviços gratuitos, muitos mudam as regras sem aviso prévio, apagando os arquivos ou mudando as URLs (endereços) dos mesmos.

Hoje eu vi no excelente metablog espanhol Gema Blog, uma forma de usar um slideshow sem precisar de hospedagem externa do arquivo em javascript.

Vejam um exemplo neste lindo template da MamanunesTemplate Animal

 
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 Picasa.
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/AVvXsEisyXd7XhKfVra9GMEfICujKFGbZ86JWtw5l7g4cSRysuPQTynCt41m8YUSk59KxNqXj_y2v5PvzLFgu5b95J0lQ1w4ydTWcJvMFs98On1cJcHwj28RTh1iVC4mxk0lZVsWjR92hH7hwVM/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/AVvXsEhkkwqqzRCShmUmcBuia39_3FwMdOafxKw7C6EW_GMc36gdS7Tofc3bCQIHE6tVGCNRDNemL4BGzNa75bSMP_Y7LOWu4GhONbv53LhCu-87bgGlafMI-QMNcyxk1a-sdHqSIIwmIGxzONEI/?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 Mundo Blogger ;)

Fonte do tutorial: Gema Blog – Otro slider de JQuery
19 Comments
Comments
  1. As imagens desse slideshow são redimensionadas automaticamente, eu devo configurá-las manualmente, ou devo fazer a imagem no tamanho certo?

    ResponderExcluir
  2. Excelente post!

    ------------------
    baixe100pre.blogspot.com

    ResponderExcluir
  3. Não deu certo, as imagens ficam nos lugares certos, mas quando passa o mouse, não passa o slide...

    ResponderExcluir
  4. Olá. Já utilizo o seu blog há algum tempo p cponsulta e ele está na minha lista de sugestões faz tempo.
    Adorei o 'slideshow', porém, como faço para centralizá-lo no meu template? As margens também estão fora do centro(a parte de baixo não aparace). Tentei ajustar no código (diminuindo de 980 para 940), mas não adiantou pq ele vai cortando o tam do último slide (lado direito).
    Deixei lá no blog, por enquanto sem imagem nenhuma. Aguardo sua resposta.Obrigado.
    Junnior
    http://navveguei.blogspot.com

    ResponderExcluir
  5. Olá, Juliana!

    Que ótimo artigo! Essa é a resposta que eu precisava dar a muitos que me procuram depois de eu ter escrito um artigo sobre a tag marquee.

    Como essa tag é bem limitada, muitos procuravam algo mais avançado e seu artigo pode ajudá-los.
    Vou editar o artigo agora mesmo, colocando um link para este seu.

    Um abraço e obrigado por compartilhar!

    ResponderExcluir
  6. Olá Juliana. Ótimo artigo, eu não tenho interesse de por slides em meu blog, não vai bem com o layout que uso. Queria saber se é possível personalizar esses links do formulário de comentários, "Postar Comentário", "Visualizar". Se sim, você poderia me dizer como? Obrigado ;)

    ResponderExcluir
  7. Uau, adorei esse slideshow! Exatamente o tipo de coisa que eu andava procurando O_O()

    ResponderExcluir
  8. Po gostei mesmo.so uma pergunta a imagen ten que ser hospedada no PICASA?

    BrigadO

    www.mundocrazy.3a2.com

    ResponderExcluir
  9. Pessoal, aqui não ficou legal, ja coloquei as imagens no mesmo tamanho do modelo (750x250), segui conforme explicado, mas quando aplico no layout do meu blog fica muito estranho. Se puderem dar uma olhada e alguma dica eu agradeço.

    ResponderExcluir
  10. bordadomundo, vi que seu template é do Designer do Modelo. Não cheguei a testar neles, porque o código é muito diferente do antigo.

    ResponderExcluir
  11. Caro Blogueiro. Obrigado pela dica. Ficou ótimo no meu Blog.Se quiser checar, acesse:
    http://www.bcpandre.blogspot.com/
    Abraços.
    Andre Barreto.

    ResponderExcluir
  12. Olá!

    Amei o post, pena que eu não consegui mesmo!!!

    A imagem aparece bem pequena, com algumas coisas de código aparecendo, além de não ficar centralizado!

    ResponderExcluir
  13. Muito boas essas dicas.
    Queria saber se é possivel hospedar um slide já pronto, feito por exemplo pelo Power Point, ou pelo Movie Maker, etc.

    ResponderExcluir
  14. Juliana, gostaria de uma ajuda!

    já fiz todos os passos do tutorial, mas a barra com título e conteúdo está aparecendo atrás da imagem, ficando oculta!

    Já fucei todo o código e nada...

    Poderia ajudar?

    Se quiser, veja você mesma: http://coroinhasdesantoaleixo.blogspot.com/

    ResponderExcluir
  15. Mto bom esse tutorial, mas assim como o "Ministério dos Coroinhas", o título esta ficando atrás das imagens... o q pode ser?

    ResponderExcluir
  16. Juliana,gostaria que vc desse uma olhada no meu blog,tentei fazer isso,mas o slide não fica centralizado,e os titulos não aparecem direito..
    http://sosparaibadosul.blogspot.com/

    ResponderExcluir
  17. Dependendo de onde vc vai colocar, tem que se saber o tamnho, do lugar que vai receber, e quando for colocar redimensione no primeiro código, assim como naquele onde você colocará as imagens.

    Não adianta redimensionar so no segundo código, pois o brackground que é onde as fotos ficam, ficarão vazados no lugar q vc colocou.



    No meu caso deu tudo certo, so que uma das imagens insiste em não aparecer, mas isso é o de menos e fácil de resolver, o resto tudo ok.


    E uma dúvida vc disse que esse slider não usa java script, mas ele é tem javascript sim, so que esta hospedado em algun lugar.

    Eu acho, não entendo muito dessas coisas.

    ResponderExcluir
  18. Juliana obrigada pela dica meu blog reciclagem ficou melhor com este slid deslizante e obrigada por voce buscar e mais e pelo tempo dispendido a nos seus seguidores entre outras seja muito feliz no seu empreendedorismo no exterior. bjs no coração.

    ResponderExcluir
 
Dicas Blogger© 2007-2015 | Todos os direitos reservados | Design By Duy Templates
Top