Widgets

Como adicionar Slideshow no blog/blogger

27 comentários

Como adicionar Slideshow no blog/blogger


como adicionar slideshow no blog


Agora iremos aprender Como adicionar Slideshow no blog/blogger,para destacar sua postagens mais populares . Fica bem bonito e é muito simples de implantar e torna-lo do seu jeito.
No script abaixo, altere o tamanho das imagens de acordo com seu gosto ou nas medidas do seu template.
Mude a cor do background, da exibição, cor e formato das bordas.
Caso queira a velocidade de exibição também pode ser alterada.
Então, após esta breve explanação, vamos ao que interessa:



Códigos/Script

Para mudar as cores do background, largura, formato e cor das bosdas, procure o código:background: #000000;
(veja tabela de cores AQUI)

border: 5px inset #584536;

5px é a largura da borda


inset é o formato, pode ser double, outset, solid, dashed

width: 550px; (largura)
height: 200px; (altura)
width: 550px; (largura)
Como inserir o script e as imagens acima da área de postagem:
1. Faça o login no Blogger e no seu painel clique em ►Layout

2. Clique na aba ► Editar HTML

3. Encontre a tag </head>
4. Copie código do script e cole- ANTES da tag </ head>
Para mudar o velocidade de slideshow, altere o valor ,timeOut: 4000
quanto menor, mais lento.
Salve o modelo
Agora volte para a página Layout e clique em "Adicionar um gadget" 

Escolha um gadget HTML/JavaScript e cole dentro dele o seguinte código:







<div id="s3slider"> <ul id="s3sliderContent"> <li class="s3sliderImage"> <a href="LINKS PARA SUA IMAGEM"><img style="width:550px;height:200px;" src="http://2.bp.blogspot.com/_DCJ4PAWLOdE/S9bpWEzM6nI/AAAAAAAAEQ8/VXC4YJTouPk/s320/Foto1.jpg" /> <span>Texto: Título do post </span></a> </li> <li class="s3sliderImage"> <a href="LINK PARA SUA IMAGEM"><img style="width:550px;height:200px;" src="http://2.bp.blogspot.com/_DCJ4PAWLOdE/S9bpa1jmhmI/AAAAAAAAERA/ylF-itO90M0/s320/Foto2.jpg" /> <span>Texto: Título do post</span></a> </li><li class="s3sliderImage"> <a href=""LINK PARA SUA IMAGEM><img style="width:550px;height:200px;" src="http://2.bp.blogspot.com/_DCJ4PAWLOdE/S9bpczWGpSI/AAAAAAAAERE/ekpedS9Hb_k/s320/Foto3.jpg" /> <span>Texto: Título do post</span></a> </li> <li class="s3sliderImage"> <a href="LINK PARA SUA IMAGEM"><img style="width:550px;height:200px;" src="http://4.bp.blogspot.com/_DCJ4PAWLOdE/S9bpe77w6BI/AAAAAAAAERI/kt9YqwjxDLI/s320/Foto4.jpg" /> <span>Texto: Título do post</span></a> </li></ul></div> <div class='clear'></div>



Observe que acima, estão 4 span’s, o que significa que teremos 4 imagens no slideshow, caso queira maior numero, e preciso aumentar o numero de li class no javaScript .sempre acima/antes da tag </ul>

Edite o código colocando o link e o endereço da sua imagem ,
Salve. Clique sobre o gadget, arraste e solte acima da seção "Postagens"





Visualize e salve!!



Neste exemplo usei apenas quatro imagens com links.Mas conforme mencionei acima, você pode exibir menos ou mais links acrecentando ou retirando as seções (código abaixo).



ATENÇÃO! Cole sempre os códigos adicionais acima/antes da tag </ul>






