FOTOLOG NO BLOGGER

Eaí meu blog, eaí leitores! Cês tão bão?

Pessoal, a ideia de ter uma galeria de fotos no blog me parecia muito interessante. Tá certo que hoje temos vários locais para expor nossas fotos, porém eu queria que meu blog também tivessee esse espaço, um FOTOLOG. Tive essa idéia visitando o blog Ondeando, de Pedro Dal Bó. Expliquei mais sobre isso na postagem Desenho Aleatório na Caderneta. Poderia ter sido num NOTAS DE RODAPÉ #04 onde posto as atualizações? Poderia, mas dessa vez falhou kkk. Então, prepara o cafézin com pão de queijo aí, presta atenção nos passos abaixo, e simbora pro tutorialson (Saudades dos posts #Will Ensina, do antigo Blog do Will...)

Vale lembrar que é de SUMA IMPORTÂNCIA FAZER UM BACKUP DO SEU TEMPLATE ANTES DE QUALQUER ALTERAÇÔES DE HTML, porque se der caquinha, tendo um backup não perdemos o layout, e fica fácil restaurar.

Outra observação é que foi testado somente na plataforma BLOGGER, não testado em Wordpress e em outras plataformas!

1º PASSO: Criando a Galeria

Crie uma página estática com o nome Fotolog, e cole o código html abaixo no editor HTML da página (SUBSTITUA o código URL-DO-SEU-BLOG .blogspot.com, destacado em preto abaixo, pelo endereço do seu blog):

