Bài viết ngẫu nhiên có hình ảnh theo nhãn cho blogspot

Bài viết ngẫu nhiên có hình ảnh theo Label

Javascript

<script>
//<![CDATA[
function randomizeArray(arr) {
  for (var i = arr.length - 1; i > 0; i--) {
    var j = Math.floor(Math.random() * (i + 1));
    var temp = arr[i];
    arr[i] = arr[j];
    arr[j] = temp;
  }
}
function randompostslist(json) {
  var postList = document.getElementById("random-posts-list").getElementsByTagName("ul")[0];
  var allEntries = json.feed.entry;
  randomizeArray(allEntries);
  var selectedEntries = allEntries.slice(0, 5);
  for (var i = 0; i < selectedEntries.length; i++) {
    var entry = selectedEntries[i];
    var entryUrl = entry.link[entry.link.length - 1].href;
    var entryTitle = entry.title.$t;
    var entryImage = entry.media$thumbnail ? entry.media$thumbnail.url.replace('/s72-c/', '/s150-c/') : 'URL_HINH_ANH_MAC_DINH';
    var listItem = document.createElement("li");
    var imgElement = document.createElement("img");
    imgElement.src = entryImage;
    imgElement.title = entryTitle;
    var anchorElement = document.createElement("a");
    anchorElement.href = entryUrl;
    anchorElement.title = entryTitle;
    anchorElement.textContent = entryTitle;
    listItem.appendChild(imgElement);
    listItem.appendChild(anchorElement);
    postList.appendChild(listItem);
  }
}
//]]>
</script>
<script src='https://www.huydc.net/feeds/posts/default/-/Blogspot?max-results=100&alt=json-in-script&callback=randompostslist'/>

1. 5 số bài muốn hiển thị
2. s150 đây là kích thước thumbnail, bạn có thể sửa thành số lớn hơn để chất lượng ảnh tốt hơn so với mặc định là s72-c
3. URL_HINH_ANH_MAC_DINH thay link hình ảnh mặc định đối với bài viết không có thumbnail
4. huydc.net thay bằng tên miền của bạn
5. Blogspot?max-results=100 như ví dụ trên là nhãn Blogspot và lấy 100 bài viết trong nhãn này để lọc ra làm Random post

CSS

#random-posts-list ul{margin:10px 0;width:100%;padding:0;list-style-type:none}
#random-posts-list ul li {position: relative;float: left;border: 0 none;margin-right: 11px;width: calc(20% - 11px);}
#random-posts-list ul li img {border: 1px solid #ddd;width: 100%;height: auto;background: #FFF;}
#random-posts-list ul li div{position:absolute;z-index:99;margin-left:-999em}
#random-posts-list ul li .title{border:1px solid #CCC;background:#FFF;padding:5px 10px}
#random-posts-list ul li:hover img{border:2px solid #333}

1. 20% như ví dụ trên mình để 20% là chiều rộng cho một bài viết, nếu chỉ cho hiển thị 4 bài các bạn có thể để 25% cho đẹp mắt

HTML

<div id="random-posts-list">
  <ul></ul>
<div style='clear:both'/>
</div>