<a href="link para sua imagem"><img style="width:550px;height:200px;" src="http://2.bp.blogspot.com/_DCJ4PAWLOdE/S9bpWEzM6nI/AAAAAAAAEQ8/VXC4YJTouPk/s320/Foto1.jpg" /> <span>Texto: Título do post </span></a> </li> Pronto! creio que ira gostar do resultado! CSS Help: Mészáros Róbert -> http://www.perspectived.com/ Version: 1.0 Copyright: Feel free to redistribute the script/modify it, as long as you leave my infos at the top. -------------------------------------------------------------------------- */ (function($){$.fn.s3Slider = function(vars) {var element = this; var timeOut = (vars.timeOut != undefined) ? vars.timeOut : 4000;var current = null; var timeOutFn = null;var faderStat = true;var mOver = false; var items = $("#" + element[0].id + "Content ." + element[0].id + "Image"); var itemsSpan = $("#" + element[0].id + "Content ." + element[0].id + "Image span"); items.each(function(i) {$(items[i]).mouseover(function() {mOver = true;}); $(items[i]).mouseout(function() {mOver = false;fadeElement(true); });});var fadeElement = function(isMouseOut) { var thisTimeOut = (isMouseOut) ? (timeOut/2) : timeOut;thisTimeOut = (faderStat) ? 10 : thisTimeOut; if(items.length > 0) {timeOutFn = setTimeout(makeSlider, thisTimeOut);} else {console.log("Poof..");}} var makeSlider = function() {current = (current != null) ? current : items[(items.length-1)]; var currNo = jQuery.inArray(current, items) + 1currNo = (currNo == items.length) ? 0 : (currNo - 1); var newMargin = $(element).width() * currNo;if(faderStat == true) {if(!mOver) { $(items[currNo]).fadeIn((timeOut/6), function() {if($(itemsSpan[currNo]).css('bottom') == 0) { $(itemsSpan[currNo]).slideUp((timeOut/6), function() {faderStat = false;current = items[currNo]; if(!mOver) {fadeElement(false);}});} else {$(itemsSpan[currNo]).slideDown((timeOut/6), function() { faderStat = false;current = items[currNo];if(!mOver) {fadeElement(false);}});}});}} else {if(!mOver) { if($(itemsSpan[currNo]).css('bottom') == 0) {$(itemsSpan[currNo]).slideDown((timeOut/6), function() { $(items[currNo]).fadeOut((timeOut/6), function() {faderStat = true;current = items[(currNo+1)]; if(!mOver) {fadeElement(false);}});});} else {$(itemsSpan[currNo]).slideUp((timeOut/6), function() { $(items[currNo]).fadeOut((timeOut/6), function() {faderStat = true;current = items[(currNo+1)]; if(!mOver) {fadeElement(false);}})});}}}}makeSlider();}}})(jQuery);//]]></script><script type='text/javascript'>$(document).ready(function() {$(&#39;#s3slider&#39;).s3Slider({timeOut: 4000});});</script><style type='text/css'>#s3slider {background: #000000;border: 5px inset #584536; width: 550px;height: 200px;position: relative;overflow: hidden;}#s3sliderContent {width: 550px;position: absolute;top:-14px;padding: 0px;margin-left: 0;}.s3sliderImage {float: left;position: relative;display: none;}.s3sliderImage span {position: absolute;left: 0;font: 20px Trebuchet MS, sans-serif;padding: 10px 0px;width: 550px;background-color: #000;filter: alpha(opacity=80); -moz-opacity: 0.8;-khtml-opacity: 0.8;opacity: 0.8;color: #fff;display: none;bottom: 0;text-align:center;} .clear {clear: both;}</style>




Para mudar as cores do background, largura, formato e cor das bosdas, procure o código:
background: #000000; (veja tabela de cores AQUI)
border: 5px inset #584536;
5px é a largura da borda
inset é o formato, pode ser double, outset, solid, dashed

#584536 é o código da cor


Borda dotted……………………………………………………………………….
Borda dashed------------------------------------------------------
Borda solid_________________________________________



Para mudar o tamanho das imagens mude:




width: 550px; (largura)
height: 200px; (altura)
width: 550px; (largura)

Como inserir o script e as imagens acima da área de postagem:


1. Faça o login no Blogger e no seu painel clique em ►Layout



2. Clique na aba ► Editar HTML



3. Encontre a tag </head>



4. Copie código do script e cole- ANTES da tag </ head>


Para mudar o velocidade de slideshow, altere o valor ,timeOut: 4000



quanto menor, mais lento.



Salve o modelo






Agora volte para a página Layout e clique em "Adicionar um gadget"



Escolha um gadget HTML/JavaScript e cole dentro dele o seguinte código:




<div id="s3slider"><ul id="s3sliderContent"><li class="s3sliderImage"> <a href="LINKS PARA SUA IMAGEM"><img style="width:550px;height:200px;" src="http://2.bp.blogspot.com/_DCJ4PAWLOdE/S9bpWEzM6nI/AAAAAAAAEQ8/VXC4YJTouPk/s320/Foto1.jpg" /> <span>Texto: Título do post </span></a></li><li class="s3sliderImage"> <a href="LINK PARA SUA IMAGEM"><img style="width:550px;height:200px;" src="http://2.bp.blogspot.com/_DCJ4PAWLOdE/S9bpa1jmhmI/AAAAAAAAERA/ylF-itO90M0/s320/Foto2.jpg" /> <span>Texto: Título do post</span></a></li><li class="s3sliderImage"> <a href=""LINK PARA SUA IMAGEM><img style="width:550px;height:200px;" src="http://2.bp.blogspot.com/_DCJ4PAWLOdE/S9bpczWGpSI/AAAAAAAAERE/ekpedS9Hb_k/s320/Foto3.jpg" /><span>Texto: Título do post</span></a></li><li class="s3sliderImage"> <a href="LINK PARA SUA IMAGEM"><img style="width:550px;height:200px;" src="http://4.bp.blogspot.com/_DCJ4PAWLOdE/S9bpe77w6BI/AAAAAAAAERI/kt9YqwjxDLI/s320/Foto4.jpg" /><span>Texto: Título do post</span></a></li></ul></div><div class='clear'></div>




