Tutorial: Postagens recentes com imagens

Para o meu primeiro tutorial (que não é totalmente meu), eu trouxe algo que queria muito e pesquisei bastante antes de encontrar: posts recentes apenas com a imagem e que atualiza automaticamente, para colocar ali em cima das postagens. Encontrei um da Escritora dos Dezesseis que é o preferido de (acho que) todo mundo! O problema é que até então - no dia dessa postagem - o blog dela está fora do ar, assim como sua página no face. Então, para não deixar vocês sem esse belíssimo código milagroso para blogspot, eu vim compartilhá-lo:

PS: eu apenas encontrei o código na internet, todo o resto do tutorial é meu.

<center>
<div id='bp_recent'><style>
#bp_recent img {
opacity: 0.4; filter: alpha(opacity=40);
}
#bp_recent img:hover {
opacity: 1.0; filter: alpha(opacity=100);
}
</style></div>
<script style='text/javascript' src='http://bloggergadgets.googlecode.com/files/recentposts_orig.js'></script>
<script style='text/javascript'> var numberOfPosts = 4;
var showPostDate = false;
var showSummary = false;
var titleLength = 0;
var showCommentCount = false;
var showThumbs = true;
var showNoImage = true;
var imgDim = 250;
var imgFloat = 'left';
var myMargin = 1;
var mediaThumbsOnly = true;
var showReadMore = false;
</script>
<script src='http://SUA-URL/feeds/posts/default?max-results=4&orderby=published&alt=json-in-script&callback=bprecentpostswiththumbnails'></script>
</center>
<br />

É bem simples de usar. Primeiro, você vai na aba "Layout" do seu blog, em seguida, na área acima do post clique em "Adicionar um Gadget" - vale ressaltar que se o seu template não permite gadgets acima da área do post, você pode usá-lo no rodapé ou, se for ousado, na lateral mesmo -; Escolha HTML/JavaScript e cole o código. 

PERSONALIZANDO

opacity: 0.4; filter: alpha(opacity=40);

O número quatro representa a opacidade da imagem numa escala de 0 à 10. É como a imagem fica sem passar o mouse por ela. Se quiser deixá-la sem esse efeito, troque os valores por, respectivamente, 1.0 e 100.

var numberOfPosts = 4;

Quatro é o número de postagens recentes que você quer que apareça. Se quer apenas três, substitua por três e assim por diante. 

var imgDim = 250;

250 é o valor em pixels de cada imagem, é importante você saber o tamanho da área do post, subtrair 10 e dividir pelo número de imagens que você escolheu que aparecesse (item acima) para que fique tudo simétrico e lindo. 

Exemplo: a área do post do seu template é 650 e você quer três imagens. 650-10=640. 640/3=213,333. Sendo assim, 213 é o valor que você vai usar (ignore os números depois da vírgula).

Ou, se você odeia matemática e não está nem um pouco afim de fazer os cálculos, pode ir testando vários valores até que algum te agrade.

var myMargin = 1;

1 é o valor em pixels da margem entre cada imagem, eu não aconselho a trocá-lo a menos que você saiba exatamente o que está fazendo e entenda de códigos. Caso troque, o cálculo que ensinei acima é inútil.

<script src='http://SUA-URL/feeds/posts/default?max-results=4&orderby=published&alt=json-in-script&callback=bprecentpostswiththumbnails'>

SUA-URL você substituirá pelo endereço do seu site. É importante deixar o http://. No meu caso ficou assim:

<script src='http://www.cafedebeiradeestrada.com.br/feeds/posts/default?max-results=4&orderby=published&alt=json-in-script&callback=bprecentpostswiththumbnails'>

Bem simples, né? Espero que tenha ficado tudo claro :) Foi meu primeiro tutorial e se vocês gostarem eu voltarei sempre com um pouco mais do que eu sei! 

Dúvidas? Pode deixar aí nos comentários que eu responderei o quanto antes!

UM BEIJO SUPER CAFEINADO!