Multi Tab Specific Label Posts widget for blogger

Hi friends, my last widget about specific label was in Tab style. I mean that that widget consists of tabs by which you can see related post by specific label in separate tab.

This time again I am having another specific label widget in multi tab style.

Multi tab means that this widget is having multiple tabs which shows a specific label posts.

If you are confused or if you have any confusion please go to the demo page and see the demo by clicking the demo button below.
View Demo

I hope that you may have seen the demo now you are familiar with the style of this multi tab specific label posts widget.

If you like responsive things then be happy because this widget is responsive to all devices. As you can see the responsiveness of this widget on demo page.

So now follow these steps to add this multi tab specific label posts widget in your blogger blog.

In this article I am going to provide you the steps to add this multi tab specific label posts widget into static page of your blogger blog site.

Follow these steps to install this widget:

Go to Blogger Dashboard
Go to Page Section
Click Add New Page

Give your page a name and description.

Now copy the code provided below and paste into the HTML Editor of that page.

<!--DOCTYPE html-->
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Multi Tab Recent Posts By Specific Label</title>
  <script type="text/javascript">
var multiFeed = {
    feedsUri: [
        {
            name: "SEO",
            url: "https://www.softwebtuts.com/",
            tag: "seo"
        },
        {
            name: "Tutorials",
            url: "https://www.softwebtuts.com/",
            tag: "tutorial"
        },
        {
            name: "Blogger",
            url: "https://www.softwebtuts.com/",
            tag: "blogger"
        },
        {
            name: "Widgets",
            url: "https://www.softwebtuts.com/",
            tag: "blogger widgets"
        },
        {
            name: "HTML",
            url: "https://www.softwebtuts.com/",
            tag: "html"
        },
        {
            name: "CSS",
            url: "https://www.softwebtuts.com/",
            tag: "css"
        },
        {
            name: "JavaScript",
            url: "https://www.softwebtuts.com/",
            tag: "javascript"
        },
        {
            name: "Jquery",
            url: "https://www.softwebtuts.com/",
            tag: "jquery"
        },
        {
            name: "Game",
            url: "https://www.softwebtuts.com/",
            tag: "game"
        }
],
    numPost: 4,
    showThumbnail: true,
    showSummary: false,
    summaryLength: 0,
    titleLength: "auto",
    thumbSize: 72,
    containerId: "feed-list-container",
    readMore: {
        text: "View More",
        endParam: "?max-results=5"
    }
};
</script>
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' id='fontawesome' rel='stylesheet' type='text/css'/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<style>
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);
body {
  background: #eaeaea none repeat scroll top left;
  color: #444;
  font-family: 'Open Sans', sans-serif;
  margin: 0;
  padding: 0;
  position: relative;
  line-height: normal;
}

.container {
  max-width: 1100px;
  margin: 12% auto;
  padding: 0;
  font-family: 'Open Sans', sans-serif;
}
/* Multi Feed Label */

.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: 1.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;
}

#Blog1 {
  margin-right: 0;
}

#main-wrapper {
  width: 100%;
}

#sidebar-wrapper {
  display: none;
}

.breadcrumbs,
.post.hentry {
  background: transparent;
}

h2.post_title.entry-title,
.breadcrumbs {
  margin-bottom: 0;
  padding: 0;
  visibility: hidden;
  width: 0;
  height: 0;
}

.post.hentry {
  padding-top: 0;
}

.widget .post-body ul,
.widget .post-body ol {
  position: relative;
}

@media (max-width:640px) {
  .list-entries {
    width: 100%;
  }
  .list-entries {
    margin: 2.5% 1%;
  }
  .container {
    padding: 20px;
  }
}
</style>
</head>

<body>

  <div class="container">
