Installing Multi Recent Posts on Static Pages

Installing Multi Recent Posts on Static Pages - This time I will share a widget that is quite interesting, namely the recent multi post widget that will display a list of the latest posts from the blog that you can specify based on the selected label.

I got this widget from the blog www.dte.web.id which has been slightly modified to make it cool ... Ok just go to the way to implement it:

Before applying this widget it's good in the template that you use already have a fontawesome link, if you don't already have one, please apply the link below before the closing tag </ head>

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

1. The application is very easy, you just need to add the code below on the static page post (HTML tab)

<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: "JUDUL LABEL",
            url: "URL-BLOG",
            tag: "NAMA LABEL"
        },
        {
            name: "JUDUL LABEL",
            url: "URL-BLOG",
            tag: "NAMA LABEL"
        },
        {
            name: "JUDUL LABEL",
            url: "URL-BLOG",
            tag: "NAMA LABEL"
        }
],
    numPost: 4,
    showThumbnail: true,
    showSummary: false,
    summaryLength: 0,
    titleLength: "auto",
    thumbSize: 72,
    containerId: "feed-list-container",
    readMore: {
        text: "Selengkapnya",
        endParam: "?max-results=5"
    }
};
</script>
<script src="https://cdn.rawgit.com/Arlina-Design/redvision/master/multi-feed.js" type="text/javascript"></script>

2. Save the page and see the results. .

Results

Information :

• numPost: Specifies the number of posts that you want to display
• showThumbnail: Change the value to false to hide the image
• showSummary: Change the value to true to display a summary of the post
• summaryLength: Specifies the number of characters in the summary
• thumbSize: Shows the thumbnail size displayed
• text: Change the words "More"
• endParam: Specifies the number of posts that will be displayed when pressing the read more button.

For more information, please visit the source page.

So about how to Install Multi Recent Posts on Static Pages, hopefully useful.