Recent bài viết blogspot theo nhãn có hình ảnh thumb

Đăng nhập vào Blogger - Bố cục - Thêm tiện ích - HTML
Copy đoạn code bên dưới và dán vào

<style type="text/css">
.bsrp-gallery {
overflow:hidden;
    width: 1300px;
    clear: both;
    position: relative;
    margin: auto;
}
.bsrp-gallery:after {
display: table;
clear: both;
}
.bsrp-gallery .bs-item a {
position: relative;
float:left;
margin: 0 6px 0 0px;
text-decoration:none;
}
.bsrp-gallery .bs-item .ptitle {
transition-duration: .4s;
background: ; /*--cor de fundo das miniaturas ao passar o mouse --*/
display: block;
clear: left;
font-size: 13px;
font-family: arial;
text-transform:uppercase; /*--coloca o texto em capslock, apague se desejar --*/
line-height:1.3em;
font-weight:bold;
height: 80px; /*--define a altura da legenda --*/
width: 140px; /*--define a largura da legenda --*/
position: absolute;
bottom:-100%;
text-align: center;
padding:100px 30px 30px 30px;
color:#000000; /*--cor da fonte do texto--*/
word-wrap: break-word;
overflow:hidden;
}
.bsrp-gallery .bs-item:hover .ptitle {
bottom: 0%
}
.bsrp-gallery a img {
background: #fff;
float: left;
}
.bsrp-gallery a:hover img {
opacity: 0.3;
}
</style>
<script>
// Blogger Recent Posts Gallery by Bloggersentral.com
// Tutorial at http://www.bloggersentral.com/2013/05/recent-posts-image-gallery-for-blogger.html
// Free to use or share, but please keep this notice intact.
//<![CDATA[
function bsrpGallery(root) {
    var entries = root.feed.entry || [];
    var html = ['<div class="bsrp-gallery nopin" title="Get this from BloggerSentral.com">'];
    for (var i = 0; i < entries.length; ++i) {
        var post = entries[i];
        var postTitle = post.title.$t;
        var orgImgUrl = post.media$thumbnail ? post.media$thumbnail.url : 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-pWBokZiOh0YRoIALm_qH8dvFxRVfnICSjazYvF_hnM3yS-xK6nXBZAhXOG1hXCE2Hp0r8vBw70ZkQvq-BlgRyxxtZ3k6L3kRUeoe57aNZN5KJhJgWpef1-63cQb_tlRxs_h3JfnM9qP4/s72-c/default+image.png';
        var newImgUrl = orgImgUrl.replace('s72-c', 's' + bsrpg_thumbSize + '-c');
        var links = post.link || [];
        for (var j = 0; j < links.length; ++j) {
            if (links[j].rel == 'alternate') break;
        }
        var postUrl = links[j].href;
        var imgTag = '<img src="' + newImgUrl + '" width="' + bsrpg_thumbSize + '" height="' + bsrpg_thumbSize + '"/>';
        var pTitle = bsrpg_showTitle ? '<span class="ptitle">' + postTitle + '</span>' : '';
        var item = '<a href="' + postUrl + '" target="" title="' + postTitle + '">' + imgTag + pTitle + '</a>';
        html.push('<div class="bs-item">', item, '</div>');
    }
    html.push('</div>');
    document.write(html.join(""));
}
//]]>
</script>
<script>
  var bsrpg_thumbSize = 250;
  var bsrpg_showTitle = true;
</script>
<script src="/feeds/posts/default/-/label?max-results=5&alt=json-in-script&callback=bsrpGallery"></script>

Thay đổi các thông số sau để tùy chỉnh:

• var bsrpg_thumbSize = 250: kích thước hình ảnh bài đăng hiển thị thumb. Tùy vào widget của bạn và số bài viết hiển thị mà bạn chỉnh sao cho hợp lý.
• var bsrpg_showTitle = true : Hiển thị tiêu đề bài viết khi rê chuột. Nếu muốn ấn bạn thay true bằng false
• Thay chữ label thành tên nhãn mà bạn muốn hiển thị

Ngoài ra bạn cũng có thể tham khảo style thứ 2 như code bên dưới

<style>
/* BloggerSentral Recent Posts Image Gallery CSS Start */
.bsrp-gallery {padding:10px; clear:both;}
.bsrp-gallery:after {content: "";display: table;clear: both;}
.bsrp-gallery .bs-item a {position: relative;float:left;margin: 0 15px 15px 0 !important;text-decoration:none;}
.bsrp-gallery .bs-item .ptitle {background: rgba(0, 0, 0, 0.5); background: #7f7f7f\9; display: block; clear: left; font-size: 11px; line-height:1.3em; height: 2.6em; position: absolute; text-align: left; bottom: 10%; color:#fff; padding:2px 5px; word-wrap: break-word; overflow:hidden;}
.bsrp-gallery a img {background: #eee; float: left; padding: 5px; box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); -moz-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); transition: background-color 0.4s; -webkit-transition: background-color 0.4s; -moz-transition: background-color 0.4s;}
.bsrp-gallery a:hover img {background: #ee7e22;}
/* BloggerSentral Recent Posts Image Gallery CSS End */
</style>
<script>
// Blogger Recent Posts Gallery by Bloggersentral.com
// Tutorial at http://www.bloggersentral.com/2013/05/recent-posts-image-gallery-for-blogger.html
// Free to use or share, but please keep this notice intact.
//<![CDATA[
function bsrpGallery(root) {
    var entries = root.feed.entry || [];
    var html = ['<div class="bsrp-gallery nopin" title="Get this from BloggerSentral.com">
'];
    for (var i = 0; i < entries.length; ++i) {
        var post = entries[i];
        var postTitle = post.title.$t;
        var orgImgUrl = post.media$thumbnail ? post.media$thumbnail.url : 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-pWBokZiOh0YRoIALm_qH8dvFxRVfnICSjazYvF_hnM3yS-xK6nXBZAhXOG1hXCE2Hp0r8vBw70ZkQvq-BlgRyxxtZ3k6L3kRUeoe57aNZN5KJhJgWpef1-63cQb_tlRxs_h3JfnM9qP4/s72-c/default+image.png';
        var newImgUrl = orgImgUrl.replace('s72-c', 's' + bsrpg_thumbSize + '-c');
        var links = post.link || [];
        for (var j = 0; j < links.length; ++j) {
            if (links[j].rel == 'alternate') break;
        }
        var postUrl = links[j].href;
        var imgTag = '<img src="' + newImgUrl + '" width="' + bsrpg_thumbSize + '" height="' + bsrpg_thumbSize + '"/>';
        var pTitle = bsrpg_showTitle ? '<span class="ptitle">' + postTitle + '</span>' : '';
        var item = '<a href="' + postUrl + '" target="_blank" title="' + postTitle + '">' + imgTag + pTitle + '</a>';
        html.push('<div class="bs-item">
', item, '</div>
');
    }
    html.push('</div>
');
    document.write(html.join(""));
}
//]]>
</script>
<script>
  var bsrpg_thumbSize = 150;
  var bsrpg_showTitle = true;
</script>
<script src="/feeds/posts/summary?max-results=8&amp;alt=json-in-script&amp;callback=bsrpGallery"></script>

Chúc các bạn thành công