Hướng dẫn hiển thị widget bài đăng gần đây của Blogger / Blogspot với số thứ tự

Sau đây là mẹo Blogger hoặc Blogspot về cách tạo và cài đặt tiện ích Bài đăng gần đây sử dụng số. Trên thực tế, hiển thị widget Bài viết gần đây là một trong những widget mà tôi sẽ áp dụng cho một trong những dự án mẫu trên Theme. Chỉ là vì cân nhắc nhiều lần, cuối cùng màn hình hiển thị các bài viết gần đây được thay thế bằng các sửa đổi mới nhất. 

 

Ttôi cũng nghĩ rằng có thể ai đó quan tâm đến kiểu hiển thị tiện ích Bài đăng gần đây này, vì vậy nó có thể hữu ích cho những người khác.

Tôi sẽ giải thích lý do tại sao tiện ích Bài viết gần đây đáng được xem xét cài đặt, là phần hiển thị số của nó được cố ý xây dựng từ một số dòng CSS. Vì vậy, nó có thể làm cho anh ta xuất hiện ở giữa - trung tâm mặc dù tiêu đề của bài viết trên tiện ích xuất hiện càng cao càng tốt.

Rõ ràng, như đã thấy trong hình ảnh nổi bật ở trên. CSS trông như thế này:

/* Recent Posts by Bungfrangki.com */
#recent-articles .widget-content, #recent-articles ul {padding: 0;counter-reset:count;margin: 0 auto;display: block}
#recent-articles a:link, #recent-articles a:visited {font-weight: normal}
#recent-articles ul li {background-color:#f7f7f7;margin:0 auto;padding:8px 8px 8px 60px;list-style:none;position:relative;border-bottom:1px solid #fff;font-size:90%;text-align:left}
#recent-articles ul li:before{color: #fff!important;counter-increment: count;content: counter(count);position: absolute;left:0;top:0;bottom:0;text-align: center;z-index: 51;transition: all .4s;width:50px;font-size: 150%!important;background:#2b71a2;font-weight:500;text-align: center;padding:0;border-right:1px solid #fff;display:flex;flex-direction:column;justify-content:center;height:100%}
#recent-articles ul li:last-child{border:none}
#recent-articles ul li a {font-weight:400 ;display:block;color:#222 ;text-decoration:none ;line-height:1.4em ;}
#recent-articles ul li:hover{background-color:#f5f5f5;}
#recent-articles ul li:hover:before{background-color:#24699A;}
#recent-articles ul li a:hover,#recent-articles ul li:hover a {color: #2b71a2 !important;}
#recent-articles ul li:before, #recent-articles ul li .item-title a {font-weight: 400;font-size: 12px;color: inherit;text-decoration: none}

Đi tới Chỉnh sửa HTML, sau đó đặt mã này phía trên mã </body> hoặc & lt;! - </body> - & gt; & lt; / body & gt;

<script type='text/javascript'>
//<![CDATA[
numPosts = 10;function recentPosts(a){if(document.getElementById("recent-posts")){var e=a.feed.entry,title,link,content="",ct=document.getElementById("recent-posts");ct.async=true;for(var i=0;i<numPosts;i++){for(var j=0;j<numPosts;j++){if(e[i].link[j].rel=="alternate"){link=e[i].link[j].href;break}}var title=e[i].title.$t;content+='<li class="recent-posts"><a href="'+link+'" title="'+title+'">'+title+'</a></li>'}ct.innerHTML=content}}var rcp=document.createElement('script');rcp.async=true;rcp.src='/feeds/posts/summary?alt=json-in-script&orderby=published&max-results='+numPosts+'&callback=recentPosts';document.getElementsByTagName('head')[0].appendChild(rcp);
//]]>
</script>

Cuối cùng, đi tới Bố cục hoặc Bố cục rồi Thêm Tiện ích, sau đó sao chép mã sau

<div id='recent-articles' class='recent-articles'><ul id="recent-posts"></ul></div>

Nếu hữu ích đừng quên Like | Share | Comment

Source : www.hoit.asia