How To Add Responsive Recent Post Label Widget In Blogger

Hello Folks, Today in this article we are going to explain How to add responsive recent posts label widget in blogger template.You might have seen on so many websites or blog that on home page of website there they are displaying contents with the label widget,However now this kind of gadget comes with premium blogger template and in other blog they use simple json trick to display the recent posts with labels and those widgets are not responsive.We have tried best and presented beautiful responsive recent post plugin for blogger templates.
This widget will display five recent posts from the labels which are the most recent and rest with the button view all and in this 5 posts one with display with Big image and rest others with title of the post/article.We have used CSS for styling ,JavaScript for calling labels from feed and added HTML widget.So when you want to display the articles from different labels you need to go to layout and just change the label name from the widget and hit save button you will see new feed is live and we have added font awesome icon for the widget title,you can change the icons if you want too.So in order to install responsive recent posts widget in blogger website follow the steps mentioned below.

How to add Responsive Recent Posts With labels Widget In Blogger

Installation Steps:

Step 1. Log in to your Blogger account and Go to your Blogger Dashboard.

Step 2. Now Click on -> Template -> Edit HTML.

Step 3. Now Search for </head> by Pressing Ctrl+F keys.

Step 4. Now Copy the below code snippet and paste it just before/above </head>.

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style type='text/css'>
/* Responsive Recent Post Label Widget By www.Bloggersstand.com */
.bsdlabel1 ul,.bsdlabel2 ul{list-style:none;margin:0;padding:0}
.bsdlabel1 li,.bsdlabel2 li{margin:0;padding:0;}
.bsdlabel1 .widget,.bsdlabel2 .widget{margin:0;padding:0}
.bsdlabel1 .widget-content,.bsdlabel2 .widget-content{border:1px solid #e9e9e9;padding:20px;margin:0;word-wrap:break-word;overflow:hidden}
.bsdlabel1 h2,.bsdlabel2 h2,.bsdlabel3 h2{position:relative;margin:0;padding:15px 20px;font-size:16px;font-weight:700;text-transform:uppercase;color:#333;border:1px solid #e9e9e9;border-bottom:0}
.bsdlabel2 h2,.bsdlabel3 h2{margin:20px 0 0 0;}
.bsdlabel1 h2:before,.bsdlabel2 h2:before,.bsdlabel3 h2:before{content:&#39;\f1ea&#39;;right:10px;bottom:0;font-family:FontAwesome;font-style:normal;font-weight:normal;margin:0 10px 0 0;color:#ff675c;}
.bsdlabel2 h2:before{content:&#39;\f1a8&#39;;}.bsdlabel3 h2:before{content:&#39;\f143&#39;;}
.bsdlabel1 .index,.bsdlabel2 .index{font-size:10px;float:right;font-weight:400;}
.bsdlabel1 .index a,.bsdlabel2 .index a{display:flex;color:#039be5;padding:3px 8px;border-radius:2px;font-weight:400;border:1px solid #29b6f6}
.bsdlabel2 .index a{color:#ef6c00;border-color:#ffa726}
.bsdlabel1 .index a:hover{background:#039be5;color:#fff;border-color:transparent}
.bsdlabel2 .index a:hover{background:#ef6c00;color:#fff;border-color:transparent}
.bsdlabel1 .index a:after{content:&quot;\f105&quot;;font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-left:5px}
.bsdlabel2 .index a:after{content:&quot;\f105&quot;;font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-left:6px}
.bsdlabel2 span.bsd_meta_comment a:hover{color:#38761d!important}
.bsdlabel2 ul.bsd_thumbs li a:hover,.bsdlabel2 ul.bsd_thumbs2 li a:hover{color:#ff675c;text-decoration:none}
.bsd_left{width:280px;width:45.7%;float:left;margin:0;padding:0 20px 0 0;border-right:1px solid #e9e9e9}
.bsd_right{width:250px;width:47.5%;float:right;margin:0;padding:0}
ul.bsd_thumbs{margin:0;padding:0}
ul.bsd_thumbs li,ul.bsd_thumbs2{margin:0;padding:0}
ul.bsd_thumbs .cat_thumb{position:relative;margin:0 0 15px;padding:0;width:280px;height:200px}
ul.bsd_thumbs .cat_thumb img{height:auto;width:100%;transition:all 0.2s}
ul.bsd_thumbs .cat_thumb img:hover{opacity:.9;}
ul.bsd_thumbs2 li{margin:0 0 10px;padding:0 0 10px;border-bottom:1px solid #e9e9e9}
ul.bsd_thumbs2 li:last-child{border-bottom:none;margin:0;padding:0}
ul.bsd_thumbs2 .cat_thumb2{float:left;margin:0 10px 0 0;width:62px;height:72px;overflow:hidden}
ul.bsd_thumbs2 .cat_thumb2 img{height:auto;transition:all .2s}
ul.bsd_thumbs2 .cat_thumb2 img:hover{opacity:.9;}
span.bsd_title{font-family:&#39;Roboto Condensed&#39;,sans-serif;font-size:20px;font-weight:700;display:block;margin:0 0 10px;line-height:normal;text-transform:none}
span.bsd_title2{font-size:16px;line-height:1.4em;margin:0 0 3px}
span.bsd_title a{color:#333}
span.bsd_title a:hover{color:#ff675c;text-decoration:none}
span.bsd_summary{display:block;line-height:1.6em;font-size:13px;text-overflow:ellipsis;margin:10px 0 0 0}
span.bsd_meta{display:block;font-family:&#39;Roboto Condensed&#39;,sans-serif;font-size:11px;font-weight:400;color:#aaa;text-transform:uppercase}
span.bsd_meta a{color:#aaa;display:inline-block}
span.bsd_meta_date,span.bsd_meta_comment,span.bsd_meta_more{display:inline-block;margin-right:10px}
span.bsd_meta_comment a:before{content:&quot;\f0e6&quot;;font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-right:5px}
span.bsd_meta_comment a:hover{color:#ff675c!important}
span.bsd_meta_date:before{content:&quot;\f133&quot;;font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-right:5px}
ul.bsd_thumbs2 li a:hover,ul.bsd_thumbs li a:hover{color:#ff675c;text-decoration:none}
@media screen and undefinedmax-width:1024px) {
.bsdlabel1 .widget-content, .bsdlabel2 .widget-content {padding:20px 25px;}
.bsd_left {width:50%;float:left;margin:0;padding:0;border-right:none}
.bsd_right {width:46%;float:right;margin:0;padding:0;}
ul.bsd_thumbs .cat_thumb {width:100%;height:auto;}
ul.bsd_thumbs .cat_thumb img {width:100%;height:auto;}
ul.bsd_thumbs li {margin:0;padding:0;}
span.bsd_title2 {font-size:20px;line-height:1.2em;}
span.bsd_summary {font-size:14px;}}
@media only screen and undefinedmax-width:768px){
.bsdlabel1 .widget-content,.bsdlabel2 .widget-content{padding:10px 20px}
.bsd_right{width:100%;float:left;margin:0;padding:0}
ul.bsd_thumbs2 li{border-bottom:0}
span.bsd_summary,.bsd_left{display:none}
span.bsd_title{margin:0 0 5px}
ul.bsd_thumbs li{margin:0 0 10px;padding:0 0 10px;border-bottom:0}
span.bsd_title2{font-size:18px;line-height:1.2em}}
@media only screen and undefinedmax-width:480px){
#bsdlabel1-wrapper,#bsdlabel2-wrapper{display:none}}
@media only screen and undefinedmax-width:320px){
.bsdlabel1 .widget-content,.bsdlabel2 .widget-content{padding:10px 20px}
.bsdlabel1 h2,.bsdlabel2 h2{padding:10px 20px 1px 20px}
.bsd_right{width:100%;float:left;margin:0;padding:0}
ul.bsd_thumbs li{margin:0 0 10px;padding:0 0 10px;}
span.bsd_title2{font-size:18px;line-height:1.2em}}
@media screen and undefinedmax-width:260px) {
.bsdlabel1 .widget-content,.bsdlabel2 .widget-content{padding:10px}
.bsdlabel1 h2,.bsdlabel2 h2{padding:10px 10px 1px 10px}
.bsd_right{width:100%;float:left;margin:0;padding:0}
ul.bsd_thumbs li{margin:0 0 10px;padding:0 0 10px;}
span.bsd_title2{font-size:18px;line-height:1.2em}}
</style>
</b:if>
</b:if>

Step 5. Now Search for </body> tag and copy the below Javascript and paste it just above/before </body> tag.

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
//<![CDATA[
function labelthumbsundefinedt){forundefinedvar e=0;e<numposts;e++){var n,r=t.feed.entry[e],m=r.title.$t;ifundefinede==t.feed.entry.length)break;forundefinedvar i=0;i<r.link.length;i++){ifundefined"replies"==r.link[i].rel&&"text/html"==r.link[i].type)var l=r.link[i].title,o=r.link[i].href;ifundefined"alternate"==r.link[i].rel){n=r.link[i].href;break}}var u;try{u=r.media$thumbnail.url,u=u.replaceundefined"/s72-c/","/w"+thumb_width+"-h"+thumb_height+"-c/")}catchundefinedh){s=r.content.$t,a=s.indexOfundefined"<img"),b=s.indexOfundefined'src="',a),c=s.indexOfundefined'"',b+5),d=s.substrundefinedb+5,c-b-5),u=-1!=a&&-1!=b&&-1!=c&&""!=d?d:no_thumb}var p=r.published.$t,w=p.substringundefined0,4),_=p.substringundefined5,7),f=p.substringundefined8,10),g=new Array;g[1]="January",g[2]="February",g[3]="March",g[4]="April",g[5]="May",g[6]="June",g[7]="July",g[8]="August",g[9]="September",g[10]="October",g[11]="November",g[12]="December",document.writeundefined'<span class="bsd_left">'),document.writeundefined'<ul class="bsd_thumbs">'),document.writeundefined"<li>"),1==showpostthumbnails&&document.writeundefined'<a href="'+n+'"><div class="cat_thumb"><span class="rollover"></span><img width="'+thumb_width+'" height="'+thumb_height+'" alt="'+m+'" src="'+u+'"/></div></a>'),document.writeundefined'<span class="bsd_title"><a href="'+n+'" target ="_top">'+m+"</a></span>");var v="";ifundefineddocument.writeundefined'<span class="bsd_meta">'),1==showpostdate&&undefinedv=v+'<span class="bsd_meta_date">'+g[parseIntundefined_)]+" "+f+", "+w+"</span>"),1==showcommentnum&&undefined"1 Comments"==l&&undefinedl="1 Comments"),"0 Comments"==l&&undefinedl="0 Comments"),showcomment='<span class="bsd_meta_comment"><a href="'+o+'">'+l+"</a></span>",v+=showcomment),1==displaymore&&undefinedv=v+'<span class="bsd_meta_more"><a href="'+n+'" class="url" target ="_top">Read More...</a></span>'),document.writeundefinedv),document.writeundefined"</span>"),document.writeundefined'<span class="bsd_summary">'),"content"in r)var y=r.content.$t;else ifundefined"summary"in r)var y=r.summary.$t;else var y="";var k=/<\S[^>]*>/g;ifundefinedy=y.replaceundefinedk,""),1==showpostsummary)ifundefinedy.length<numchars)document.writeundefined""),document.writeundefinedy),document.writeundefined"");else{document.writeundefined""),y=y.substringundefined0,numchars);var $=y.lastIndexOfundefined" ");y=y.substringundefined0,$),document.writeundefinedy+"..."),document.writeundefined"")}document.writeundefined"</span>"),document.writeundefined"</li>"),document.writeundefined"</ul>"),document.writeundefined"</span>")}document.writeundefined'<span class="bsd_right">'),document.writeundefined'<ul class="bsd_thumbs2">');forundefinedvar e=1;e<numposts2;e++){var n,r=t.feed.entry[e],m=r.title.$t;ifundefinede==t.feed.entry.length)break;forundefinedvar i=1;i<r.link.length;i++){ifundefined"replies"==r.link[i].rel&&"text/html"==r.link[i].type)var l=r.link[i].title,o=r.link[i].href;ifundefined"alternate"==r.link[i].rel){n=r.link[i].href;break}}var x;try{x=r.media$thumbnail.url.replaceundefined"/s72-c/","/w"+thumb_width2+"-h"+thumb_height2+"-c/")}catchundefinedh){s=r.content.$t,a=s.indexOfundefined"<img"),b=s.indexOfundefined'src="',a),c=s.indexOfundefined'"',b+5),d=s.substrundefinedb+5,c-b-5),x=-1!=a&&-1!=b&&-1!=c&&""!=d?d:no_thumb2}var p=r.published.$t,w=p.substringundefined0,4),_=p.substringundefined5,7),f=p.substringundefined8,10);1==showpostthumbnails2&&document.writeundefined'<a href="'+n+'"><div class="cat_thumb2"><img width="'+thumb_width2+'" height="'+thumb_height2+'" alt="'+m+'" src="'+x+'"/></div></a>'),document.writeundefined"<li>"),document.writeundefined'<span class="bsd_title bsd_title2"><a href="'+n+'" target ="_top">'+m+"</a></span>");var v="";document.writeundefined'<span class="bsd_meta bsd_meta2">'),1==showpostdate2&&undefinedv=v+'<span class="bsd_meta_date">'+g[parseIntundefined_)]+" "+f+", "+w+"</span>"),1==showcommentnum2&&undefined"1 Comment"==l&&undefinedl="1 Comments"),"0 Comment"==l&&undefinedl="0 Comments"),showcomment='<span class="bsd_meta_comment bsd_meta_comment2"><a href="'+o+'">'+l+"</a></span>",v+=showcomment),1==displaymore2&&undefinedv=v+'<span class="bsd_meta_more bsd_meta_more2"><a href="'+n+'" class="url" target ="_top">Read More...</a></span>'),document.writeundefinedv),document.writeundefined"</span>"),document.writeundefined"</li>")}document.writeundefined"</ul>"),document.writeundefined"</span>")}
//]]>
</script>
<script type='text/javascript'>
var numposts=1,numposts2=6,showpostthumbnails=!0,showpostthumbnails2=!1,displaymore=!1,displaymore2=!1,showcommentnum=!0,showcommentnum2=!1,showpostdate=!0,showpostdate2=!0,showpostsummary=!0,numchars=150,thumb_width=280,thumb_height=200,thumb_width2=62,thumb_height2=62,no_thumb=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoh7X78TFVqrW66duBD4ZIRHRQ3106RE0KQuMv_md1re3UzrR8-nJwum2o-a-mOmgNUGfGu6W1xQA8aV0579HBpy8oL1_BBGE3wX1Q7BVeFR1oY4L73Egq-KS4qQ2lpM1b7jN16T2P1Bo/s1600/bsd_thumbs.png&quot;,no_thumb2=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYZ3tU5KuXAZI-L__l5BU9DVylOe2_2uFX3Hw7xb59h4AUHWU-Z8FYNSDZjlYKFZQHThN6JMhXnbfKwMSGYkWlUyPfK1fx_y6ftRiMp4XMdXXajoV3C7bV4GOhzRDLMuXIED6ukE5srxI/s1600/bsdthumbs_small.png&quot;;
</script>
</b:if>
</b:if>

