Slide Show Para Destacar Postagens
Autor: Bruno Tavares | Publicado: 2011-03-22T21:46:00-07:00

Vamos aprender a colocar um slideshow destacar sua postagens mais  populares ou aquelas para as quais&nbsp; você queira chamar a atenção do  leitor. Fica bem bonito e é muito fácil de configurar e gerenciar. Você  pode ver o slideshow em ação AQUI.
Dentro do script abaixo, você poderá alterar o tamanho das imagens de  acordo com as medidas do seu template, mudar a cor do background, da  exibição, cor e formato das bordas.
A velocidade da exibição também pode ser alterada.
Vamos lá: 




Códigos/Script &lt;script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/&gt;

&lt;script type='text/javascript'&gt;
//&lt;![CDATA[

/* ------------------------------------------------------------------------
s3Slider

Developped By: Boban Karišik -&gt; http://www.serie3.info/
CSS Help: Mészáros Róbert -&gt; 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 &gt; 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);

//]]&gt;
&lt;/script&gt;

&lt;script type='text/javascript'&gt;
$(document).ready(function() {
$(&amp;#39;#s3slider&amp;#39;).s3Slider({
timeOut: 4000
});
});
&lt;/script&gt;

&lt;style type='text/css'&gt;
#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;
}
&lt;/style&gt;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;&nbsp;  5px é a largura da borda inset é o formato, pode ser double, outset, solid, dashed #584536 é o código da cor 
   Borda dottedBorda dashedBorda solidBorda doubleBorda grooveBorda ridgeBorda insetBorda outset  Para mudar o velocidade de slideshow, altere o valor 4000  Para mudar o tamanho das imagens&nbsp; 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 &lt;/head&gt;  4. Copie código do script e cole- ANTES da tag &lt;/ head&gt;&nbsp;   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: 
 &lt;div id="s3slider"&gt;
&lt;ul id="s3sliderContent"&gt;

&lt;li class="s3sliderImage"&gt;
&lt;a href="SEU-LINK-AQUI"&gt;&lt;img style="width:550px;height:200px;" src="http://2.bp.blogspot.com/_DCJ4PAWLOdE/S9bpWEzM6nI/AAAAAAAAEQ8/VXC4YJTouPk/s320/Foto1.jpg" /&gt;
&lt;span&gt;Texto: Título do post &lt;/span&gt;&lt;/a&gt;
&lt;/li&gt;

&lt;li class="s3sliderImage"&gt;
&lt;a href="SEU-LINK-AQUI"&gt;&lt;img style="width:550px;height:200px;" src="http://2.bp.blogspot.com/_DCJ4PAWLOdE/S9bpa1jmhmI/AAAAAAAAERA/ylF-itO90M0/s320/Foto2.jpg" /&gt;
&lt;span&gt;Texto: Título do post&lt;/span&gt;&lt;/a&gt;
&lt;/li&gt;

&lt;li class="s3sliderImage"&gt;
&lt;a href="SEU-LINK-AQUI"&gt;&lt;img style="width:550px;height:200px;" src="http://2.bp.blogspot.com/_DCJ4PAWLOdE/S9bpczWGpSI/AAAAAAAAERE/ekpedS9Hb_k/s320/Foto3.jpg" /&gt;
&lt;span&gt;Texto: Título do post&lt;/span&gt;&lt;/a&gt;
&lt;/li&gt;

&lt;li class="s3sliderImage"&gt;
&lt;a href="SEU-LINK-AQUI"&gt;&lt;img style="width:550px;height:200px;" src="http://4.bp.blogspot.com/_DCJ4PAWLOdE/S9bpe77w6BI/AAAAAAAAERI/kt9YqwjxDLI/s320/Foto4.jpg" /&gt;
&lt;span&gt;Texto: Título do post&lt;/span&gt;&lt;/a&gt;
&lt;/li&gt;

&lt;/ul&gt;
&lt;/div&gt;

&lt;div class='clear'&gt;&lt;/div&gt;
 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&nbsp; menos ou mais links&nbsp; acrecentando ou retirando as seções  (código abaixo).&nbsp; ATENÇÃO! Cole sempre os códigos adicionais acima/antes da tag &lt;/ul&gt;   &lt;li class="s3sliderImage"&gt; &lt;a href="SEU-LINK-AQUI"&gt;&lt;img  style="width:550px;height:200px;"  src="http://2.bp.blogspot.com/_DCJ4PAWLOdE/S9bpWEzM6nI/AAAAAAAAEQ8/VXC4YJTouPk/s320/Foto1.jpg"  /&gt; &lt;span&gt;Texto: Título do post &lt;/span&gt;&lt;/a&gt; &lt;/li&gt;