Faça o container "Leia Também" aparecer no meio do conteúdo do Blogger sem precisar adicioná-lo em todos os artigos

Aparecer no meio do conteúdo sem precisar colocar em todos os artigos

Para fazer o container de lista de artigos recentes "Leia também" aparecer automaticamente no meio dos artigos sem precisar adicioná-lo manualmente a cada artigo, você pode usar JavaScript para inserir o container em um local específico dentro do conteúdo do artigo. Aqui está como você pode fazer isso:

1. HTML:

Certifique-se de que o seu artigo seja encapsulado em uma tag <article>. Você não precisa adicionar um local específico para o container "Leia também" em cada artigo.

2. CSS:

Estilize o container "Leia também" como desejar.

#leia-tambem-container {
  border: 1px solid #ccc;
  padding: 10px;
  margin: 20px 0;
  background-color: #f9f9f9;
}

3. JavaScript:

Use JavaScript para inserir o container "Leia também" automaticamente no meio do artigo.

document.addEventListener('DOMContentLoaded', function () {
  const articles = document.querySelectorAll('article');
  articles.forEach(article => {
    const paragraphs = article.querySelectorAll('p');
    const midIndex = Math.floor(paragraphs.length / 2);

    const leiaTambemContainer = document.createElement('div');
    leiaTambemContainer.id = 'leia-tambem-container';
    leiaTambemContainer.innerHTML = `
      <h2>Leia também</h2>
      <ul id="related-posts"></ul>
    `;

    if (paragraphs[midIndex]) {
      paragraphs[midIndex].insertAdjacentElement('afterend', leiaTambemContainer);

      fetch('/feeds/posts/default?alt=json')
        .then(response => response.json())
        .then(data => {
          const entries = data.feed.entry;
          const relatedPosts = entries.slice(0, 3).map(entry => {
            const title = entry.title.$t;
            const url = entry.link.find(link => link.rel === 'alternate').href;
            return `<li><a href="${url}">${title}</a></li>`;
          }).join('');

          document.getElementById('related-posts').innerHTML = relatedPosts;
        })
        .catch(error => console.error('Erro ao buscar artigos:', error));
    }
  });
}); 

4. Instruções adicionais:

Coloque o CSS no seu arquivo de estilo e adicione o JavaScript no final do seu template, antes da tag de fechamento </body>, ou em um arquivo JavaScript separado.

Este script irá inserir o container "Leia também" no meio dos artigos automaticamente, preenchendo-o com links para os três artigos mais recentes do seu blog. Faça ajustes conforme necessário para se adequar ao estilo e estrutura do seu blog.

Vai ficar assim:

Se precisar de mais alguma coisa, estou aqui para ajudar! 😊