Trang chủ
Blogspot
Yêu Cầu

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

Đỗ Thu Hoài
Theo yêu cầu của bạn Đông Lê, bài viết này mình sẽ hướng dẫn cách thêm bài viết mới theo nhãn có hình ảnh cho blogspot
Ngoài ra tiện ích này có responsive và hình ảnh thumbnail chất lượng cao

Demo

Như Demo bên dưới là 5 bài viết mới nhất theo nhãn "Blogspot" ở tại blog này của mình

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

    Dán đoạn HTML bên dưới vào nơi muốn hiển thị 
    <div id="recent-posts-list">
<ul></ul>
<div style='clear:both'/>
</div>
    Lưu lại và xem kết quả. Để lại nhận xét nếu bạn gặp vướng mắc trrong quá trình thực hiện