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:

Tweet