Code hiển thị bài viết theo nhãn trong Blogspot (Blogger)

Chào bạn! khá lâu rồi mình chưa có post bài lên web blog này rồi, hôm nay mình chia sẻ Code hiển thị bài viết theo nhãn trong Blogspot (Blogger), bài viết này có thể góp ý giúp bạn tạo thêm trang label blogspot riêng biệt.

Các bước để dán code đúng trong code blogspot thì chúng ta vẫn past bình thường nhé đối với CSS thì nằm trong thẻ </style> hoặc </b:skin> Còn HTML thì nằm trong thẻ mở <body> và JS thì trước thẻ đóng </body>

1. Code Label blogspot (Code gốc)

- Code này mình share lại từ anh "Rio Ilham Hadi" mình thấy có thể 1 ngày nào đó bạn sẽ cần nên mình cũng share lại để lên đây.

1.1 Code HTML

<div id='xtitlex'></div>
<ul id='recent-posts'></ul>

1.2 Code CSS

/* Recent Post Material Design by VEOSPOT.COM */
li.recent-posts:hover{box-shadow:0 2px 2px 0 rgba(0,0,0,0.14), 0 5px 10px 0 rgba(0,0,0,0.12), 0 5px 10px -5px rgba(0,0,0,0.2)}
.recenthd,li.recent-posts{box-shadow:0 0 2px 0 rgba(0,0,0,.12),0 2px 2px 0 rgba(0,0,0,.24);background:#fff;border-radius:3px;overflow:hidden}
a.gorecent{float:right;font-size:11px;padding:5px 10px;margin:-4px}
.recenthd h2{display:inline-block;text-transform:uppercase;font-size:15px;margin:0}
.recenthd svg{float:left;margin-right:10px}
.recenthd{padding:15px;text-align:left;margin-bottom:10px}ul#recent-posts{margin:0;padding:0}
li.recent-posts:nth-child(12),li.recent-posts:nth-child(4),li.recent-posts:nth-child(8){margin-right:0}
li.recent-posts{transition:all .3s ease-in-out;list-style:none;padding:0;margin-bottom:20px;text-align:center;width:260px;max-width:100%;float:left;height:260px;margin-right:20px}
.title_post a{color:#515151}li.recent-posts a:hover{color:#111}
.title_post{height:30px;overflow:hidden;padding:10px;line-height:1.4;font-size:13.4px}
.recent-posts img{height:190px;width:100%}
a.gorecent{text-transform:uppercase;line-height:1.5;font-size:11px;font-weight:700;color:#fff;border:none;padding:7px 15px 7px;border-radius:5px;background:#1976d2;cursor:pointer;outline:0;box-shadow:0 2px 2px 0 rgba(154,154,154,.14),0 1px 5px 0 rgba(0,0,0,.12),0 3px 1px -2px rgba(0,0,0,.12);margin-right:7px}
@media screen and (max-width:768px){.howtouse{width:39%}#safe-wrapper{width:auto;padding:18px;margin:-100px 0 0}li.recent-posts{width:45.6%}}
@media screen and (max-width:480px){li.recent-posts{width:100%}}

1.3 Code JS (Javascript)

<script type='text/javascript'>
//<![CDATA[
// Recent Post Settings
var recentpost_url = "https://veospot.blogspot.com";
var numPosts = 8;
var recentpost_label = "template";
// Recent Post
function recentPosts(e){if(document.getElementById("recent-posts")){for(var t,s,r=e.feed.entry,n="",a=document.getElementById("recent-posts"),l=0;l<numPosts;l++){for(var c=0;c<numPosts;c++)if("alternate"==r[l].link[c].rel){s=r[l].link[c].href;break}"media$thumbnail"in r[l]?u=r[l].media$thumbnail.url.replace(/.*?:\/\//g,"//").replace(/\/s[0-9]+\-c/g,"/s300"):u="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhS0n86Y_-4H27eJgceZxb6oXymnZ_FQHdF4f2fZsCBRc5YQeROnXUNS57uVvMAbup8nKKI96UgVQ6C5y8_rquPeKZ9e0UKobyuJ4T_hfAH6dTRTw1nREF73hL24XUHHddKJLMVkV4y-S8/s90/nothumb_large.png";var t=r[l].title.$t;n+='<li class="recent-posts"><a href="'+s+'" title="'+t+'" target="_blank"><img src="'+u+'" alt="'+t+'"></a><div class="title_post"><a href="'+s+'" title="'+t+'" target="_blank">'+t+"</a></div></li>"}a.innerHTML=n}}var rcp=document.createElement("script");rcp.src=recentpost_url+"/feeds/posts/default/-/"+recentpost_label+"?orderby=published&alt=json-in-script&max-results="+numPosts+"&callback=recentPosts",document.getElementsByTagName("head")[0].appendChild(rcp);
// Recent Post Title
var titlerecentpost = document.getElementById("xtitlex");
titlerecentpost.innerHTML='<div class="recenthd"><svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M4 6H2v14c0 1.1.9 2 2 2h14v-2H4V6zm16-4H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-1 9H9V9h10v2zm-4 4H9v-2h6v2zm4-8H9V5h10v2z"/></svg><h2>'+recentpost_label+'</h2><a class="gorecent" href="'+recentpost_url+'/search/label/'+recentpost_label+'" title="Recent Post" target="_blank">View More</a></div>';
//]]>
</script>

2. Label blogspot (Code đã edit)

- Mình cũng đã chỉnh sửa lại 1 chút về code CSS trong bài bài viết hiển thị bản DEMO trong page veolike, trong bài viết này mình sẽ để lại code gốc cho các bạn tham khảo

- Đọc thêm: Code đếm số lượng trong Blogspot trang bài viết, trang tĩnh, trang Label

1.1 Code HTML

<div id='xtitlex'></div>
<ul id='recent-posts'></ul>

1.2 Code CSS

li.recent-posts{box-shadow: 0px 1px 5px #555;background-color: white;}
.card__title {font-size:1.1rem;line-height:1.4;padding: 0 .75rem .75rem .75rem;font-weight: 400;color:inherit}
.card__title a{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color: #2d2d2d;text-overflow:ellipsis}
img.card__thumbnail {max-width: 100%;width: 100%;height:250px;object-fit: cover;border-radius: 4px !important;animation: fadeInImages 0.5s ease;}
@media (max-width: 567px) {
img.card__thumbnail {width: 100%;height:auto;object-fit: cover;animation: fadeInImages 0.5s ease;}}
.recenthd{box-shadow:0 0 2px 0 rgba(0,0,0,.12),0 2px 2px 0 rgba(0,0,0,.24);background:#fff;border-radius:3px;overflow:hidden}
.recenthd h2{display:inline-block;text-transform:uppercase;font-size:15px;margin:0}
.recenthd svg{float:left;margin-right:10px}
.recenthd{padding:15px;text-align:left;margin:1rem 1rem 0 1rem}
#recent-posts{display: grid;padding: 1rem;grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));grid-gap: 1rem;}
li.recent-posts{display: grid;border-radius: 4px !important;}
li.recent-posts .button{align-self: end;}

1.3 Code JS (Javascript)

<script type='text/javascript'>
//<![CDATA[
// Recent Post Settings
var recentpost_url = "https://veolike.blogspot.com";
var numPosts = 8;
var recentpost_label = "template";
// Recent Post
function recentPosts(e){if(document.getElementById("recent-posts")){for(var t,s,r=e.feed.entry,n="",a=document.getElementById("recent-posts"),l=0;l<numPosts;l++){for(var c=0;c<numPosts;c++)if("alternate"==r[l].link[c].rel){s=r[l].link[c].href;break}"media$thumbnail"in r[l]?u=r[l].media$thumbnail.url.replace(/.*?:\/\//g,"//").replace(/\/s[0-9]+\-c/g,"/s300"):u="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhS0n86Y_-4H27eJgceZxb6oXymnZ_FQHdF4f2fZsCBRc5YQeROnXUNS57uVvMAbup8nKKI96UgVQ6C5y8_rquPeKZ9e0UKobyuJ4T_hfAH6dTRTw1nREF73hL24XUHHddKJLMVkV4y-S8/s90/nothumb_large.png";var t=r[l].title.$t;n+='<li class="recent-posts"><a href="'+s+'" title="'+t+'" target="_blank"><img class="card__thumbnail" src="'+u+'" alt="'+t+'"></a><div class="card__title"><a href="'+s+'" title="'+t+'" target="_blank">'+t+"</a></div></li>"}a.innerHTML=n}}var rcp=document.createElement("script");rcp.src=recentpost_url+"/feeds/posts/default/-/"+recentpost_label+"?orderby=published&alt=json-in-script&max-results="+numPosts+"&callback=recentPosts",document.getElementsByTagName("head")[0].appendChild(rcp);
// Recent Post Title
var titlerecentpost = document.getElementById("xtitlex");
titlerecentpost.innerHTML='<div class="recenthd"><svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M4 6H2v14c0 1.1.9 2 2 2h14v-2H4V6zm16-4H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-1 9H9V9h10v2zm-4 4H9v-2h6v2zm4-8H9V5h10v2z"/></svg><h2>'+recentpost_label+'</h2><a class="gorecent" href="'+recentpost_url+'/search/label/'+recentpost_label+'" title="Recent Post" target="_blank">View More</a></div>';
//]]>
</script>

* Code blogspot veospot.com chia sẻ lên website blog này chỉ mang tính chất tham khảo, nếu bạn có ý kiến cần góp ý thì vui lòng comments ở bên dưới nhé! rất vui được giao lưu với các bạn!