Recent post theo từng nhãn cho Blog trên trang tĩnh

Recent post thì các bạn cũng đã biết, nó là một widget giúp bạn hiện thị những bài viết gần đây trên Blog của bạn. Hôm nay mình sẽ giới thiệu với các bạn một widget recent post giúp bạn hiện thị những bài viết gần đây trên Blog của bạn nhưng là theo Nhãn và được áp dụng trên trang tĩnh, tiện ích này gồm 3 cột. Bây giờ chúng ta cùng tìm hiểu cách làm.

DEMO

#Thêm font Awesome

1. Đăng nhập Blogger

2. Mẫu > Chỉnh sửa HTML

3. Tìm thẻ </head>

4. Dán code dưới vào dưới thẻ mà bạn vừa tìm

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>

5. Lưu mẫu lại

#Tạo trang recent post

1. Trang > Trang mới

2. Chuyển sang chế độ soạn thảo HTML và dán code dưới vào

<style scoped="scoped" type="text/css">
/* Multi Recent Post */
.post-body *,.post-body *:after,.post-body *:before{box-sizing:initial;-webkit-box-sizing:initial;-moz-box-sizing:initial;}
.list-entries{display:table;background:#fdfdfd;margin:1.5% 1%;width:31.3%;float:left;font-size:80%;}
.list-entries ul,.list-entries li{margin:0;list-style:none}
#feed-list-container ul li{background:#fdfdfd;padding:15px;line-height:normal;border:1px solid #eee;border-top:0;transition:all .3s;}
#feed-list-container ul li:hover{background:#fff;}
#feed-list-container ul li:last-child{border-bottom:0;}
.list-entries .main-title{padding:0;overflow:hidden;}
.list-entries .main-title h4{position:relative;display:block;font:inherit;font-weight:700;padding:1em 1.5em;background-color:#4f93c5;color:#fff;margin:0;line-height:normal;font-size:120%;margin-top:0!important}
.list-entries .main-title h4:after{display:inline-block;content:"\f02c";font-family:fontAwesome;font-size:17.4px;font-style:normal;background-color:#4384b3;color:#fff;top:0;right:0;padding:1em 1.25em;position:absolute;font-weight:400}
.list-entries .title a{font-size:13px;text-decoration:none;line-height:.5em;color:#333;font-weight:700;transition:all .3s;}
.list-entries .title a:hover{color:#4f93c5}
.list-entries img,.list-entries .fake-img{border:none;background-color:#333;margin:0 1em 0 0;padding:0;float:left}
.list-entries .summary{overflow:hidden;color:#999}
.list-entries .more-link{border-bottom:none;}
.list-entries .more-link a{display:block;line-height:2em;height:2em;overflow:hidden;text-decoration:none;background-color:#444;padding:1em 1.5em;position:relative;font-weight:400;color:#fff;transition:all .3s;}
.list-entries .more-link a:hover{background-color:#f97e76;color:#fff;}
.list-entries .more-link a:after{display:inline-block;content:"\f054";font-family:fontAwesome;font-size:16.4px;font-style:normal;background-color:#333;color:#ccc;top:0;right:0;padding:1em 1.25em;position:absolute;font-weight:400;transition:all .3s;}
.list-entries .more-link a:hover:after{background-color:#ea726a;color:#fff;}
.widget .post-body ul, .widget .post-body ol {position:relative;}

@media (max-width:640px){
.list-entries {width:100%;}
.list-entries{margin:2.5% 1%;}}
</style>
<div id="feed-list-container">
</div>
<div style="clear:both;">
</div>
<script type="text/javascript">
var multiFeed = {
    feedsUri: [
        {
            name: "Blogspot",
            url: "http://www.khanh98.blogspot.com",
            tag: "Thủ thuật blogspot"
        },
        {
            name: "Facebook",
            url: "http://www.khanh98.blogspot.com",
            tag: "Thủ thuật Facebook"
        },
        {
            name: "Turbo Pascal",
            url: "http://www.khanh98.blogspot.com",
            tag: "Bài tập Turbo Pascal"
        }
],
    numPost: 4,
    showThumbnail: true,
    showSummary: false,
    summaryLength: 0,
    titleLength: "auto",
    thumbSize: 72,
    containerId: "feed-list-container",
    readMore: {
        text: "Xem thêm",
        endParam: "?max-results=5"
    }
};
</script>
<script src="https://cdn.rawgit.com/Arlina-Design/redvision/master/multi-feed.js" type="text/javascript"></script>

Lưu ý:

• name là tên hiện thị cho một cột, cái này là tùy ý bạn
• url là địa chỉ đến trang blog của bạn
• tag là tên nhãn bạn muốn hiện thị, nó phải đúng hoàn toàn
• numpost là số bài viết hiện thị trên mỗi cột
• showThumbnail là hiện thị ảnh trong bài viết
• showSummary là hiện thị trích dẫn
• titleLength là độ dài tiêu đề
• thumbSize là kích thước hình ảnh hiện thị

3. Xuất bản trang
Như vậy là bạn đã hoàn thành, nếu có gì thắc mắc thì bạn hãy để lại một bình luận.

ArlinaDesign