domingo, 6 de maio de 2012

Como colocar slide no blog ?

Tutorial atualizado
Tumblr_liz9xzhmna1qacuiro1_500_large
Hooy povo   Hoje eu vou ensinar a vocês como colocar um slide no blog facilmente, o resultado será semelhante a este (www). Além de fácil é ideal pra quem quer destacar certos assuntos do blog. Fiquem a vontade para editar as cores e tals, ok?

As imagens deste slide devem ter os mesmos tamanhos ok? Exemplo: As imagens usadas no Demo são 750x250

 Vá no seu HTML e cole o código BAIXO antes de </HEAD> 

<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/AVvXsEjEDCcHM8n-roDLHI7pTzin0ZPQfqg_XaQ308OMS0FjyjTEQqV9RRpMww-ZZV8sNUUoyaKlczyKsnawPBgpHrruVsNcFVm0pUKcpHLg1xkaKHCT_0K1JxGjZ-F_s968h6mytWTwq__tRo0/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 se estiver tudo ok ... 
Salve!

O próximo código você cola onde quiser que o slide apareça ou como um novo elemento HTML / JavaScript 

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

Modificações a serem feitas: 

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


Super fácil né gente!
''O outro slide apresentou problemas por isso o substitui rapidamente, ok?''
Super créditos: Dicas Blogger
Espero que tenham gostado, Bye -

