How do I style this code with css and html? Blogger

Question

How do I style this code with css and html? Blogger

Navigation

#1 by (0 votes)

0

The code below is for listing blogger posts within a bookmark , if the post has the specific bookmark it will be shown in this list I would like to be able to change the appearance of how everything is displayed by changing where the post image would look and where the title would look, change background color, add borders, change shadows font etc ... I know how to change the appearance with css, but I do not know how to integrate the code below with css and html) At the moment the code shows the title and the right of the title the image.

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

javascript html css blogger

asked by anonymous 20.06.2018 / 20:31

1 answer

Ajax does not enter success How to import pydensecrf.densecrf?

score 0 · Accepted Answer

You can use CSS. Example:

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