Observe que acima, estão 4 span’s, o que significa que teremos 4 imagens no slideshow, caso queira maior numero, e preciso aumentar o numero de li class no javaScript .sempre acima/antes da tag </ul>



Edite o código colocando o link e o endereço da sua imagem ,



Salve. Clique sobre o gadget, arraste e solte acima da seção "Postagens"



Visualize e salve!!






Neste exemplo usei apenas quatro imagens com links.Mas conforme mencionei acima, você pode exibir menos ou mais links acrecentando ou retirando as seções (código abaixo).






ATENÇÃO! Cole sempre os códigos adicionais acima/antes da tag </ul>



<li class="s3sliderImage"><a href="link para sua imagem"><img style="width:550px;height:200px;" src="http://2.bp.blogspot.com/_DCJ4PAWLOdE/S9bpWEzM6nI/AAAAAAAAEQ8/VXC4YJTouPk/s320/Foto1.jpg" /> <span>Texto: Título do post </span></a></li>



Pronto! creio que ira gostar do resultado!


Version: 1.0






Copyright: Feel free to redistribute the script/modify it, as


long as you leave my infos at the top.






-------------------------------------------------------------------------- *








(function($){ $.fn.s3Slider = function(vars) { var element = this; var timeOut = (vars.timeOut != undefined) ? vars.timeOut : 4000; var current = null; var timeOutFn = null; var faderStat = true; var mOver = false; var items = $("#" + element[0].id + "Content ." + element[0].id + "Image"); var itemsSpan = $("#" + element[0].id + "Content ." + element[0].id + "Image span"); items.each(function(i) { $(items[i]).mouseover(function() { mOver = true; }); $(items[i]).mouseout(function() { mOver = false; fadeElement(true); }); }); var fadeElement = function(isMouseOut) { var thisTimeOut = (isMouseOut) ? (timeOut/2) : timeOut; thisTimeOut = (faderStat) ? 10 : thisTimeOut; if(items.length > 0) { timeOutFn = setTimeout(makeSlider, thisTimeOut); } else { console.log("Poof.."); } } var makeSlider = function() { current = (current != null) ? current : items[(items.length-1)]; var currNo = jQuery.inArray(current, items) + 1 currNo = (currNo == items.length) ? 0 : (currNo - 1); var newMargin = $(element).width() * currNo; if(faderStat == true) { if(!mOver) { $(items[currNo]).fadeIn((timeOut/6), function() { if($(itemsSpan[currNo]).css('bottom') == 0) { $(itemsSpan[currNo]).slideUp((timeOut/6), function() { faderStat = false; current = items[currNo]; if(!mOver) { fadeElement(false); } }); } else { $(itemsSpan[currNo]).slideDown((timeOut/6), function() { faderStat = false; current = items[currNo]; if(!mOver) { fadeElement(false); } }); } }); } } else { if(!mOver) { if($(itemsSpan[currNo]).css('bottom') == 0) { $(itemsSpan[currNo]).slideDown((timeOut/6), function() { $(items[currNo]).fadeOut((timeOut/6), function() { faderStat = true; current = items[(currNo+1)]; if(!mOver) { fadeElement(false); } }); }); } else { $(itemsSpan[currNo]).slideUp((timeOut/6), function() { $(items[currNo]).fadeOut((timeOut/6), function() { faderStat = true; current = items[(currNo+1)]; if(!mOver) { fadeElement(false); } }); }); } } } } makeSlider(); }; })(jQuery); //]]> </script> <script type='text/javascript'> $(document).ready(function() { $(&#39;#s3slider&#39;).s3Slider({ timeOut: 4000 }); }); </script> <style type='text/css'> #s3slider { background: #000000; border: 5px inset #584536; width: 550px; height: 200px; position: relative; overflow: hidden; }#s3sliderContent { width: 550px; position: absolute; top:-14px; padding: 0px; margin-left: 0; } .s3sliderImage { float: left; position: relative; display: none; } .s3sliderImage span { position: absolute; left: 0; font: 20px Trebuchet MS, sans-serif; padding: 10px 0px; width: 550px; background-color: #000; filter: alpha(opacity=80); -moz-opacity: 0.8; -khtml-opacity: 0.8; opacity: 0.8; color: #fff; display: none; bottom: 0; text-align:center; } .clear { clear: both; } </style>

