Tutorial: Postagens recentes com imagens - Café de Beira de Estrada
Home seu blog tutoriais Tutorial: Postagens recentes com imagens
Tutorial: Postagens recentes com imagens
by Rebeca Maynart sábado, agosto 15, 2015
seu blog tutoriais
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.
<div id='bp_recent'><style>
opacity: 0.4; filter: alpha(opacity=40);
#bp_recent img:hover {
opacity: 1.0; filter: alpha(opacity=100);
<script style='text/javascript' src='http://bloggergadgets.googlecode.com/files/recentposts_orig.js'></script>
<script style='text/javascript'> var numberOfPosts = 4;
var myMargin = 1;
<script src='http://SUA-URL/feeds/posts/default?max-results=4&orderby=published&alt=json-in-script&callback=bprecentpostswiththumbnails'></script>
É 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.
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.
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.
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!
Tutorial: Postagens recentes com imagens Reviewed by Rebeca Maynart on sábado, agosto 15, 2015 Rating: 5
Tags : seu blog tutoriais
Mariana Menezes 15 de agosto de 2015 12:41
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 :)
Rebeca Maynart 17 de agosto de 2015 02:39
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 *-*
Camila Carvalho 16 de agosto de 2015 22:08
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.
Rebeca Maynart 17 de agosto de 2015 02:40
Sei como é, alguns layouts insistem em não ser compatíveis com os nossos detalhes favoritos ): Espero que funcione, Cami!!
Unknown 24 de agosto de 2015 19:52
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
Rebeca Maynart 25 de agosto de 2015 15:04
Fico feliz por ter te ajudado! E ficou lindo no seu!! Um beijo, obrigada pelo carinho ♥
Rebeca Maynart 25 de agosto de 2015 15:05
Ah, PS: para as postagens sugeridas, usei esse tutorial aqui da Mari:
http://www.letrasnagaveta.com/2015/02/tutorial-gadget-personalizado-de-posts.html
Anônimo 12 de janeiro de 2018 10:49
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