Tweet Slide Show Para Destacar Postagens

Vamos aprender a colocar um slideshow destacar sua postagens mais populares ou aquelas para as quais  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

<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 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

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 na aba ► 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/AVvXsEi8-TvKFATrS7utd2pGQnXMM2spHVJDhk9tC42tCo58HtNIDtTp1wyDOMf0jsqp6bbAgNlSdidiq-74lwaTVG7HeBNdwZND-8A6rjvgvFbB0bNQgM163oU09eK9YhTDyDyam-Gc56_Y2pc/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/AVvXsEgsE8kaYdyTCneVtwQyt_qZnwaQ2Wk0AWBGSC4FSInGSOOTe6YGgm6KDU83AF8Ake9VIZ0Ty___7FZlFRktLSsa8dRLRL6DsXGKOg3CQ3kr0Bb44-u2UY75rv-XKmqJZT10IjKFAKopvaQ/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/AVvXsEjeJotNk7UzNjRzukWtglkYs7npw9Vc80UyhpKgbIijqpazrtZX9kPkMmlfCNA6zNBY0GzokhlNBLRoG0BVNu_xrzg7xaRieF2hA5ExKYM1aKWWCjZjAv2pXfzsiW-z68WH6HiiGUbabO4/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/AVvXsEhytKk9deRXthNdYew-80_yimxsjCskCBPtxPiVhp4z5zgOHT_qvIVNQY79pvpo5WeodT7b9R1i8oWChgSFMmj3W4RxtLsvgvmesotqMZq86fsrMneS8fnDhZzm98zXyEKMK1oV3EyS4oU/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  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="SEU-LINK-AQUI"><img style="width:550px;height:200px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8-TvKFATrS7utd2pGQnXMM2spHVJDhk9tC42tCo58HtNIDtTp1wyDOMf0jsqp6bbAgNlSdidiq-74lwaTVG7HeBNdwZND-8A6rjvgvFbB0bNQgM163oU09eK9YhTDyDyam-Gc56_Y2pc/s320/Foto1.jpg" />
<span>Texto: Título do post </span></a>
</li>

Prontinho! Eu acho que você vai gostar do resultado!

Beijo da Mama ♥