Para mudar o tamanho das imagens mude:

width: 550px; (largura) 

height: 200px; (altura) 
width: 550px; (largura)


Como inserir o script e as imagens acima da área de postagem:


1. Faça o login no Blogger e no seu painel clique em ►Layout

2. Clique na aba ► Editar HTML

3. Encontre a tag </head>

4. Copie código do script e cole- ANTES da tag </ head>





Para mudar o velocidade de slideshow, altere o valor: ,timeOut: 4000
quanto menor, mais lento.
Salve o modelo

Agora volte para a página Layout e clique em "Adicionar um gadget"

Escolha um gadget HTML/JavaScript e cole dentro dele o seguinte código:





<div id="s3slider"><ul id="s3sliderContent"><li class="s3sliderImage"><a href="LINKS PARA SUA IMAGEM"><img style="width:550px;height:200px;" src="http://2.bp.blogspot.com/_DCJ4PAWLOdE/S9bpWEzM6nI/AAAAAAAAEQ8/VXC4YJTouPk/s320/Foto1.jpg" /><span>Texto: Título do post </span></a></li><li class="s3sliderImage">



<a href="LINK PARA SUA IMAGEM"><img style="width:550px;height:200px;" src="http://2.bp.blogspot.com/_DCJ4PAWLOdE/S9bpa1jmhmI/AAAAAAAAERA/ylF-itO90M0/s320/Foto2.jpg" />









<span>Texto: Título do post</span></a></li><li class="s3sliderImage"><a href=""LINK PARA SUA IMAGEM><img style="width:550px;height:200px;" src="http://2.bp.blogspot.com/_DCJ4PAWLOdE/S9bpczWGpSI/AAAAAAAAERE/ekpedS9Hb_k/s320/Foto3.jpg" /><span>Texto: Título do post</span></a></li><li class="s3sliderImage"><a href="LINK PARA SUA IMAGEM"><img style="width:550px;height:200px;" src="http://4.bp.blogspot.com/_DCJ4PAWLOdE/S9bpe77w6BI/AAAAAAAAERI/kt9YqwjxDLI/s320/Foto4.jpg" /><span>Texto: Título do post</span></a></li></ul></div><div class='clear'></div>




Observe que acima, estão 4 span’s, o que significa que teremos 4 imagens no slideshow, caso queira maior numero, e preciso aumentar o numero de li class no javaScript .sempre acima/antes da tag </ul>






Edite o código colocando o link e o endereço da sua imagem ,






Salve. Clique sobre o gadget, arraste e solte acima da seção "Postagens"






Visualize e salve!!






Neste exemplo usei apenas quatro imagens com links.Mas conforme mencionei acima, você pode exibir menos ou mais links acrecentando ou retirando as seções (código abaixo).






ATENÇÃO! Cole sempre os códigos adicionais acima/antes da tag </ul>




<li class="s3sliderImage">
<a href="link para sua imagem"><img style="width:550px;height:200px;" src="http://2.bp.blogspot.com/_DCJ4PAWLOdE/S9bpWEzM6nI/AAAAAAAAEQ8/VXC4YJTouPk/s320/Foto1.jpg" />
<span>Texto: Título do post </span></a>

</li>

Pronto! creio que ira gostar do resultado!