52 comentários :

  1. Acho Slide super-útil em blogs estilo Revista ,além de chamar bastante atenção eles tão uma força na hora dos comentários ,não sei poorq mas acho que eles atraem mais seguidores em menos tempo do que os nossos kk"

    http://quandochegardezoito.blogspot.com.br/

    ResponderExcluir
  2. Amei Jackie em breve eu colocarei no meu blog :D


    Jackie , meu blog é novinho.. dá uma passadinha lá? ---> www.thecrazyoficial.blogspot.com

    ResponderExcluir
  3. Anwwww que fofo fica *-*
    Em breve vou testar :)
    Beijos Jackie *u*

    ResponderExcluir
  4. Amei Jackie o/ Não sei se vou usar, mas mesmo assim, ótimo tuto!

    ResponderExcluir
  5. Muito fácil, Jackie! Vou colocar no meu! Beijos!

    http://meninablogueiratutoriais.blogspot.com.br/

    ResponderExcluir
  6. Eu já pensei em colocar os meus selinhos em um slide, e com esse que você acabou de ensinar vou conseguir, obrigada! Passa no blog?

    http://www.cravos-e-rosas.blogspot.com.br/

    ResponderExcluir
  7. Há, sempre quis colocar um desses, brigadinha linda!

    Nhaaaac ~~> 4-Brownies.blogspot.com

    ResponderExcluir
  8. Ishh :\ no meu não deu muito certo, ficou todo errado :( aosdiasodia, fazer o que... Ah, Jackie, tá tendo um concurso lá no meu blog! Se você quiser participar... ^^#BezosDani meianoites2.blogspot.com

    ResponderExcluir
  9. Ótimo tuto , jackie ! Muito obrigada por nos ajudar mais uma vez !!

    Beijos , Dinti
    http://maniadegarotas2s2.blogspot.com

    ResponderExcluir
  10. Adorei o tuto e não é difícil como eu pensava rrs
    bjs
    http://conversando-com-a-lua.blogspot.com.br/

    ResponderExcluir
  11. Que mara!
    Eu era viciada em slider antigamente rs
    bjãoo Jackie

    ResponderExcluir
  12. OMG *O*
    sempre quis aprender fazer isso *----*
    Tia Jackie mandei a nova entrevista essa será pra minha revista, aquela antiga foi cancelada =/
    Mais essa veio com perguntas bem mais criativas!
    Obrigada por aceitar fazer a entrevista ♥
    Bjooo ;*

    ResponderExcluir
  13. Gostei mais esse tem que muda toda hora quando vim uma postagem nova não sabe de um automatico não? :h:

    ResponderExcluir
  14. Aaadoreii seuu blogg tto seguindo seque o meu ??

    http://teen-dream-s2.blogspot.com.br/

    ResponderExcluir
  15. Adorei mais ja sabia que ia fazer um tutu desse,porque vi sua nova página extra e achei linda!e é claro que a jackie ia contar tudo para gente kkk!
    http://brilhants.blogspot.com.br/

    ResponderExcluir
  16. Ja coloquei seu banner na galeria de parceiros do meu blog http://fascinadospormegacity.blogspot.com.br/p/galeria-de-parceria.html

    ResponderExcluir
  17. Jackie, seu blog é um dos meus favoritos! Você aceita afiliação? http://candy-bruna.blogspot.com

    ResponderExcluir
  18. NOSSA AMEI
    tuto super explicado parabéns
    xaau bjss
    >> magic-world-2.blogspot.com.br <<

    ResponderExcluir
  19. Muito útil esse tutorial, estava procurando por um tutorial assim para o próximo layout do blog!
    Obrigado pela dica!
    Abç

    http://adraftbox.blogspot.com.br/

    ResponderExcluir
  20. @Diesley Sergio HAUHAUHAUH estranhamente sempre pensei a mesma coisa que vc ! rsrs

    ResponderExcluir
  21. Que super! E muito OBG ^^!Saiba que esse tuto vai ter uma cantinho no próximo designer!:h:
    Bom é isso
    Bjs Gee
    http://sonhosdeumagarota123.blogspot.com.br/
    :l:

    ResponderExcluir
  22. :d: legal pode entrar no meu blog?onovositedatm.blogspot.com

    ResponderExcluir
  23. ADOREI SEU BLOG TO SEGUINDO SEGUE O MEU http://camillacardozo.blogspot.com.br/

    ResponderExcluir
  24. Como faço para diminuir o tamanho do slide?

    http://futureofgame.blogspot.com.br/

    ResponderExcluir
  25. amei to usando bezossssssssssssssssssssss

    ResponderExcluir
  26. Como diminui o tamanho do slide ? Beijão (:

    ResponderExcluir
    Respostas
    1. Não recomendo, alterar as larguras se você não entender bem do assunto, tá?

      ALTERE os números em width e vá sisualizando pra ver se é...

      Não sei o local exato (:

      Excluir
  27. oi flor, eu coloquei, mas precisava saber de uma coisa: queria editar a fonte do título e descrição das fotos, e ficar como o seu exemplo. você sabe como faz??
    ♥Make Sem Firula♥

    ResponderExcluir
    Respostas
    1. http://isjackiezzdream.blogspot.com.br/2012/04/instalando-fontes-diferentes-no-blog.html

      Excluir
  28. Vou tentar fazer. Obrigada
    Beijoss,
    minhavidaforadeseerie.blogspot.com.br

    ResponderExcluir
  29. Amei demais o tutu. Arrasou Jackie. Dá uma passadinha??
    ~>> http://www.blogtamila.blogspot.com.br/

    ResponderExcluir
  30. nossa eu adoro as suas postagens , são sempre muito boas .

    ResponderExcluir
  31. Só há um problema (pelo menos aqui):
    Depois de colocar as 4 imagens, ela ficam paradas, quando passa o mouse, não abre a imagem como na demo que mostra no início do tutorial.
    Tem como me ajudar com isso? :/

    Valeu! (:

    ResponderExcluir
    Respostas
    1. Será que vc não apagou nenhuma aspa sem querer?! Ou talvez seu blog esteja com muitos scripts e tals...

      Porque se os códigos tivessem com problemas o Preview tbm não estaria funcionando corretamente, ok?

      beijus

      Excluir
  32. Oooi adorei o slide, coloque no blog aparece certinho a estrutura, mas não consigo colocar as imagens. Preciso de ajuda URGENTE!

    Obrigada

    ResponderExcluir
    Respostas
    1. É alguma dúvida em relação a url?
      Posso tentar ajudar se me der mais informações..

      Excluir
    2. É que eu fiz e ficou assim:http://viagemnomundofeminino.blogspot.com.br/2013/04/ola-meninas-hoje-estou-aqui-com-minha.html

      Não consigo arrumar, você pode me ajudar?

      Excluir
    3. É outro slide, então creio que á tenha resolvido seu problema substituindo o slide?

      Excluir
  33. Ola o meu slide nao se movimenta.. oque faço

    ResponderExcluir
    Respostas
    1. Tente usar quando vc for renovar o template, ás vezes algum código pode estar em conflito com o código do slide...

      Excluir
  34. jakie, eu coloquei no meu blog mais ficou repetindo a imagem uma em baixo da outra .. oque pode ser ?

    ResponderExcluir
  35. eu fiz mas ficou estranho não ficou uma atraz do outro ficou ocupando um super espaço e ta horrivel

    ResponderExcluir
  36. Adorei muito util

    Criandomake.blospot.com

    ResponderExcluir

.