Tutorial: Galeria de posts recentes abaixo do cabeçalho

Olá gente, Hoje vamos ter um tutorial bem legal que todo mundo procura e algumas vezes não funciona. Por isso estou trazendo esse tutorial para vocês colocarem nos seus blogs sem erro! Vem!!

Bom primeiro de tudo, você vai entrar na conta do seu blog (Painel) > layout > Add um gadget > HTML Javascript e no campo, você vai colar esse código:

<div id='bp_recent'></div>
<style type='text/css'>
.bp_item_thumb img {
border: 4px solid #fff; 
transition: all 400ms ease-in-out;
-webkit-transition: all 400ms ease-in-out;
-moz-transition: all 400ms ease-in-out;
-o-transition: all 400ms ease-in-out;
-ms-transition: all 400ms ease-in-out;
}
.bp_item_thumb img:hover {
opacity: .6;
filter: alpha(opacity=60);
-moz-opacity: .6;
-khtml-opacity: .6;
}
</style>
<script type="text/javascript" src="http://yourjavascript.com/45032510518/deb.js"></script>
<script style='text/javascript'>
var numberOfPosts = 5;var showPostDate = false;
var showSummary = false;
var showCommentCount = false;
var showThumbs = true;
var showNoImage = true;
var imgDim = 175;var imgFloat = 'left';
var myMargin = 4;
var mediaThumbsOnly = true;
var showReadMore = false;
var titleLength = 0;
</script>
<script src='URL-DO-SEU-BLOG/feeds/posts/summary?max-results=10&orderby=published&alt=json-in-script&callback=bprecentpostswiththumbnails'></script>

Agora Atenção para a legenda:

border: 4px solid #fff;  = Borda da imagem (expressura/estilo/cor)

var numberOfPosts = 5; = Número de quadrados/imagens que vão aparecer (alterar só o número)
var imgDim = 175; = Tamanho das imagens (o mesmo valor vai ser a largura e a altura)
URL-DO-SEU-BLOG = Você vai trocar esse texto pela url do seu blog (ex: http://seublog.blogspot.com)

Bom gente por hoje é só! 

Beijos e até mais!!