27 comentários:

  1. em que parte do HTML adiciono o 1° codigo?

    ResponderExcluir
  2. amigão darkness, este é um gadge já pronto, portanto você deve entrar no layout de seu blog e adicionar este javascript no local que melhor lhe convier, sugiro abaixo do cabeçalho...

    ResponderExcluir
  3. Agora, revendo as perguntas de meus leitores, foi que percebi, que esta não ficou bem respondida...pois o que eu deveria ter respondido ao darkness, deveria ter sido "Como inserir o script e as imagens acima da área de postagem:
    1. Faça o login no Blogger e no seu painel clique em ►Layout
    2. Clique na aba ► Editar HTML
    3. Encontre a tag
    4. Copie código do script e cole- ANTES da tag ", conforme sugeri no próprio post... espero que perdoe minha falha....

    ResponderExcluir
  4. Nao Consigo fazer com que as imagens mudem Obs: Coloquei a imagem em baixo do Script ajuda pls ^^!

    ResponderExcluir
    Respostas
    1. Gabriel não inventa, faça conforme eu orientei acima, faça como deve e tudo funcionara, as imagens devem estar onde o script pede, se fizer diferente não vai funcionar...

      Excluir
  5. Me Ajudou muito :>) a dias estou procurando estes codigos muito obrigado voçê me ajudou muito :p

    ResponderExcluir
    Respostas
    1. Opa! Marcio, que bom que tenha encontrado o que procurava.. valeu...

      Excluir
  6. Anônimo16:01

    Não mim ajudou.
    Onde eu boto o códico de script? e atras da tag ? Não intendi pavina nenhuma ...

    ResponderExcluir
    Respostas
    1. Não me ajudou é exagero seu, pois o post é muito fácil de ser implantdo, mas, acho que sua dúvida seria onde por o primeiro código, caso seja, veja isto:Como inserir o script e as imagens acima da área de postagem:
      1. Faça o login no Blogger e no seu painel clique em ►Layout
      2. Clique na aba ► Editar HTML
      3. Encontre a tag
      4. Copie código do script e cole- ANTES da tag

      caso esta não seja sua dúvida, faça sua pergunta novamente bem explicada, confesso que tive dificuldade em entender qual seja ela..

      Excluir
  7. Anônimo10:02

    Muito, muito obrigada!!!
    Deu super certo, muito fácil de aplicar.
    Já tinha encontrado outros mas esse foi o único que colei os códigos e deu tudo certo, perfeito.

    ResponderExcluir
    Respostas
    1. Amiga Beta nunes... agradeço seu feedback e peço a você e a todos os meus leitores que quando gostarem de um determinado post, que o repliquem em seus twitter, facebooks e outros socializadores para que outros tenham o beneficio que lhes foram cedidos... um grande abraço fraterno...

      Excluir
  8. amigo so tem um problema eu axo, ele nao aparece correto no google chrome pq?

    ResponderExcluir
    Respostas
    1. Rafael! meu amigo, fiz uma visitinha em seu blog e não encontrei nenhum slideshow, inclusive com o firefox... será que você o retirou? então se aplica-lo, e não aparecer no chomme é porque seu blog não esta amigavel a este navegador ou o seu computador não tem atualizações necessarias ao bom funcionamento do chomme.. atualize seu windows caso seja este o seu S.O...

      Excluir
  9. Onde eu colo o primeiro Códigos/Script no gadtged ou no HTML do blogger?

    ResponderExcluir
    Respostas
    1. Este comentário foi removido pelo autor.

      Excluir
    2. copie o codigo e cole antes da tag de fechamento da head no html.. < / head >

      Excluir
  10. Valeu, estava procurando faz tempo esse gadget.

    Obrigado

    ResponderExcluir
  11. Olá Mauricio,

    Seria difícil acrescentar um botão de avanço no slider?

    Tks

    ResponderExcluir
    Respostas
    1. Amigo SciFly. fico contente que tenho sido util o nosso slidshow, mas não seria dificil não, porém, para esta modificação, teriamos que substituir o efeito timestamp do mesmo, o que acarretaria no congelamento da função de troca automatica de itens... portanto, como este foi concebido, para ser desta forma, não seria bom retirar a função principal dele.. sugiro, utilizar o slideshow nativo do blogspot..

      Excluir
  12. Adorei muito, usei e deixei os créditos:http://purimimoveisiguabagrande.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Purim imoveis, agradeço muito seu comentário e qualquer coisas estamos a disposição, espero que quando precisar de um imovel na região dos lagos, que me de um bom desconto... aliais estou procurando em praia seca... kkkkkkk

      Excluir
  13. Tentou explicar tanto que complicou tudo, e olha que costumo mexer com HTML, não me ajudou em nada, muito enrolado.

    ResponderExcluir
  14. Qual é o código do Sprit? É esse width: 550px; (largura)
    height: 200px; (altura)
    width: 550px; (largura) ??? Obrigada!

    ResponderExcluir
    Respostas
    1. Sim, este seria a largura e altura das imagens do slide, sim poderia ser.

      Excluir
  15. Prezado amigo, eu gostaria de saber se consigo implantar este slide em uma página criada no blogger? Seria um slide para meu midia kit.
    Obrigada desde já!

    ResponderExcluir
    Respostas
    1. Certamente, apenas observe as larguras e altura que lhe convém... agradeço o seu retorno...um forte abraço fraterno.

      Excluir

Todo comentário é bem vindo, pois acrescenta muito aos nossos posts, portanto, fique a vontade para debater sobre nossos assuntos...

setaretornoaotopo