Existem vários motivos para querer colocar slides de posts recentes no blogger. Por ser bonito, dar um charme no layout do seu blog, e principalmente por ser muito útil ao mostrar seus últimos posts, levando as pessoas a clicarem nas imagens e passarem mais tempo no seu blog.

Os slides que ensinarei por, são do blog Elaine Gaspareto, o código original é dela. Eu apenas editei um pouco a aparência pra ficar mais moderno e bonitinho.

Vamos ao tutorial o/

Vá em layout, e depois em adicionar gadgets (onde desejar que os slides apareçam). Selecione a opção HTML/Javascript e cole o seguinte código:

<div class='widget-content'>
<style type="text/css">
/* CSS - Destaque de posts */
.bsrp-gallery {
overflow:hidden;
    width: 1500px;
    clear: both;
    position: relative;
    margin: auto;
}
.bsrp-gallery:after {
display: table;
clear: both;
}
.bsrp-gallery .bs-item a {
position: relative;
float:left;
margin: 0 0 0 0px;
text-decoration:none;
}
.bsrp-gallery .bs-item .ptitle {
transition-duration: .4s;
background: ; /*--cor de fundo das miniaturas ao passar o mouse --*/
display: block;
clear: left;
font-size: 13px;
font-family: arial;
text-transform:uppercase; /*--coloca o texto em capslock, apague se desejar --*/
line-height:1.3em;
font-weight:bold;
height: 100px; /*--define a altura da legenda --*/
width: 140px; /*--define a largura da legenda --*/
position: absolute;
bottom:-100%;
text-align: center;
padding:100px 30px 30px 30px;
color:#000000; /*--cor da fonte do texto--*/
word-wrap: break-word;
overflow:hidden;

}

.bsrp-gallery .bs-item:hover .ptitle {

bottom: 0%

}
.bsrp-gallery a img {
background: #fff;
float: left;
}
.bsrp-gallery a:hover img {
opacity: 0.3;

}
/* CSS FIM */
</style>
<script>
function bsrpGallery(root) {
var entries = root.feed.entry || [];
var html = ['<div class="bsrp-gallery nopin" title="by elainegaspareto.com, adaptado por butlariz.com">'];
for (var i = 0; i < entries.length; ++i) {
var post = entries[i];
var postTitle = post.title.$t;
var orgImgUrl = post.media$thumbnail ? post.media$thumbnail.url : 'http://2.bp.blogspot.com/-OSlo4lj_H4w/VRMrRXuZWyI/AAAAAAABCNA/RQsmcuaWiEE/s1600/sem.gif';
var newImgUrl = orgImgUrl.replace('s72-c', 's' + bsrpg_thumbSize + '-c');
var links = post.link || [];
for (var j = 0; j < links.length; ++j) {
if (links[j].rel == 'alternate') break;
}
var postUrl = links[j].href;
var imgTag = '<img src="' + newImgUrl + '" width="' + bsrpg_thumbSize + '" height="' + bsrpg_thumbSize + '"/>';
var pTitle = bsrpg_showTitle ? '<span class="ptitle">' + postTitle + '</span>' : '';
var item = '<a href="' + postUrl + '">' + imgTag + pTitle + '</a>';
html.push('<div class="bs-item">', item, '</div>');
}
html.push('</div>');
document.write(html.join(""));
}
hoje = new Date()
numposts = 1;  /*--define em qual post começa a exibição --*/
var bsrpg_thumbSize = 200;  /*--define o tamanho das miniaturas --*/
var bsrpg_showTitle = true;
document.write("<script src="http://seublog.com/feeds/posts/default?start-index="+numposts+"&max-results=4&orderby=published&alt=json-in-script&callback=bsrpGallery"></script>");</script>
</div>
<div class='clear'></div>

Alterando o código

Marquei os códigos com as cores de acordo com a explicação, para ser mais fácil localizar os lugares.
Cuidado ao modificar o código, para não apagar nenhuma vírgura, ponto, ou código a mais. Na parte dos números mude apenas os números. 
  • Mude o http://seublog.com/ pelo endereço do seu blog (inclusive o http://) por exemplo: http://butlariz.com/
  • 200 é o tamanho de cada imagem, (altura e largura) se ficar pequeno, aumente o número, se ficar grande, diminua. Tentativa e erro até conseguir. 
  • Se você mexeu no tamanho, pode ser que a legenda da imagem (o texto que aparece quando passa o mouse) desconfigure. Para consertar, procure no código por width: 140px para mudar a largura, height: 100px para mudar a altura. 
  • Para modificar a quantidade de slides: results=4  o número 4 indica a quantidade, troque pelo número desejado. 
Depois de arrumar é só salvar. Espero que consigam e que tenham gostado. Se não conseguirem, deixem nos comentários, ou mandem mensagem pela Fan Page, assim posso te ajudar mais rápido!

Upddate 01/09: Para quem não estava conseguindo centralizar os slides, é só mudar o width: 100% para width: 1500px onde eu marquei ali em cima nos códigos dessa mesma cor. Teste para ver como ficou. Se ainda não estiver centralizado diminua o valor 1500px (1400, 1300, 1200) até ficar centralizado. Se um dos quadradinhos descer, quer dizer que o valor é muito pequeno, e você deve tentar maior (por exemplo: 1450px, 1475px, etc).