Cara Membuat Recent Posts by Label - Posting Terbaru

Cara Membuat Recent Posts by Label - Posting Terbaru

Kode CSS & JS

Cari Kode </head>  Lalu letakan di atasnya

<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 */.recentpostbylabel ul {list-style:none;margin:0;padding:0}.recentpostbylabel li {margin:0;padding:0;}.recentpostbylabel .widget {margin:0;padding:0}.recentpostbylabel .widget-content {border-bottom:4px double #e9e9e9;padding:20px 0;margin:0;word-wrap:break-word;overflow:hidden}.recentpostbylabel h2 {position:relative;margin:0;padding:15px 15px 15px 0;font-size:16px;font-weight:700;text-transform:uppercase;color:#333;border-bottom:1px solid #e9e9e9;}.recentpostbylabel h2:before {content:&#39;\f108&#39;;right:10px;bottom:0;font-family:FontAwesome;font-style:normal;font-weight:normal;margin:0 10px 0 0;color:#ff675c;} {content:&#39;\f0c3&#39;;}.recentpostbylabel .index {font-size:10px;float:right;font-weight:400;}.recentpostbylabel .index a {display:flex;color:#2560aa;padding:3px 8px;font-weight:700;font-size:16px}.recentpostbylabel .index a:hover{background:#039be5;color:#fff;border-color:transparent}.recentpostbylabel .index a:after{content:&quot;\f105&quot;;font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-left:5px}.recentpostlabelcb_left{width:280px;width:45.7%;float:left;margin:0;padding:0 20px 0 0;}.recentpostlabelcb_right{width:250px;width:47.5%;float:right;margin:0;padding:0}ul.recentpostlabelcb_thumbs{margin:0;padding:0}ul.recentpostlabelcb_thumbs li,ul.recentpostlabelcb_thumbs2{margin:0;padding:0}ul.recentpostlabelcb_thumbs .cat_thumb{position:relative;margin:0 0 15px;padding:0;width:280px;height:150px}ul.recentpostlabelcb_thumbs .cat_thumb img{height:auto;width:100%;transition:all 0.2s}ul.recentpostlabelcb_thumbs .cat_thumb img:hover{opacity:.9;}ul.recentpostlabelcb_thumbs2 li{margin:0 0 10px;padding:0 0 10px;border-bottom:1px solid #e9e9e9}ul.recentpostlabelcb_thumbs2 li:last-child{border-bottom:none;margin:0;padding:0}ul.recentpostlabelcb_thumbs2 .cat_thumb2{float:left;margin:0 10px 0 0;width:62px;height:72px;overflow:hidden}ul.recentpostlabelcb_thumbs2 .cat_thumb2 img{height:auto;transition:all .2s}ul.recentpostlabelcb_thumbs2 .cat_thumb2 img:hover{opacity:.9;}span.recentpostlabelcb_title{font-family:&#39;Oswald&#39;,sans-serif;font-size:20px;font-weight:500;display:block;margin:0 0 10px;line-height:normal;text-transform:none}span.recentpostlabelcb_title2{font-size:15px;line-height:1.4em;margin:0 0 3px}span.recentpostlabelcb_title a{color:#333}span.recentpostlabelcb_title a:hover{color:#ff675c;text-decoration:none}span.recentpostlabelcb_summary{display:none;line-height:1.6em;font-size:13px;text-overflow:ellipsis;margin:10px 0 0 0}span.recentpostlabelcb_meta{display:block;font-family:&#39;Oswald&#39;,sans-serif;font-size:11px;font-weight:400;color:#aaa;text-transform:uppercase}span.recentpostlabelcb_meta a{color:#aaa;display:inline-block}span.recentpostlabelcb_meta_date,span.recentpostlabelcb_meta_comment,span.recentpostlabelcb_meta_more{display:none;margin-right:10px}span.recentpostlabelcb_meta_comment a:before{content:&quot;\f0e6&quot;;font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-right:5px}span.recentpostlabelcb_meta_comment a:hover{color:#ff675c!important}span.recentpostlabelcb_meta_date:before{content:&quot;\f133&quot;;font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-right:5px}ul.recentpostlabelcb_thumbs2 li a:hover,ul.recentpostlabelcb_thumbs li a:hover{color:#ff675c;text-decoration:none}@media screen and (max-width:1024px) {.recentpostbylabel .widget-content {padding:20px 25px;}.recentpostlabelcb_left {width:50%;float:left;margin:0;padding:0;border-right:none}.recentpostlabelcb_right {width:46%;float:right;margin:0;padding:0;}ul.recentpostlabelcb_thumbs .cat_thumb {width:100%;height:auto;}ul.recentpostlabelcb_thumbs .cat_thumb img {width:100%;height:auto;}ul.recentpostlabelcb_thumbs li {margin:0;padding:0;}span.recentpostlabelcb_title2 {font-size:20px;line-height:1.2em;}span.recentpostlabelcb_summary {font-size:14px;}}@media only screen and (max-width:768px){.recentpostbylabel .widget-content {padding:10px 20px}.recentpostlabelcb_right{width:100%;float:left;margin:0;padding:0}ul.recentpostlabelcb_thumbs2 li{border-bottom:0}span.recentpostlabelcb_summary,.recentpostlabelcb_left{display:none}span.recentpostlabelcb_title{margin:0 0 5px}ul.recentpostlabelcb_thumbs li{margin:0 0 10px;padding:0 0 10px;border-bottom:0}span.recentpostlabelcb_title2{font-size:18px;line-height:1.2em}}@media only screen and (max-width:480px){#recentpostbylabel-wrapper{display:none}}@media only screen and (max-width:320px){.recentpostbylabel .widget-content {padding:10px 20px}.recentpostbylabel h2 {padding:10px 20px 1px 20px}.recentpostlabelcb_right{width:100%;float:left;margin:0;padding:0}ul.recentpostlabelcb_thumbs li{margin:0 0 10px;padding:0 0 10px;}span.recentpostlabelcb_title2{font-size:18px;line-height:1.2em}}@media screen and (max-width:260px) {.recentpostbylabel .widget-content {padding:10px}.recentpostbylabel h2 {padding:10px 10px 1px 10px}.recentpostlabelcb_right{width:100%;float:left;margin:0;padding:0}ul.recentpostlabelcb_thumbs li{margin:0 0 10px;padding:0 0 10px;}span.recentpostlabelcb_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[function labelthumbs(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="recentpostlabelcb_left">'),document.write('<ul class="recentpostlabelcb_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="recentpostlabelcb_title"><a href="'+n+'" target ="_top">'+m+"</a></span>");var v="";if(document.write('<span class="recentpostlabelcb_meta">'),1==showpostdate&&(v=v+'<span class="recentpostlabelcb_meta_date">'+g[parseInt(_)]+" "+f+", "+w+"</span>"),1==showcommentnum&&("1 Comments"==l&&(l="1 Comments"),"0 Comments"==l&&(l="0 Comments"),showcomment='<span class="recentpostlabelcb_meta_comment"><a href="'+o+'">'+l+"</a></span>",v+=showcomment),1==displaymore&&(v=v+'<span class="recentpostlabelcb_meta_more"><a href="'+n+'" class="url" target ="_top">Read More...</a></span>'),document.write(v),document.write("</span>"),document.write('<span class="recentpostlabelcb_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="recentpostlabelcb_right">'),document.write('<ul class="recentpostlabelcb_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="recentpostlabelcb_title recentpostlabelcb_title2"><a href="'+n+'" target ="_top">'+m+"</a></span>");var v="";document.write('<span class="recentpostlabelcb_meta recentpostlabelcb_meta2">'),1==showpostdate2&&(v=v+'<span class="recentpostlabelcb_meta_date">'+g[parseInt(_)]+" "+f+", "+w+"</span>"),1==showcommentnum2&&("1 Comment"==l&&(l="1 Comments"),"0 Comment"==l&&(l="0 Comments"),showcomment='<span class="recentpostlabelcb_meta_comment recentpostlabelcb_meta_comment2"><a href="'+o+'">'+l+"</a></span>",v+=showcomment),1==displaymore2&&(v=v+'<span class="recentpostlabelcb_meta_more recentpostlabelcb_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=150,thumb_width2=62,thumb_height2=62,no_thumb=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiW_ANJT5X1TutQWRuRAuDLd71bfUvfh7cpH8FhyKsl4DvTufPpCV5BOheCNkksr5EQEfAwuUIKWXLCHCqIdFJqNBXfRPFxkne2klBxUgkjPUQUIOe12nzz4pfa7IEHlTDWA3P21lN7B8E/w1366-h768-rw-no/&quot;,no_thumb2=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiExn82eMAQMGFsEJYbYDqrOehLlzX2xXbD62i0szOxTDdLjoTTXJuk9SDA27dWHzuncx5qkKxy73L0aidtLb_-PIAIMROfpjcyB8U44cwyXYFW58JudHAzc_T2sjSiDFd_nUdUmJDnhyY/w1366-h768-rw-no/&quot;;</script></b:if></b:if>

Kode HTML/XML:

Simpan di bawah    <div class='main-wrapper'> atau di atas <b:section class='main' id='main' showaddelement='no'>

<b:if cond='data:blog.url == data:blog.homepageUrl'><div id='recentpostbylabel-wrapper'>        <b:section class='recentpostbylabel' id='recentpostbylabel' maxwidgets='1' showaddelement='yes'>          <b:widget id='HTML80' locked='false' title='Featured Posts' type='HTML' version='1' visible='true'>            <b:includable id='main'><h2><span class='index'>&lt;a href=&#39;/search/label/<data:content/>?&amp;max-results=8&#39;&gt;Index&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>

Save!

Saatnya Pasang Recent Posts by Label - Posting Terbaru

1. Layout > Edit widget recentpostbylabel
2. Tulis nama Label yang akan ditampilkan
3. Save!

Cat: Refresh (Tekan F5) jika widget baru tsb blm muncul.

Demikian Cara Membuat Recent Posts by Label - Posting Terbaru