Hello Folks, Today inwards this article nosotros are going to explicate How to add together responsive recent posts label widget inwards blogger template.You mightiness accept seen on as well as then many websites or weblog that on dwelling page of website at that topographic point they are displaying contents amongst the label widget,However straight off this variety of gadget comes amongst premium blogger template as well as inwards other weblog they exercise elementary json flim-flam to display the recent posts amongst labels as well as those widgets are non responsive.We accept tried best as well as presented beautiful responsive recent post service plugin for blogger templates.
This widget volition display 5 recent posts from the labels which are the nigh recent as well as residuum amongst the push clit persuasion all as well as inwards this 5 posts ane amongst display amongst Big picture as well as residuum others amongst championship of the post/article.We accept used CSS for styling ,JavaScript for calling labels from feed as well as added HTML widget.So when you lot desire to display the articles from dissimilar labels you lot necessitate to larn to layout as well as merely alter the label squall from the widget as well as hitting salve push clit you lot volition encounter novel feed is alive as well as nosotros accept added font awesome icon for the widget title,you tin alter the icons if you lot desire too.So inwards club to install responsive recent posts widget inwards blogger website follow the steps mentioned below.
How to add together Responsive Recent Posts With labels Widget In Blogger
Installation Steps:
Step 1. Log inwards to your Blogger trace of piece of job organisation human relationship as well as 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 as well as glue it merely before/above </head>.
<b:if cond='data:blog.pageType != "item"'> <b:if cond='data:blog.pageType != "static_page"'> <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 enterprise #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 enterprise #e9e9e9;border-bottom:0} .bsdlabel2 h2,.bsdlabel3 h2{margin:20px 0 0 0;} .bsdlabel1 h2:before,.bsdlabel2 h2:before,.bsdlabel3 h2:before{content:'\f1ea';right:10px;bottom:0;font-family:FontAwesome;font-style:normal;font-weight:normal;margin:0 10px 0 0;color:#ff675c;} .bsdlabel2 h2:before{content:'\f1a8';}.bsdlabel3 h2:before{content:'\f143';} .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 enterprise #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:"\f105";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-left:5px} .bsdlabel2 .index a:after{content:"\f105";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 enterprise #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 enterprise #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:'Roboto Condensed',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:'Roboto Condensed',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:"\f0e6";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:"\f133";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 enshroud as well as 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 alone enshroud as well as 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 alone enshroud as well as undefinedmax-width:480px){ #bsdlabel1-wrapper,#bsdlabel2-wrapper{display:none}} @media alone enshroud as well as 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 enshroud as well as 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 as well as re-create the below Javascript as well as glue it merely above/before </body> tag.
<b:if cond='data:blog.pageType != "item"'> <b:if cond='data:blog.pageType != "static_page"'> <script type='text/javascript'> //<![CDATA[ operate 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="How To Add Responsive Recent Posts Label Widget In Blogger template How To Add Responsive Recent Post Label Widget In Blogger" 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="How To Add Responsive Recent Posts Label Widget In Blogger template How To Add Responsive Recent Post Label Widget In Blogger" 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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKj1Fvp0ZbcrkCXTs2_ng1ef2S8dRNolgYWs3BfwyhYMDGDKTNFXqdhizu1JH07MUMPyEbASnvmqtRrJkFDPzdih3jaMZeEvkwyYFCaow0Na73nTGDdrv14j75-oh1XAN2qTm45OiN4Zk/s1600/bsd_thumbs.png",no_thumb2="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHVbbsR7Gggq-_kYNaMQZG3ZpvruhFG_QOupvtMGYaYAz-KdH63AKTxl8UvwZgtKvkVncpnUBIGvvzrB1n6pY8Hvr2wrYGvnymKT_gnOa1bndJEemoIrYEDscpdhCVlmSaap6hVqhosAM/s1600/bsdthumbs_small.png"; </script> </b:if> </b:if>
Step 6. Now add together the code snippet to add together novel widget inwards layout , merely re-create the below code as well as glue it merely to a higher identify Blog1 Widget.To detect Blog1 widget merely click on Jump to widget push clit nigh salve template tab as well as choose drib downwards you lot volition detect 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 tin also add together the HTML markup similar this
Step 7. Now Save Your Template. Step
8. Now Go to your layout as well as search for the widget label which you lot accept already added straight off merely click on edit push clit as well as alter your label squall as well as hitting salve button. Look below for example:
