Slideshow em cima dos posts do Blogger

Slideshow em cima dos posts do Blogger

6 10 99
Slideshow em cima dos posts do Blogger 10 6 99
Ontem eu publiquei um tutorial, ensinando como colocar um slideshow nos templates personalizados para Blogger/Blogspot -  Slideshow no Blogger
No tutorial em questão, o slide tem 980px de largura e as imagens ficam dispostas lado a lado, abrindo-se a medida em que passamos o mouse sobre elas.
image
Hoje irei mostrar dois outros modelos, que ficam muito bonitos quando colocados em cima da área de postagem ou mesmo no topo da sidebar
IMPORTANTE! Vale lembrar que a largura dos elementos de página do Blogger, variam de template para template e que é necessário que vocês façam os ajustes no CSS de acordo com as suas necessidades. Os dois modelos que irei apresentar foram testados nos Templates do Dicas Blogger, com sidebar à direita.
Modelo 1 – largura 500px
Neste modelo, deve-se usar imagens de 500 x 280px.
Passo 1- entre no HTML do template e procure por ]]></b:skin>
Cole ANTES dessa tag o seguinte código

/* Image Slideshow */
#s3slider{margin:15px; width:100%; height:250px; position:relative; word-wrap:break-word; overflow:hidden;}
#s3sliderContent{width:100%; position:absolute; bottom: 0; margin:0px; padding-left:0px; }
.s3sliderImage{float:left; position:relative;display:none; }
.s3sliderImage span{position:absolute; left:0; font:normal 12px 'Arial',Helvetica,sans-serif; padding:0px; width:100%; text-align:center; padding-left:0px; background-color:#000; filter:alpha(opacity=70); -moz-opacity:0.7; -khtml-opacity:0.7; opacity:0.7; color:#fff; display:none;bottom: 0; }

Passo 2- procure pela tag </head> e cole ACIMA dela:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js' type='text/javascript'/>
<script type='text/javascript'><!--//--><![CDATA[//><!--
/* ------------------------------------------------------------------------
s3Slider

Developped By: Boban Karišik -> http://www.serie3.info/
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) + 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>

Passo3 -  procure por <div id='main-wrapper'> e cole este código logo embaixo:



<b:if cond='data:blog.pageType != &quot;item&quot;'> 
                <div id='s3slider'> 


                <ul id='s3sliderContent'> 


                    <li class='s3sliderImage'> 


                    <a href='url do link'> 


                    <img src='url da imagem'/> 


                    <span>DESCRIÇÃO</span></a></li> 


                    <li class='s3sliderImage'> 


                    <a href='url do link'> 


                    <img src='url da imagem'/> 


                    <span>DESCRIÇÃO.</span></a></li> 


                    <li class='s3sliderImage'> 


                    <a href='url do link'> 


                    <img src='url da imagem'/> 


                    <span>DESCRIÇÃO.</span></a></li> 


                    <li class='s3sliderImage'> 


                    <a href='url do link'> 


                    <img src='url da imagem'/> 


                    <span>DESCRIÇÃO.</span></a></li> 


                    <li class='s3sliderImage'> 


                    <a href='url do link'> 


                    <img src='url da imagem'/> 


                    <span>DESCRIÇÃO.</span></a></li> 


                    <div class='clear s3sliderImage'/> 


                </ul> 


                </div> 


            </b:if>

Substitua “url do link” pelo endereço do post, "url da imagem", pelo endereço da imagem e em DESCRIÇÃO, escreva algo sobre aquela imagem.

Apague as partes que estão em verde, se quiser que os slides apareçam em todas as páginas e não somente na home.

Modelo 2 -largura 610px



Utlize imagens de 610 x 320 px ou de acordo com sua necessidade

Entre no HTML do template e cole este código antes da tag ]]></b:skin>


#slider-holder{width: 610px;height: 320px;overflow: hidden;
margin-bottom:-10px; margin-left:17px; margin-top:-20px;padding: 15px 0 0 0;}
#s3slider { width: 610px; /* largura da imagem */
height: 320px; /* altura da imagem */position: relative; /* important */overflow: hidden; /* important */}
#s3sliderContent {width: 610px; /* largura */
position: absolute; /* important */top: 0; /* important */margin-left: 0; /* important */}
.s3sliderImage {float: left; /* important */ position: relative; /* important */ display: none; /* important */}
.s3sliderImage span { position: absolute; /* important */ left: 0; font-weight: 700; font-size: 0.834em; color: #ffffff;  padding: 20px 15px 50px 13px;  height: 73px;  width: 600px;  background-color: #4e4d3c;
filter: alpha(opacity=70); /* opacidade do box */
-moz-opacity: 0.7; /* opacidade do box */
-khtml-opacity: 0.7; /* opacidade do box */
opacity: 0.7; 
display: none; bottom: 0;
}
.s3sliderImage span a.featured-title:link,
.s3sliderImage span a.featured-title:visited{color: #fff;padding: 0px 0px 2px 0px;font-size: 1.167em;}
.s3sliderImage span a.featured-title:hover{color: #999;}
.s3sliderImage span a:link,
.s3sliderImage span a:visited{color: #888;}
.s3sliderImage span a:hover{color: #555;}

Siga o passo 2 do modelo1.

Siga o passo 3 do modelo 1, mas use este código:


<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div class='black-bg' id='slider-holder'>
<div id='s3slider'>
<ul id='s3sliderContent'>
<li class='s3sliderImage' style='display: list-item;'>
<a href='LINKS'><img alt='Imagen 1' src='URL DA IMAGEM' style='width: 610px; height: 320px;'/></a>
<span style='display: block;'>
<a class='featured-title block' href='#LINK' rel='bookmark' title='TÍTULO DO POST'>TÍTULO</a><br/>
DESCRIÇÃO
</span>
</li>

<li class='clear s3sliderImage'/>
</ul>

</div> 
</div>
</b:if></b:if>


  • A parte em vermelho deve se repetir para cada nova imagem.
  • Em Link, coloque a url que será associada à imagem.
  • Em url da imagem, cole o endereço da imagem.
  • De um título e uma descrição às imagens.

Nos dois modelos, foram utilizados javascript. O endereço do arquivo é:


Recomendo salvar o arquivo .js, hospedar em algum site de sua preferência e substituir a url nesta parte do código:


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

O script pode ser colocado diretamente no template. Preste muita atenção!

Abra o arquivo .js no bloco de notas. No código do passo 2, apague esta linha:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js' type='text/javascript'/>
Agora, copie este código, colando todo o script (JS) no local indicado.
<script type='text/javascript'>
//<![CDATA[
COLE AQUI O SCRIPT
//]]>
</script>
20 Comments
Comments
  1. Olá Juliana!

    Já tinha visto o template Animal da Mamanunes e achei espetacular o efeito de Slideshow.

    Ontem você disse que era possível fazer esse efeito sem a utilização do javascript em servidor externo, não é? E por que nesse exemplo de hoje é preciso dele?

    Abraços,

    ResponderExcluir
  2. Legal a dica, mas eu gostaria de saber, se eu poderia redirecionar o tamanho do slide, por exemplo, eu quero ele no tamanho 330 por 330. Se eu alterar o código, isso pode danificar o funcionamento do slide?

    ResponderExcluir
  3. Gostei demais dos dois posts sobre slideshow.

    Dicas Blogger é parada obrigatória para todos os blogueiros!

    Abraços

    ResponderExcluir
  4. Esses slideshows também são bem legais. E agora, qual eu vou usar no meu blog? o-o'

    ResponderExcluir
  5. Oi, Juliana

    Nem sei se este é o lugar certo para te perguntar sobre templates, mas... vou tentar.
    :-)

    Fiz o download do seu liiindo template flowers. Mas estou tendo problemas com a imagem do título: o arquivo parece corrompido, não consigo fazer o uploado para o blog. E, caso eu conseguisse, como faria para pôr o título na pequena plaquinha que integra a figura? É essa a ideia, não é? Seeee você puder me dar uma dica sobre isso, ficaria muito feliz. Pus um post temporário por lá para avisar aos leitores que o blog está em obras, enquanto aguardo seu retorno. Muito obrigada por sua atenção, mais uma vez.

    Beijo e bom feriado,

    Rita

    ResponderExcluir
  6. Rita, o local correto seria no post do Template Flowers. Para colocar a imagem, siga as instruções:
    http://www.dicasblogger.com.br/2009/08/instrucoes-para-uso-dos-templates.html

    ResponderExcluir
  7. oi juliana!
    estou seguindo seu blog e acompanho suas postagens pelas atualizações dos meus seguidos... ocorre que desde ontem eu estou recebendo aviso de atualizações suas, mas chego aqui no blog e elas não estão...
    Também teve aviso de novo post feito por "luan felipe" e ao clicar no link, diz que a página/link não existe... não sei o que pode ser, se é um problema meu ou não, mas te aviso por precaução...
    parabéns pelo blog e obrigada pelas dicas!

    ResponderExcluir
  8. Junior, até dá para instalar o script dentro do template, mas fica muito, muito pesado. Não compensa.

    ResponderExcluir
  9. Juliana, será que daria certo usar em um widget na sidebar?
    Estou configurando um template (BTemplates) que tem um slide tbm, mas pelo que vi, o código dele parece ser bem mais complicado que esses que você postou, mas o efeito também é bem legal. (Link template: http://goo.gl/xrob6)
    Obrigado!

    ResponderExcluir
  10. Poxa Juh vc nem respondeu a minha pergunta =/. Eu quero saber se eu mudar as dimensões do Slide, pode danificar o funcinamento do código?

    ResponderExcluir
  11. Kevin, leia os termos de uso e não faça #mimimi. Infelizmente não consigo mais responder perguntas.

    Com relação a sua dúvida, eu realmente não sei responder.

    ResponderExcluir
  12. Não há o <...div id='main-wrapper...'> D=

    ResponderExcluir
  13. Não entendi a parte do "Substitua 'url do link' pelo endereço do post". Alguém poderia me dizer o que é?

    ResponderExcluir
  14. Olá, estou com problemas aqui no meu blog. Meu templete já vem com o slider image, mas para o IE a imagem vem comprimida, e nos demias navegadores está ok. Você pode me ajudar?

    Grata

    Rose

    ResponderExcluir
  15. Resposta a Izzie: "Substitua 'url do link' pelo endereço do post" é o link da postagem ^-^.

    Juliana eu gostaria de saber como eu coloco esse recurso no meu blog: Você está em: Início » Hacks » Vídeo e imagens » Slideshow em cima dos posts do Blogger .

    Desculpa pergunta aqui que não tem nada a haver com o post, mas é não sei como devo perguntar.

    ResponderExcluir
  16. Ah, como eu centralizo o Slideshow(modelo 2)?

    ResponderExcluir
  17. Não há o <...div id='main-wrapper...'> D= [2]

    o meu blog diz que não tem.
    O que é e o que eu posso fazer a respeito?

    ResponderExcluir
  18. Tutorial excelente!

    Abraços. Continuação...

    ResponderExcluir
  19. Funciona às mil maravilhas. Muito obrigado por partilhares. Tudo de bem.

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