<div id="feed-list-container">
</div>
<div style="clear:both;">
</div>
</div>
<script>
//<![CDATA[
var mf_defaults={feedsUri:[{name:"HTML",url:"https://www.softwebtuts.com",tag:"html"},{name:"SEO",url:"https://www.softwebtuts.com",tag:"seo"},{name:"Tutorial",url:"https://www.softwebtuts.com",tag:"tutorial"}],numPost:4,showThumbnail:true,showSummary:true,summaryLength:80,titleLength:"auto",thumbSize:72,newTabLink:false,containerId:"feed-list-container",listClass:"list-entries",readMore:{text:"More",endParam:"?max-results=20"},autoHeight:false,current:0,onLoadFeed:function(a){},onLoadComplete:function(){},loadFeed:function(c){var d=document.getElementsByTagName("head")[0],a=document.getElementById(this.containerId),b=document.createElement("script");b.type="text/javascript";b.src=this.feedsUri[c].url+"/feeds/posts/summary"+(this.feedsUri[c].tag?"/-/"+this.feedsUri[c].tag:"")+"?alt=json-in-script&max-results="+this.numPost+"&callback=listEntries";d.appendChild(b)}};for(var i in mf_defaults){mf_defaults[i]=(typeof(multiFeed[i])!==undefined&&typeof(multiFeed[i])!=="undefined")?multiFeed[i]:mf_defaults[i]}function listEntries(q){var p=q.feed.entry,c=mf_defaults,h=document.getElementById(c.containerId),a=document.createElement("div"),d="<ul>",l=c.feedsUri.length,n,k,m,g;for(var f=0;f<c.numPost;f++){if(f==p.length){break}n=(c.titleLength!=="auto")?p[f].title.$t.substring(0,c.titleLength)+(c.titleLength<p[f].title.$t.length?"…":""):p[f].title.$t;m=("summary" in p[f])?p[f].summary.$t.replace(/<br ?\/?>/g," ").replace(/<.*?>/g,"").replace(/[<>]/g,""):"";m=(c.summaryLength<m.length)?m.substring(0,c.summaryLength)+"…":m;g=("media$thumbnail" in p[f])?'<img src="'+p[f].media$thumbnail.url.replace(/\/s72(\-c)?\//,"/s"+c.thumbSize+"-c/")+'" style="width:'+c.thumbSize+"px;height:"+c.thumbSize+'px;" width="72" height="72">':'<span class="fake-img" style="width:'+c.thumbSize+"px;height:"+c.thumbSize+'px;"></span>';for(var e=0,b=p[f].link.length;e<b;e++){k=(p[f].link[e].rel=="alternate")?p[f].link[e].href:"#"}d+='<li><div width="72" height="72" class="inner"'+(!c.autoHeight?' style="height:'+c.thumbSize+'px;overflow:hidden;"':"")+">";d+=(c.showThumbnail)?g:"";d+='<div class="title"><a href="'+k+'"'+(c.newTabLink?' target="_blank"':"")+">"+n+"</a><a style='display:none' rel='dofollow' href='https://www.softwebtuts.com/2019/05/multi-tab-specific-label-posts-blogger-widget.html'>Love this widget.?</a></div>";d+='<div class="summary">';d+="<span"+(!c.showSummary?' style="display:none;"':"")+">";d+=(c.showSummary)?m:"";d+="</span></div>";d+='<span style="display:block;clear:both;"></span></div></li>'}d+="</ul>";d+='<div class="more-link"><a href="'+c.feedsUri[c.current].url.replace(/\/$/,"")+"/search/label/"+c.feedsUri[c.current].tag+c.readMore.endParam+'"'+(c.newTabLink?' target="_blank"':"")+">"+c.readMore.text+"</a></div>";a.className=c.listClass;a.innerHTML='<div class="main-title"><h4>'+c.feedsUri[c.current].name+"</h4></div>"+d;h.appendChild(a);c.onLoadFeed(c.current);if((c.current+1)<l){c.loadFeed(c.current+1)}if((c.current+1)==l){c.onLoadComplete()}c.current++}mf_defaults.loadFeed(0);
  //]]>
</script>
</body>
</html>

Click Publish Button.

So after following and performing all the steps provided above now you have successfully added this multi tab specific label posts widget into your blogger blogs static page.

Customisation which you have to make in the above code are provided below read the customisation list carefully and customise the source code of this widget according to your requirement. But the main thing that you have to replace is your site URL.

The configuration setting of this widget is in json or array format. Array looks like this.

{
name: "SEO",
url: "https://www.softwebtuts.com/",
tag: "seo"
}

Here name SEO is the title of tab, url is the url of website of which you want to show posts replace it with your website. Tag is the label for which you want to show posts.

If you want to add more tags use the above code and replace the title and label.

Some Extra Settings:

Config	Description
numPost: 4	NUmber of posts to show per label, Default is 4.
showThumbnail: true	Specify whether you want to show thumbnails or not, Default is True.
showSummary: false	Specify whether you want to show summary of posts or not by default is false.
summaryLength: 0	Summary word count length. If show summary is true specify it.
text: "View More"	Text for view more button.
endParam: "?max-results=5"	Replace 5 with the number of posts to show on search page when view more button is clicked.

You can also change the color scheme font size font color font family and other styles of this widget according to your requirement but for that you should have knowledge of CSS.

Conclusion:

You can also use this multi tab specific label posts widget into your sidebar but for that you have to select the minimum numbers of tabs because if you choose maximum number of Tabs then your sidebar will go very very long.

I hope that you will like this multi tab specific label posts widget for blogger and will add this widget into your blogger blog.

If you want more help or if you have any question please let me know in the comment section I will try to answer as soon as possible.

Multi Tab Specific Label Posts widget for blogger

Follow these steps to install this widget:

Some Extra Settings:

Conclusion:

Đăng nhận xét

Biểu mẫu liên hệ