Step 6. Now add the code snippet to add new widget in layout , just copy the below code and paste it just above Blog1 Widget.To find Blog1 widget just click on Jump to widget button near save template tab and select drop down you will find id of Blog1 widget.

<b:section class='main' id='main' maxwidgets='3' showaddelement='yes'><b:widget id='labelpost' locked='true' title='Recent Posts From Label' type='Blog'>

You can also add the HTML  markup like this 

<b:if cond='data:blog.url == data:blog.homepageUrl'>
      <div id='bsdlabel1-wrapper'>
        <b:section class='bsdlabel1' id='bsdlabel1' maxwidgets='1' showaddelement='yes'>
          <b:widget id='HTML80' locked='false' title='Widgets' type='HTML'>
            <b:includable id='main'>
<h2><span class='index'>&lt;a href=&#39;/search/label/<data:content/>?&amp;max-results=8&#39;&gt;View All&lt;/a&gt;</span><data:content/></h2>
<div class='widget-content'>
<script>
document.writeundefined&quot;&lt;script src=\&quot;/feeds/posts/default/-/<data:content/>?orderby=published&amp;alt=json-in-script&amp;callback=labelthumbs\&quot;&gt;&lt;\/script&gt;&quot;);
</script>
</div>
</b:includable>
          </b:widget>
        </b:section>
      </div>
      <div id='bsdlabel2-wrapper'>
        <b:section class='bsdlabel2' id='bsdlabel2' maxwidgets='1' showaddelement='yes'>
          <b:widget id='HTML81' locked='false' title='Blogging' type='HTML'>
            <b:includable id='main'>
<h2><span class='index'>&lt;a href=&#39;/search/label/<data:content/>?&amp;max-results=8&#39;&gt;View All&lt;/a&gt;</span><data:content/></h2>
<div class='widget-content'>
<script>
document.writeundefined&quot;&lt;script src=\&quot;/feeds/posts/default/-/<data:content/>?orderby=published&amp;alt=json-in-script&amp;callback=labelthumbs\&quot;&gt;&lt;\/script&gt;&quot;);
</script>
</div>
</b:includable>
          </b:widget>
        </b:section>
      </div>
</b:if>

Step 7. Now Save Your Template. Step

8. Now Go to your layout and search for the widget label which you have already added now just click on edit button and change your label name and hit save button. Look below for example: