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

• Thêm chức năng Bookmark cho blogspot
• Loại bỏ link liên kết ngoài ở phần nhận xét
• Hiển thị phân loại nhãn (label) theo ý muốn
• Ghim nhận xét blogspot lên trên cùng
• Sitemap cho blogspot - Duy Phạm ver 3

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>