Se você gostar do post abaixo, por favor, clique aqui para se inscrever gratuitamente através do e-mail, assim você terá um post a cada e-mail recebido, podendo baixar nossos ebooks

Slide show de imagens em seu blog


Você Blogueiro que vive procurando coisas novas por causa da concorrência de outros blogs, se você não aguenta mais comece a usar este slide show para mostrar seus produtos ou até mesmo imagens de postagens que você sabe que trará um grande impacto.

 Para começar, copie este código e prossiga no próximos passos.


Códigos/Script

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.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>

<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 boRdas, 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
Borda double
Borda groove
Borda ridge
Borda inset
Borda outset

Para mudar o velocidade de slideshow, altere o valor 4000

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 ► Editar HTML
3. Encontre a tag </head>
4. Copie código do script e cole- ANTES da tag </ head> 
Salve o modelo


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

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

<div id="s3slider">
<ul id="s3sliderContent">
<li class="s3sliderImage">
<a href="SEU-LINK-AQUI"><img style="width:550px;height:200px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiswrDgnx9uWFZIBoWbiI2X-l1WW_82MAR3Dy8_uXxh14mt5Xh6GqICTBKmpoVpLzfaaX5r9n6_rVHyplEk44NpgoZZESQUazsI193fnkdv1KxYT5aztTca22Lxnbea86Xc6AkpQfDSqms/s320/Foto1.jpg" />

<span>Texto: Título do post </span></a>
</li>
<li class="s3sliderImage">
<a href="SEU-LINK-AQUI"><img style="width:550px;height:200px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5ycouOAIF2ve2QD5fVyppejnTbHBwfEYR9SMSIZK6ZEhjSytzndCG0GETlgWlZkqQ2J0oOK6a6qTfJ_pqj8XmfzLUr8aftc4Pxe5Jiz94nUwDyoo7M3RGlSgg-98qkim1BoHQZN6Jd4o/s320/Foto2.jpg" />

<span>Texto: Título do post</span></a>
</li>
<li class="s3sliderImage">
<a href="SEU-LINK-AQUI"><img style="width:550px;height:200px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuPnPbxi-NoHPOPE4XrvsBFzsv362VWtdxmOj6xHuDaCzfm-gEBqG3SAGBtpjeFLnuvJpPKLyXsnck5shGIxDjapIx755IcXQKZnDb2j5L2qjoheuqO0UklWKctXUXSuXM_WIaPVnCWhQ/s320/Foto3.jpg" />

<span>Texto: Título do post</span></a>
</li>
<li class="s3sliderImage">
<a href="SEU-LINK-AQUI"><img style="width:550px;height:200px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcphldUDQ9n_JJ3p5IPosskENo9-FgooSdd1sj4pbPcRkE9K5GmwLjZkdF_pMqq2TdYIlPZGlv7x-0rRdrDfezP72qZuVOam4f_jRCWF92YmwS2Y0HGJNkzg225nCxGulGdfCzE6_rehE/s320/Foto4.jpg" />

<span>Texto: Título do post</span></a>
</li>
</ul>
</div>
<div class='clear'></div>

Edite o código colocando o link e o endereço da sua imagem (destaque em vermelho e azul)

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

Visualize e salve!!

Observe que neste exemplo usei apenas quatro imagens com links. Você pode exibir  menos ou mais links  acrescentando 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="SEU-LINK-AQUI"><img style="width:550px;height:200px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiswrDgnx9uWFZIBoWbiI2X-l1WW_82MAR3Dy8_uXxh14mt5Xh6GqICTBKmpoVpLzfaaX5r9n6_rVHyplEk44NpgoZZESQUazsI193fnkdv1KxYT5aztTca22Lxnbea86Xc6AkpQfDSqms/s320/Foto1.jpg" />
<span>Texto: Título do post </span></a>
</li>


Pronto agora você tem algo que realmente chame basteante atenção da marca ou estilo do seu blog.

ADM: Peço a você leitor que siga nosso blog ou curta nossa pagina, ficaria muito grato!
Ops: E não se esqueça do nosso Twitter.

Gostou? Compartilhe:

4 comentários:

  1. Coloque aquele banner que você ver em muitos sites com imagens animadas e passando como um Slide! Você pode usar para qualquer coisa, como melhores postagens, seus momentos, e varias outras formas!

    ResponderExcluir
  2. Este slide aparece em todas as paginas?

    ResponderExcluir
  3. Anônimo,

    Não, ele ficará no elemento que você adicionar(em cima ou embaixo do corpo da postagem), e quando você acessar outra página ele sairá de exibição, isso acontece por causa da própria edição do template do blogger(maioria) que sempre estar padronizado para essa execução.

    Por tanto, para não ficar sem nexo essa resposta, lhe recomendo a não tentar usar o slide, mesmo que encontre solução, pois deixará mais pesado o carregamento de seu blog em cada página, logo dificultar a acessibilidade de seu leitor.

    Abraços

    ResponderExcluir
  4. Parabéns pelo tutorial!!!!!
    Até que enfim encontrei um slide de fácil instalação e que funciona!!!!
    Obrigada.

    ResponderExcluir

Seu Comentário estará enriquecendo o conteúdo acima. Fico grato com sua participação! Qualquer dúvida relacionada a outro assunto use o nosso formulário de contato "Fale Conosco". Obrigado

Por favor me adicione no Google + para eu poder te responder de imediato!

 
Copyright © 2012 - Phablo Projetos - Direitos Reservados | Page Rank Licença Creative Commons
Desenvolvido por Carlos Vínicius | Tecnologia do Blogger | Páginas: Termos de Uso e Licença
    Twitter Facebook Google + YouTube