Bài viết mới theo nhãn có hình ảnh cho blogspot

Bài viết mới nhất theo nhãn

Javascript

<script>
//<![CDATA[
function recentpostslist(json) {
  var postList = document.getElementById("recent-posts-list").getElementsByTagName("ul")[0];

  for (var i = 0; i < json.feed.entry.length; i++) {
    var entry = json.feed.entry[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=5&alt=json-in-script&callback=recentpostslist'/>

1. Blogspot?max-results=5 như ví dụ trên là nhãn Blogspot và hiển thị 5 bài mới nhất
2. URL_HINH_ANH_MAC_DINH thay link hình ảnh mặc định đối với bài viết không có thumbnail
3. 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
4. huydc.net thay thành tên miền của bạn

CSS

#recent-posts-list, #recent-posts-list ul li a{float:left}
#recent-posts-list ul{margin:10px 0;width:100%;padding:0;list-style-type:none}
#recent-posts-list ul li {position: relative;float: left;border: 0 none;margin-right: 11px;width: calc(20% - 11px);}
#recent-posts-list ul li img {border: 1px solid #ddd;width: 100%;height: auto;background: #FFF;}
#recent-posts-list ul li div{position:absolute;z-index:99;margin-left:-999em}
#recent-posts-list ul li .title{border:1px solid #CCC;background:#FFF;padding:5px 10px}
#recent-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="recent-posts-list">
<ul></ul>
<div style='clear:both'/>
</div>