Agora iremos aprender a implamtar um slideshow para destacar sua postagens mais populares . Fica bem bonito e é muito simples de implantar e torna-la do seu jeito.
No script abaixo, altere o tamanho das imagens de acordo com se gosto ou nas medidas do seu template.
Mude a cor do background, da exibição, cor e formato das bordas.
Caso queira a velocidade de exibição também pode ser alterada.
Então, após esta breve explanação, vamos ao que interessa:
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_________________________________________
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>

Para mudar o velocidade de slideshow, altere o valor ,timeOut: 4000
quanto menor, mais lento.

Salve o modelo


Agora volte para a página Layout e clique em "Adicionar um gadget"
Escolha um gadget HTML/JavaScript e cole dentro dele o seguinte código:

<div id="s3slider">
<ul id="s3sliderContent">
<li class="s3sliderImage">
<a href="LINKS PARA SUA IMAGEM"><img style="width:550px;height:200px;" src="http://2.bp.blogspot.com/_DCJ4PAWLOdE/S9bpWEzM6nI/AAAAAAAAEQ8/VXC4YJTouPk/s320/Foto1.jpg" />
<span>Texto: Título do post </span></a>
</li>
<li class="s3sliderImage">
<a href="LINK PARA SUA IMAGEM"><img style="width:550px;height:200px;" src="http://2.bp.blogspot.com/_DCJ4PAWLOdE/S9bpa1jmhmI/AAAAAAAAERA/ylF-itO90M0/s320/Foto2.jpg" />
<span>Texto: Título do post</span></a>
</li>
<li class="s3sliderImage">
<a href=""LINK PARA SUA IMAGEM><img style="width:550px;height:200px;" src="http://2.bp.blogspot.com/_DCJ4PAWLOdE/S9bpczWGpSI/AAAAAAAAERE/ekpedS9Hb_k/s320/Foto3.jpg" />
<span>Texto: Título do post</span></a>
</li>
<li class="s3sliderImage">
<a href="LINK PARA SUA IMAGEM"><img style="width:550px;height:200px;" src="http://4.bp.blogspot.com/_DCJ4PAWLOdE/S9bpe77w6BI/AAAAAAAAERI/kt9YqwjxDLI/s320/Foto4.jpg" />
<span>Texto: Título do post</span></a>
</li>
</ul>
</div>
<div class='clear'></div>

Observe que acima, estão 4 span’s, o que significa que teremos 4 imagens no slideshow, caso queira maior numero, e preciso aumentar o numero de li class no javaScript .sempre acima/antes da tag </ul>

Edite o código colocando o link e o endereço da sua imagem ,
Salve. Clique sobre o gadget, arraste e solte acima da seção "Postagens"
Visualize e salve!!


Neste exemplo usei apenas quatro imagens com links.Mas conforme mencionei acima, 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="link para sua imagem"><img style="width:550px;height:200px;" src="http://2.bp.blogspot.com/_DCJ4PAWLOdE/S9bpWEzM6nI/AAAAAAAAEQ8/VXC4YJTouPk/s320/Foto1.jpg" />
<span>Texto: Título do post </span></a>
</li>

Pronto! creio que ira gostar do resultado!