How to Install Premium Recent Post Widget by Label | Blogger tIPS 2016

How to Install Premium Recent Post Widget by Label | Blogger tIPS 2016

How to Install Widget Recent Post by Label blog.

How to Install Premium Recent Post Widget by Label

I share this tutorial to meet the request of bloggers on the blog tips4tricx. The function of this widget is not much different from the widget recent post as the tutorial How to Install Widget Recent Post with date and comments that displays a list of the latest posts on the blog, but in this widget we can determine the article to be displayed based on the specified Label.

For those who want to install the widget recent post on his blog by this label, please follow the following tutorial:

How to Install Widget Recent Post by Label blog

1. Go to blogger> Open template editor> Save the code below before the 

</ head>

<b: if cond = 'data: blog.pageType! = & Quot; item & quot;'>
<b: if cond = 'data: blog.pageType! = & Quot; static_page & quot;'>
<Style type = 'text / css'>
/ * Recent Post by Label * /
.newtips4tricxlabel1 ul, .newtips4tricxlabel2 ul {list-style: none; margin: 0; padding: 0}
.newtips4tricxlabel1 li, .newtips4tricxlabel2 li {margin: 0; padding: 0;}
.newtips4tricxlabel1 .widget, .newtips4tricxlabel2 .widget {margin: 0; padding: 0}
.newtips4tricxlabel1 .widget-content, .newtips4tricxlabel2 .widget-content {border: 1px solid # E9E9E9; padding: 20px; margin: 0; word-wrap: break-word; overflow: hidden}
.newtips4tricxlabel1 h2, h2 .newtips4tricxlabel2, .newtips4tricxlabel3 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}
.newtips4tricxlabel2 h2, .newtips4tricxlabel3 h2 {margin: 20px 0 0 0;}
.newtips4tricxlabel1 h2: before, .newtips4tricxlabel2 h2: before, .newtips4tricxlabel3 h2:before{content:'\f108';right:10px;bottom:0;font-family:FontAwesome;font-style:normal;font-weight:normal;margin:0 0 0 10px; color: # ff675c;}
.newtips4tricxlabel2 h2: before {content: '\ f0c3';}. newtips4tricxlabel3 h2: before {content: '\ f143';}
.newtips4tricxlabel1 .index, .newtips4tricxlabel2 .index {font-size: 10px; float: right; font-weight: 400;}
.newtips4tricxlabel1 .index a, .newtips4tricxlabel2 .index a {display: flex; color: # 039be5; padding: 3px 8px; border-radius: 2px; font-weight: 400; border: 1px solid # 29b6f6}
.newtips4tricxlabel2 .index a {color: # ef6c00; border-color: # ffa726}
.newtips4tricxlabel1 .index a: hover {background: # 039be5; color: # fff; border-color: transparent}
.newtips4tricxlabel2 .index a: hover {background: # ef6c00; color: # fff; border-color: transparent}
.newtips4tricxlabel1 .index a:after{content:&quot;\f105&quot;;font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-left:5px}
.newtips4tricxlabel2 .index a:after{content:&quot;\f105&quot;;font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-left:6px}
.newtips4tricxlabel2 span.newtips4tricx_meta_comment a: hover {color: # 38761d! important}
.newtips4tricxlabel2 ul.newtips4tricx_thumbs li a: hover, .newtips4tricxlabel2 ul.newtips4tricx_thumbs2 li a: hover {color: # ff675c; text-decoration: none}
.newtips4tricx_left {width: 280px; width: 45.7%; float: left; margin: 0; padding: 0 20px 0 0; border-right: 1px solid # E9E9E9}
.newtips4tricx_right {width: 250px; width: 47.5%; float: right; margin: 0; padding: 0}
ul.newtips4tricx_thumbs {margin: 0; padding: 0}
ul.newtips4tricx_thumbs li, ul.newtips4tricx_thumbs2 {margin: 0; padding: 0}
ul.newtips4tricx_thumbs .cat_thumb {position: relative; margin: 0 0 15px; padding: 0; width: 280px; height: 200px}
ul.newtips4tricx_thumbs .cat_thumb img {height: auto; width: 100%; transition: all 0.2s}
ul.newtips4tricx_thumbs .cat_thumb img: hover {opacity: .9;}
ul.newtips4tricx_thumbs2 li {margin: 0 0 10px; padding: 0 0 10px; border-bottom: 1px solid # E9E9E9}
ul.newtips4tricx_thumbs2 li: last-child {border-bottom: none; margin: 0; padding: 0}
ul.newtips4tricx_thumbs2 .cat_thumb2 {float: left; margin: 10px 0 0 0; width: 62px; height: 72px; overflow: hidden}
ul.newtips4tricx_thumbs2 .cat_thumb2 img {height: auto; transition: all .2s}
ul.newtips4tricx_thumbs2 .cat_thumb2 img: hover {opacity: .9;}
span.newtips4tricx_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.newtips4tricx_title2 {font-size: 16px; line-height: 1.4em; margin: 0 0 3px}
span.newtips4tricx_title a {color: # 333}
span.newtips4tricx_title a: hover {color: # ff675c; text-decoration: none}
span.newtips4tricx_summary{display:block;line-height:1.6em;font-size:13px;text-overflow:ellipsis;margin:10px 0 0 0}
span.newtips4tricx_meta {display: block; font-family: 'Roboto Condensed', sans-serif; font-size: 11px; font-weight: 400; color: #aaa; text-transform: uppercase}
span.newtips4tricx_meta a {color: #aaa; display: inline-block}
span.newtips4tricx_meta_date,span.newtips4tricx_meta_comment,span.newtips4tricx_meta_more{display:inline-block;margin-right:10px}
span.newtips4tricx_meta_comment a:before{content:&quot;\f0e6&quot;;font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-right:5px}
span.newtips4tricx_meta_comment a: hover {color: # ff675c! important}
span.newtips4tricx_meta_date:before{content:&quot;\f133&quot;;font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-right:5px}
ul.newtips4tricx_thumbs2 li a: hover, ul.newtips4tricx_thumbs li a: hover {color: # ff675c; text-decoration: none}
@media screen and (max-width: 1024px) {
.newtips4tricxlabel1 .widget-content, .newtips4tricxlabel2 .widget-content {padding: 20px 25px;}
.newtips4tricx_left {width: 50%; float: left; margin: 0; padding: 0; border-right: none}
.newtips4tricx_right {width: 46%; float: right; margin: 0; padding: 0;}
ul.newtips4tricx_thumbs .cat_thumb {width: 100%; height: auto;}
ul.newtips4tricx_thumbs .cat_thumb img {width: 100%; height: auto;}
ul.newtips4tricx_thumbs li {margin: 0; padding: 0;}
span.newtips4tricx_title2 {font-size: 20px; line-height: 1.2em;}
span.newtips4tricx_summary {font-size: 14px;}}
@media only screen and (max-width: 768px) {
.newtips4tricxlabel1 .widget-content, .newtips4tricxlabel2 .widget-content {padding: 10px 20px}
.newtips4tricx_right {width: 100%; float: left; margin: 0; padding: 0}
ul.newtips4tricx_thumbs2 li {border-bottom: 0}
span.newtips4tricx_summary, .newtips4tricx_left {display: none}
span.newtips4tricx_title {margin: 0 0 5px}
ul.newtips4tricx_thumbs li {margin: 0 0 10px; padding: 0 0 10px; border-bottom: 0}
span.newtips4tricx_title2 {font-size: 18px; line-height: 1.2em}}
@media only screen and (max-width: 480px) {
# Newtips4tricxlabel1-wrapper, # newtips4tricxlabel2-wrapper {display: none}}
@media only screen and (max-width: 320px) {
.newtips4tricxlabel1 .widget-content, .newtips4tricxlabel2 .widget-content {padding: 10px 20px}
.newtips4tricxlabel1 h2, .newtips4tricxlabel2 h2 {padding: 10px 20px 20px 1px}
.newtips4tricx_right {width: 100%; float: left; margin: 0; padding: 0}
ul.newtips4tricx_thumbs li {margin: 0 0 10px; padding: 0 0 10px;}
span.newtips4tricx_title2 {font-size: 18px; line-height: 1.2em}}
@media screen and (max-width: 260px) {
.newtips4tricxlabel1 .widget-content, .newtips4tricxlabel2 .widget-content {padding: 10px}
.newtips4tricxlabel1 h2, .newtips4tricxlabel2 h2 {padding: 10px 10px 10px 1px}
.newtips4tricx_right {width: 100%; float: left; margin: 0; padding: 0}
ul.newtips4tricx_thumbs li {margin: 0 0 10px; padding: 0 0 10px;}
span.newtips4tricx_title2 {font-size: 18px; line-height: 1.2em}}
</ Style>
</ b: if>
</ b: if>

<b: if cond = 'data: blog.pageType! = & Quot; item & quot;'>
<b: if cond = 'data: blog.pageType! = & Quot; static_page & quot;'>
<Script type = 'text / javascript'>
// <! [CdATA [
labelthumbs function (t) {for (var e = 0; e <numposts; e ++) {var n, r = t.feed.entry [e], m = r.title. $ t; if (e == t. feed.entry.length) break; for (var i = 0; i <r.link.length; i ++) {if ( "replies" == r.link [i] && .rel "text / html" == r. link [i] .type) var l = r.link [i] TITLE, o = r.link [i] .href; if ( "alternate" == r.link [i] .rel) {n = r .link [i] .href; break}} var u;try{u=r.media$thumbnail.url,u=u.replace("/s72-c/","/w"+thumb_width+"-h"+thumb_height+"-c/")}catch(h){s=r.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),u=-1!=a&&-1!=b&&-1!=c&&""!=d?d:no_thumb}var p = r.published. $ t, w = p.substring (0.4), _ = p.substring (5.7), f = p.substring (8.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.write('<span class = "newtips4tricx_left"> ') document.write (' <ul class = "newtips4tricx_thumbs"> ') document.write ( "<li>") == 1 && showpostthumbnails document.write (' <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.write ( '<span class = "newtips4tricx_title"> <a href = "' + n + '" target = "_ top" > '+ m + "</a> </ span>"); var v = ""; if (document.write (' <span class = "newtips4tricx_meta"> ') == 1 && showpostdate (v = v +' < span class = "newtips4tricx_meta_date"> '+ g [parseInt (_)] + "" + f + "," + w + "</ span>"), 1 == showcommentnum && ( "1 Comments" == l && (l = " 1 Comments ")," 0 Comments "== && l (l =" 0 Comments "), showcomment = '<span class =" newtips4tricx_meta_comment "> <a href="'+o+'">' + l +" </ a > </ span> ', v + = showcomment), displaymore == 1 && (v = v +' <span class = "newtips4tricx_meta_more"> <a href="'+n+'" class="url" targets ="_top"> Read More ... </a> </ span> ') document.write (v) document.write ( "</ span>") document.write (' <span class = "newtips4tricx_summary"> ') , "content" in r) var y = r.content. $ t; else if ( "summary" in r) var y = r.summary. $ t; else var y = ""; var k=/<\S[^>]*>/g;if(y=y.replace(k,""),1==showpostsummary)if(y.length<numchars)document.write(""),document.write(y),document.write("");else{document.write(""),y=y.substring(0,numchars);var $ = Y.lastIndexOf ( " ");y=y.substring(0,$),document.write(y+"..."),document.write("")}document.write("</span>"),document.write("</li>"),document.write("</ul>"),document.write("</span>")}document.write('<span class = "newtips4tricx_right"> ') document.write (' <ul class = "newtips4tricx_thumbs2"> '); for (var e = 1; e <numposts2; e ++) {var n, r = t.feed.entry [ e], m = r.title. $ t; if (e == t.feed.entry.length) break; for (var i = 1; i <r.link.length; i ++) {if ( "replies" == r.link [i] && .rel "text / html" == r.link [i] .type) var l = r.link [i] TITLE, o = r.link [i] .href; if ( "alternate" == r.link [i] .rel) {n = r.link [i] .href; break}} var x;try{x=r.media$thumbnail.url.replace("/s72-c/","/w"+thumb_width2+"-h"+thumb_height2+"-c/")}catch(h){s=r.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),x=-1!=a&&-1!=b&&-1!=c&&""!=d?d:no_thumb2}var p=r.published.$t,w=p.substring(0,4),_=p.substring(5,7),f=p.substring(8,10);1==showpostthumbnails2&&document.write('<a href = " '+ n +'"> <div class = "cat_thumb2"> <img width = " '+ thumb_width2 +'" height = " '+ thumb_height2 +'" alt = " '+ m +" "src ="' + x + ' "/> </ div> </a> ') document.write (" <li> ") document.write (' <span class =" newtips4tricx_title newtips4tricx_title2 "> <a href =" '+ n +' 'targets = "_ top"> '+ m + "</a> </ span>"); var v =' '; document.write (' <span class = "newtips4tricx_meta newtips4tricx_meta2"> '), showpostdate2 == 1 && (y = v + '<span class = "newtips4tricx_meta_date">' + g [parseInt (_)] + "" + f + "," + w + "</ span>"), 1 == showcommentnum2 && ( "1 Comment" == l && ( l = "1 Comments"), "0 Comment" == && l (l = "0 Comments"), showcomment = '<span class = "newtips4tricx_meta_comment newtips4tricx_meta_comment2"> <a href="'+o+'">' + l + "</a> </ span> ', v + = showcomment), 1 == displaymore2 && (v = v +' <span class =" newtips4tricx_meta_more newtips4tricx_meta_more2 "> <a href =" '+ n +' "class =" url "target = "_ top"> Read More...</a></span>'),document.write(v),document.write("</span>"),document.write("</li>")}document.write("</ul>"),document.write("</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;http://3.bp.blogspot.com/-PHzN2A92GHE/Vmim2TTkAII/AAAAAAAAdZU/X42ioeFiybo/s1600/newtips4tricx_thumb.png&quot;,no_thumb2=&quot;http://2.bp.blogspot.com/-cW6waOyA8mY/Vmim2VkylII/AAAAAAAAdZY/_pANIKGbUXA/s1600/newtips4tricxthumb_small.png&quot;;
</ Script>
</ b: if>
</ b: if>

Code marked an arrangement of the widget, please specify according to taste.

2. Next add markup widget below before markup widget blog1 

<b: section class = 'main' id = 'main' maxwidgets = '3' showaddelement = 'yes'> <b: widget id =' blog1 'locked =' true 'title =' blog Posts' type = 'blog'>

<b: if cond = 'data: data == blog.url: blog.homepageUrl'>
<div id = 'newtips4tricxlabel1-wrapper'>
<b: section class = 'newtips4tricxlabel1' id = 'newtips4tricxlabel1' maxwidgets = '1' showaddelement = 'yes'>
<b: widget id = 'HTML80' locked = 'false' title = 'Template' type = 'HTML'>
<b: includable id = 'main'>
<H2> <span class = "index"> & lt; a href = '/ search / label / <data: content />? & Amp; max-results = 8' & gt; View All & lt; / a & gt; </ span> < data: content /> </ h2>
<div class = 'widget-content ">
<Script>
document.write (& 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 = 'newtips4tricxlabel2-wrapper'>
<b: section class = 'newtips4tricxlabel2' id = 'newtips4tricxlabel2' maxwidgets = '1' showaddelement = 'yes'>
<b: widget id = 'HTML81' locked = 'false' title = 'Tips blogger' type = 'HTML'>
<b: includable id = 'main'>
<H2> <span class = "index"> & lt; a href = '/ search / label / <data: content />? & Amp; max-results = 8' & gt; View All & lt; / a & gt; </ span> < data: content /> </ h2>
<div class = 'widget-content ">
<Script>
document.write (& 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>

3. Save the template, now go to Layout> Click the edit widget that has been added earlier> Fill in it with the name of your blog label

4. Save the widgets and see the results.