0

O código abaixo é para listar posts do blogger dentro de um marcador, se o post tiver o marcador especifico ele será mostrado nesta lista Gostaria de poder alterar a aparência de como tudo é exibido podendo alterar onde a imagem do post ficaria e onde o titulo ficaria, alterar cor de fundo, adicionar bordas, sombras alterar a fonte etc... (eu sei como alterar a aparência com css, mas não sei integrar o código abaixo com css e html) No momento o código mostra o titulo e a direita do titulo a imagem.

<div>
  <ul id="postList12"></ul>
</div>
<script type="text/javascript">
  var startIndex = 1;
  var maxResults = 150;
  var allResults = [];
  function sendQuery12()
  {
    var scpt = document.createElement("script");
    scpt.src = "/feeds/posts/summary/-/Series?alt=json&callback=processPostList12&start-index=" + startIndex + "&max-results=" + maxResults;
    document.body.appendChild(scpt);
  }
  function printArrayResults(root)
  { 
    //Sort Alphebetically
    allResults.sort(function(a, b){
      var a_string = a.children[0].textContent ;
      var b_string = b.children[0].textContent ;
      if(a_string < b_string) return -1;
      if(a_string > b_string) return 1;
      return 0;
    })
    var elmt = document.getElementById("postList12");
    for (index = 0; index < allResults.length; index++) {
      elmt.appendChild(allResults[index]);
    }
  }
  function processPostList12(root)
  {   
    var elmt = document.getElementById("postList12");
    if (!elmt)
      return;
    var feed = root.feed;
    if (feed.entry.length > 0)
    {
      for (var i = 0; i < feed.entry.length; i++)
      {
        var entry = feed.entry[i];
        var title = entry.title.$t;
        var date = entry.published.$t;

        if( entry.media$thumbnail != undefined ){
          var imageThumb = entry.media$thumbnail.url ;
        } else {
          var imageThumb = 'https://i.imgur.com/PqPqZQN.jpg' ;
        }

        for (var j = 0; j < entry.link.length; j++)
        {
          if (entry.link[j].rel == "alternate")
          {
            var url = entry.link[j].href;
            if (url && url.length > 0 && title && title.length > 0)
            {
              var liE = document.createElement("li");
              var a1E = document.createElement("a");
              var postImage = document.createElement("img");

              a1E.href = url;
              a1E.textContent = title;
              postImage.src = imageThumb;

              liE.appendChild(a1E);
              liE.appendChild(postImage);

              //elmt.appendChild(liE);
              allResults.push(liE);

            }
            break;
          }
        }
      }
      if (feed.entry.length >= maxResults)
      {
        startIndex += maxResults;
        sendQuery12();
      } else {
        printArrayResults();
      }
    }
  }
  sendQuery12();
</script>

1 Resposta 1

0

Você pode usar CSS. Exemplo:

#postList12 { /*Lista*/
  background: #000; /* Cor de fundo */
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; /* Fonte */
}

#postList12 li a { /*Link*/
  color: #fff; /* Cor do texto */
}

#postList12 li a:hover { /*Link quando poe o mouse em cima*/
  color: #ccc; /* Cor do texto */
}
<div>
  <ul id="postList12">
    <li><a href='#'>Post 1</a></li>
    <li><a href='#'>Post 2</a></li>
    <li><a href='#'>Post 3</a></li>
    <li><a href='#'>Post 4</a></li>
  </ul>
</div>

1
  • você poderia me ajudar a mudar no javascript a posição onde a imagem aparece? eu gostaria que ela aparecesse antes do titulo, eu tentei fazer umas mudanças mas os posts saíram de ordem alfabética
    – Mark Vaaz
    Commented 21/06/2018 às 0:17

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .