• Fotografia
    Como tirar fotos legais com o celular
    16 set 2015
  • Decoração
    Os 5 melhores diys de decoração (vídeos)
    24 fev 2015
  • Feminice
    Meus produtos favoritos da Dresslily
    28 jan 2016
  • 20 dezembro 2014

    Tutorial: Foto dos Posts Recentes

    E aí, blogueiras e blogueiros? Hoje vou ensinar à vocês como colocar fotos de posts recentes no blog de vocês com efeito de opacidade quando passar o mouse. Eu não sou muito fã daqueles slideshow que colocam, então preferi fazer apenas fotos quietinhas. hahah 
    Bora aprender!

    Pra começar tudo você devera criar um gadget HTML/JavaScript, tenho certeza que você já usou ele. Se não saber criar um eu te ensino, é fácil. Vá em Layout, quando abrir clique em Adicionar um Gadget abaixo do seu cabeçalho (compridinho). Agora vai abrir uma janelinha, nela você vai procurar nosso amigo fiel, HTML/JavaScript
    Não coloque nada no título. No conteúdo coloque esse código: 

    <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 />

    Entendendo o código: 

    Tudo o que você deve saber e entender eu coloquei em rosa. Obviamente, em "sua-url", coloque a url do seu blog, não retire o http. Por exemplo: www.um-exemplo-aqui.blogspost.com, coloque toda a sua url.

    Toda minha área utilizada -sim, esqueci o bendito nome, do blog tem 1000px de largura e como eu quero que mostre quatro fotos eu dividi 1000/4, que dá 250px. Se você quiser três fotos e sua área utilizada for 800px, por exemplo, divida 800/3. Se não ficar bem certinho você vai diminuindo ou aumentando o número em imgDim

    Bom, agora vamos falar da opacidade -o que é bem simples de entender. Se você quiser que a opacidade apareça quando o mouse passar coloque 1.0 encima e 0.4 embaixo. Aí está igual ao meu, a imagem fica normal quando passar o mouse. 

    É isso! Bem simples, né? Querem que eu faça algum outro tutorial? Fala aí!    
    Se for fazer post com o tutorial credite e me mande um e-mail avisando antes de postar. Grata! ♥
    Qualquer dificuldade me chama nos comentários!
    Um beijo e fique bem! 

    Acompanhe o blog: Facebook | Twitter Instagram Youtube

    38 comentários:

    1. Oii! Acabei de conhecer seu blog e adorei! O layout é lindo e todo organizadinho, parabéns!
      Super útil esse tutorial, fica bem legal o efeito! :D
      Estou seguindo aqui, é claro, beijos!

      bycamilablog.blogspot.com

      ResponderExcluir
      Respostas
      1. Muito, muito obrigada mesmo, Camila.
        Obrigada por comentar, viu?
        Um beijo!

        Excluir
    2. Nossa, tava procurando esse tutorial a um tempo, mas não achei em lugar nenhum. Até que finalmente uma escritora simpática decidiu postar! Obrigada :)

      ResponderExcluir
      Respostas
      1. Adorei "uma escritora simpática", hahahah. Muito obrigada, Gabi.
        Obrigada também por comentar ♥

        Excluir
    3. Puxa, eu achei demais seu tutorial. (Na verdade, seu blog todo, uma fofura só, hehe. Todo organizadinho, parabéns mesmo >.<). Você poderia fazer tutorial ensinando como colocar uma foto acima do cabeçalho?
      https://cronicasdagaveta.wordpress.com/

      ResponderExcluir
      Respostas
      1. Que bom que gostou, Blair! Fico feliz.
        Me explica mais dessa foto acima do cabeçalho, não entendi :c
        Obrigada por comentar e aguardo sua explicação pra eu poder fazer, viu? ♥

        Excluir
    4. Eu gostei muito do tutorial, eu usava um no estilo desse a algum tempo atrás, só que ele era manual, então eu tinha que trocar as imagens a cada post novo. Era muito cansativo e não compensava deixar no blog. Seu tutorial foi bem legal, e ele é um super fácil de personalizar. Essas imagens com opacidade deixa o blog com o ar mais profissional.
      Ah, Lay....eu gostei muito do seu blog, as postagens são super dinâmicas e ele é bem diferente dos blogs que estamos cansadas de ver por aí. Amei a bonequinha do cabeçalho, ela parece com você ( não sei se foi essa a intenção de colocar - la, mas tudo bem :D)
      Beijos e beijos. Chris ;)
      Julietanoavesso.blogspot.com

      ResponderExcluir
      Respostas
      1. Juro pra você que esse seu comentário me motivou mais. Fiquei muito feliz quando abri e li ele, viu? Muito obrigada!
        E sim, foi com essa intenção que eu coloquei a bonequinha, e cá pra nós, estou até com vontade de comprar uma tiara de flores assim só pra parecer mais, hahahah.

        Muito obrigada pelo seu comentário. Alegrou meu dia ♥

        Excluir
      2. E mulher, que ilustração linda do seu blog! Você é ilustradora pelo que vi no post, né?

        Excluir
      3. Oi, nossa muito obrigada. Eu que agradeço por gostar do meu blog. Eu sou ilustradora sim.

        Excluir
      4. Já sei qual ilustradora vou contratar quando entrar uma graninha, hueheue. Adorei, parabéns!

        Excluir
    5. Cara, que delícia de blog! Parabéns, é tudo uma lindeza por aqui, guria <3
      ღ L A C R O U ღ

      ~Jubs

      ResponderExcluir
    6. Respostas
      1. Ajudo sim! Me adiciona no facebook: https://www.facebook.com/layac2

        Excluir
    7. Amei seu blog! Obrigada pelo tutorial, estava louca pra colocar isso no meu blog mas nunca achava um que me agradasse! Amei <3

      ResponderExcluir
      Respostas
      1. Que bom que te ajudou *0*
        Beijos! ♥

        Excluir
    8. Nossa, adorei! Eu queria mesmo colocar esses "slides" no meu blog e não sabia como!
      Beijos, Amanda | Tô de Short
      todeshort.blogspot.com

      ResponderExcluir
      Respostas
      1. Que bom que gostou <3
        Fico feliz!

        Excluir
    9. Adorei o tutorial, quando personalizar o meu blog já sei qual usar! E seu layout é muuuito lindo! Parabéns flor <3

      Beijos,
      http://www.blogterritoriofashion.com/

      ResponderExcluir
      Respostas
      1. Opa! Muito obrigada, Millena. ♥

        Excluir
    10. Usei, MUITO obrigada! Céus, tô apaixonada pelo layout do teu blog. Me deu até uma depressão, eu fazendo um e achando legal e quando entro aqui... ♥-♥
      Beijo!

      ResponderExcluir
      Respostas
      1. NAU FIQUE EM DEPRESSA1M!
        Beijoooooooo e obrigada, sua linda! Me bja ♥ hahahah

        Excluir
    11. Adorei! *-*
      Era um desse que eu estava procurando rs e você o fez! MUITO obrigada ♥
      Só queria saber como coloca-lo em diagonal para colocar em cima das postagens.
      Beijoos ♥

      ResponderExcluir
      Respostas
      1. Fico feliz que tenha gostado, Ju! Eu não entendi a sua dúvida, pode me explicar melhor? Como assim colocar na diagonal?
        Espero sua resposta, viu? Beijoca <3

        Excluir
    12. Olá tudo bem?
      Adorei seu tutorial, ficou certinho no meu blog, mas eu tenho uma dúvida, como faço p/ que as imagens fiquem com o formato igual ao seu?
      Bjs, parabéns pelo tutorial =D

      ResponderExcluir
      Respostas
      1. Igual o meu é outro tutorial, esse aí são posts automáticos!

        Excluir
    13. Muito obrigada mesmo. até que em fim encontro um que funciona. só tenho uma duvida. eu escolhi mostrar 4 imagens e isso resulta, no entanto não consigo centralizar. como faço?

      http://aboemiacatita.blogspot.pt

      ResponderExcluir
      Respostas
      1. Olhei seu blog e acho que já resolveu o problema, né? Beijoca <3

        Excluir
    14. Não consegui colocar no meu :(

      Beijos, Bárbara | Oh Well



      ResponderExcluir
    15. Poxa estava a um tempão, mas um tempão mesmo procurando esse tutorial. Mas nem deu certo no meu :(

      ResponderExcluir
      Respostas
      1. Leila, manda o código que você colocou? Muita gente diz que tá dando erro, aí quando vou ver o código está errado! Eu te ajudo, molier! Manda aí!

        Excluir
    16. oi, amei o tutorial, como faço pra por imagem aleatórias?
      http://believetempodeacreditar.blogspot.com.br/

      ResponderExcluir
      Respostas
      1. Olá, Leila! Eu ainda não tenho esse tutorial aqui no blog, mas a ideia está anotada para fazer!

        Excluir
    17. Oi Lay!
      Adorei esse tutorial e de como as imagens ficam mas no tema que eu uso elas não ficam centralizadas... :( O que posso fazer?
      Amei teu blog.

      Um beijo.

      ResponderExcluir
      Respostas
      1. Me envia seu blog pra eu poder ver? Beijos!

        Excluir
    18. Eu coloco o código, mas não aparece nada :(

      ResponderExcluir