Install Multi Recent Posts on Static Pages

Install Multi Recent Posts on Static Pages

Install Multi Recent Posts on Static Pages - This time I will share a widget that is quite interesting, the multi recent post widget that will display a row of the latest posts from blogs that you can choose based on the selected label.

I got this widget from a blog www.dte.web.idthat has been slightly modified to make it cool ... Ok, go straight to how to apply it:

Before applying this widget, it's a good idea to use a template that has a font awesome link in my template, if you don't have it 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, my friend only needs to add the code below to the static post page (HTML Tab)

Install Multi Recent Posts on Static Pages

<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: "Blogger", url: "https://sayemtutorial.blogspot.com/", tag: "Blogger" }, { name: "WordPree", url: "https://sayemtutorial.blogspot.com/", tag: "WordPress" }, { name: "Tips", url: "https://sayemtutorial.blogspot.com/", tag: "Tips" } ], numPost: 4, showThumbnail: true, showSummary: false, summaryLength: 0, titleLength: "auto", thumbSize: 72, containerId: "feed-list-container", readMore: { text: "Read more", endParam: "?max-results=5" } }; </script> <script src="https://cdn.jsdelivr.net/gh/Arlina-Design/redvision@master/multi-feed.js" type="text/javascript"></script>

2. Save the page and see the results.

DEMO

Information :

• InfonumPost: Specifies the number of posts that you want to display
• show thumbnails: Change the value to false to hide the image
• show summary: Change the value to true to display the post summary
• summary length: Specifies the number of characters in the summary
• thumb size: Shows the size of thumbnails displayed
• text: Change the words "More"
• endParam: Specifies the number of posts to 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.

Source:
https://www.dte.web.id/2013/04/widget-blogger-to-show-list.html