<style>

  #fotolog-gallery {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 20px;

    padding: 10px 0;

  }

  .photo-item { display: flex; flex-direction: column; overflow: hidden; }

  .photo-container {

    position: relative;

    overflow: hidden;

    aspect-ratio: 1 / 1; 

    border-radius: 4px;

    background-color: #f5f5f5;

  }

  .photo-container img {

    width: 100%; height: 100%; object-fit: cover;

    transition: transform 0.4s ease; display: block;

  }

  .photo-container:hover img { transform: scale(1.05); }

  .photo-caption {

    margin-top: 5px; font-family: sans-serif; font-size: 10px;

    font-style: italic; color: #ccc; text-align: left;

  }

  .photo-caption a { color: #ccc; text-decoration: none; }

  @media (max-width: 600px) {

    #fotolog-gallery { grid-template-columns: repeat(2, 1fr); gap: 12px; }

  }

</style>

<div id="fotolog-gallery">Buscando fotos marcadas...</div>

<script>

  function renderGallery(json) {

    var entries = json.feed.entry || [];

    var html = "";

    

    for (var i = 0; i < entries.length; i++) {

      var entry = entries[i];

      var title = entry.title.$t;

      var link = "";

      

      for (var j = 0; j < entry.link.length; j++) {

        if (entry.link[j].rel == 'alternate') { link = entry.link[j].href; break; }

      }

      

      var dateStr = entry.published.$t;

      var dateObj = new Date(dateStr);

      var formattedDate = String(dateObj.getDate()).padStart(2, '0') + "/" + 

                          String(dateObj.getMonth() + 1).padStart(2, '0') + "/" + 

                          String(dateObj.getFullYear()).substring(2);

      

      var content = entry.content ? entry.content.$t : (entry.summary ? entry.summary.$t : "");

      var imgSrc = "";

      if (content) {

        var tempDiv = document.createElement('div');

        tempDiv.innerHTML = content;

        

        // BUSCADOR: Procura a imagem que tenha o atributo data-type="fotolog"

        var targetImg = tempDiv.querySelector('img[data-type="fotolog"]');

        

        if (targetImg) {

          imgSrc = targetImg.src;

        } else {

          var fallbackImg = tempDiv.getElementsByTagName('img')[0];

          if (fallbackImg) imgSrc = fallbackImg.src;

        }

      }

      if (imgSrc) {

        html += '<div class="photo-item">';

        html += '  <div class="photo-container">';

        html += '    <a href="' + link + '"><img src="' + imgSrc + '" alt="' + title + '" loading="lazy"></a>';

        html += '  </div>';

        html += '  <div class="photo-caption">';

        html += '    <a href="' + link + '">' + formattedDate + '</a>';

        html += '  </div>';

        html += '</div>';

      }

    }

    

    document.getElementById("fotolog-gallery").innerHTML = html || "Nenhuma foto encontrada.";

  }

</script>

<script src="https://URL-DO-SEU-BLOG.blogspot.com/feeds/posts/default/-/Fotolog?alt=json-in-script&callback=renderGallery&max-results=50"></script>

2º PASSO: Selecionando as imagens que queremos que seja expostas no Fotolog:

O código acima realizará uma busca por todo seu blog atrás da imagem que você quer destacar em seu FOTOLOG, para isso, é necessário deixarmos alguns "ganchos" nas postagens que queremos que uma imagem em específico seja exposta na página Fotolog, para que o buscador às encontre. É de extrema importância seguir o tutorial certinho também. Para isso seguiremos os passos abaixo:

1º Passo do 2º Passo:

 

Quando criar uma postagem, adcione o código abaixo no editor HTML, e insira a URL da imagem que quer destacar na galeria substituindo a parte URL_DA_SUA_FOTO_AQUI. Importantíssimo que a URL da imagem substitua especificamente e somente essa parte do código, ok? Se você já tem posts com fotos e quer que eles apareçam na galeria, basta editar esses posts antigos, adicionar o marcador 'Fotolog' e inserir o código da imagem com o 'data-type', conforme expliquei anteriormente.

OBS: É necessário carregar essa imagem em um repositório para obter a URL da imagem ok? Se inserir a imagem de forma padrão no blog, nao funcionará!

<img data-type="fotolog" height="auto" src="URL_DA_SUA_FOTO_AQUI" width="100%" />

2º Passo do 2º Passo (é confuso mas você tá entendendo, que eu sei kkk):

Nessa mesma postagem nova, e em todas as outras as quais você quer destacar uma imagem específica no seu fotolog, deverá acrescentar um marcador intitulado: Fotolog (exatamente escrito dessa forma, iniciando com letra maiúscula, e sem nenhum espaço antes nem depois).

Com isso, o seu FOTOLOG NO BLOGGER já estará funcionando. Caso deseje, pode terminar por aqui.

3º PASSO: Deixando o FOTOLOG ocupando toda a área do blog

A título de personalização, resolvi esconder a barra lateral quando acessamos a página fotolog, para mim assim ficou mais interessante, e com mais cara de um FOTOLOG propriamente dito. Caso queira acrescentar essa configuração siga o passo abaixo:

1º Passo do 3º Passo: Copie o código abaixo, e cole no seu código HTML do blogger, acima da tag </head>: ele esconde a sidebar, e expande a area da postagem na página do fotolog para toda a área do blog. Deverá ficar conforme a imagem a seguir.

<b:if cond='data:blog.url == "https://URL-DO-SEU-BLOG.blogspot.com/p/fotolog.html"'>

  <style type='text/css'>

    /* 1. Esconde a Sidebar e qualquer gadget lateral */

    .sidebar-container, .sidebar-wrapper, #sidebar, .sidebar, #sidebartop, #sidebarbottom {

      display: none !important;

      width: 0 !important;

    }

    /* 2. Remove margens e paddings que abrem espaço para a sidebar */

    .main-wrapper, .main-container, .content-inner, .columns {

      padding-right: 0 !important;

      padding-left: 0 !important;

      margin-right: 0 !important;

      margin-left: 0 !important;

    }

    /* 3. Força o conteúdo a ocupar os 1200px totais */

    #main, .main, .main-inner, .post-outer {

      width: 1200px !important;

      max-width: 100% !important;

      float: none !important;

      margin: 0 auto !important;

    }

    /* 4. Ajuste para o conteúdo do post não ficar limitado internamente */

    .region-inner.main-inner {

      width: 100% !important;

    }

  </style>

</b:if>

Pessoal, o tutorial é esse. Se tudo der certo, seu FOTOLOG ficará automático, igual o meu. Se der errado, problema é seu, não te obriguei a fazer rsrsrs. Brincadeira. Se houver dúvidas, comente aqui embaixo ou envie um email que logo responderei para te ajudar.

Eu não sou programador tá pessoal? Esses códigos HTML consegui tendo uma boa conversa com meu fiel escudeiro e parceiro de guerra blogueirística, o Xat Gepetê Geminai (Google Gemini), inserindo o que eu queria, falando o que estava dando certo ou nao para ele corrigir, até que chegamos no resultado final.

Vale lembrar novamente que é de SUMA IMPORTÂNCIA FAZER UM BACKUP DO SEU TEMPLATE ANTES DE QUALQUER ALTERAÇÔES DE HTML, porque se der caquinha, tendo um backup não perdemos o layout, e fica fácil restaurar.

Blog e leitores, antes de saírem, peço que visitem os meus outros cantos nessa internet:
Página do Blog no Facebook | Uma Folha e um Background | Tumblr. | Tumblr | Blog Nostalgia Games | Blog do Will

Então pessoal, foi esse o post. Espero que tenham gostado. Um grande abraço, e, até o próximo!