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! 

10 comentários

  1. Uhuu, conseguiu <3 Ficou muito lindo, adorei! Eu tentei achar um com efeito hover pra colocar no meu blog e não consegui, pra deixar a imagem opaca antes de passar o mouse. Vou ver se consigo fazer uma mistura com o meu código pra colocar haha. Ficou muito bom o tutorial :)
    Beijos.

    ResponderExcluir
    Respostas
    1. Consegui, Mari <3 Pesquisei nessa internet a fundo até encontrar algum legal, haha. Que bom que gostou, obrigada <3 Espero que funcione a mistura!! Obrigada de novo *-*
      Beijos!

      Excluir
  2. Gente estava precisando disso. Eu tinha no meu antigo layout e não me pergunte como e quando o coloquei lá rs, só sei que quando mudei a roupinha do blog o código maldito não quis mais funcionar.
    Vou testar esse e vê se funciona comigo rs.
    Beijos

    ResponderExcluir
    Respostas
    1. Sei como é, alguns layouts insistem em não ser compatíveis com os nossos detalhes favoritos ): Espero que funcione, Cami!!
      Beijos

      Excluir
  3. Rebeca, tu me salvou! eu tava há MUITO tempo querendo colocar esse esquema só que alguns tutoriais que vi eram tão complicados, tem gente que não sabe explicar, sei lá. O fato é que você me ajudou e já coloquei no meu. Continua dando dicas, por favor! adoro! Já tentei colocar aquela barrinha de posts sugeridos embaixo mas não consigo :( bj! Blog B de Bia

    ResponderExcluir
    Respostas
    1. Fico feliz por ter te ajudado! E ficou lindo no seu!! Um beijo, obrigada pelo carinho ♥

      Excluir
    2. Ah, PS: para as postagens sugeridas, usei esse tutorial aqui da Mari:

      http://www.letrasnagaveta.com/2015/02/tutorial-gadget-personalizado-de-posts.html

      Excluir
  4. AAAAAH, garota vc é um anjo de Deus, um aaaanjo. Tava atrás desse tuto mor tempão e o blog dela só dava fora do ar. Thankiu <3

    ResponderExcluir