Home Desain Blog Cara Membuat Featured Post dari Posting Terbaru per Label di Blogger

Thursday, July 20, 2017

Cara Membuat Featured Post dari Posting Terbaru per Label di Blogger

Cara Membuat Featured Post dari Posting Terbaru per Label di Blogger (Particular Label Recent Posts Widget for Blogger).

Cara Membuat Featured Post dari Posting Terbaru per Label di Blogger
BANYAK yang tanya di kolom komentar, bagaimna caranya membuat Featured Post dari Posting Terbaru per Label di Blogger, seperti di halaman depan blog CB ini.

Sebenarnya sudah banyak blogger lain yang sudah share kodenya, namun kebanyakan memang dalam bahasa Inggris.

Berikut ini cara membuatnya. Penampakan Featured Post dari Posting Terbaru per Label seperti model ilustrasi gambar posting ini.

Sesuaikan lebarnya dengan lebar main-area atau main-wrapper template blog Anda. Cari aja kode berupa angka dan px.

Cara Membuat Featured Post dari Posting Terbaru per Label

Berikut ini Cara Membuat Featured Post dari Posting Terbaru per Label di halaman depan Blog Blogger Anda:

KLIK Tema/Template > Edit HTML

Kode CSS  Featured Post dari Posting Terbaru per Label 
Simpan di atas kode </head>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style>
#label1-wrapper {width: 670px;float: left;word-wrap: break-word;overflow: hidden;}
.label1 {color:#666;line-height: 1.5em;}
.label1 ul {list-style:none;margin:0 0 0;padding:0 0 0;}
.label1 li {margin:0;padding:0;line-height:1.5em;}
.label1 .widget {margin:0;padding:0;}
.label1 .widget-content {border-bottom:1px solid #ddd;padding:20px;margin:0;word-wrap:break-word;overflow:hidden;}
.label1 .index {font-size:12px;float:right;font-weight:700;letter-spacing:normal;}
.label1 .index a {color:#fff;background:#666;padding:3px 10px;border-radius:2px;-moz-border-radius:2px;-webkit-border-radius:2px;-khtml-border-radius:2px;}
.label1 .index a:hover {background:#333;text-decoration:none;}
.label1 .index a:after {content:"f105";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-left:5px;}
.label1 h2 {margin:0;padding:20px 20px 1px 20px;font-size:16px;font-weight:700;text-transform:uppercase;letter-spacing:normal;color:#666;}
#label2-wrapper {width: 670px;float: left;word-wrap: break-word;overflow: hidden;}
.label2 {color:#666;line-height:1.5em;}
.label2 ul {list-style:none;margin:0 0 0;padding:0 0 0;}
.label2 li {margin:0;padding:0;line-height:1.5em;}
.label2 .widget {margin:0;padding:0;}
.label2 .widget-content {border-bottom:1px solid #ddd;padding:20px;margin:0;word-wrap:break-word;overflow:hidden;}
.label2 .index {font-size:12px;float:right;font-weight:700;letter-spacing:normal;}
.label2 .index a {color:#fff;background:#666;padding:4px 10px;border-radius:2px;-moz-border-radius:2px;-webkit-border-radius:2px;-khtml-border-radius:2px;}
.label2 .index a:hover {background:#333;text-decoration:none;}
.label2 .index a:after {content:"f105";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-left:6px;}
.label2 h2 {margin:0;padding:20px 20px 1px 20px;font:Arial;font-size:16px;font-weight:700;text-transform:uppercase;letter-spacing:normal;color:#666;}
.label2 span.cat_meta_comment a:hover {color:c00!important;}
.label2 ul.cat_thumbs li a:hover, .label2 ul.cat_thumbs2 li a:hover {color:#c00;text-decoration:none;}
.cat_left {width:300px;float:left;margin:0;padding:0 20px 0 0;border-right:1px solid #ddd;}
.cat_right {width:290px;float:right;margin:0;padding:0;}
ul.cat_thumbs {margin:0;padding:0;}
ul.cat_thumbs li {margin:0;padding:0;}
ul.cat_thumbs .cat_thumb {position:relative;margin:0 0 15px;padding:0;width:300px;height:220px;}
ul.cat_thumbs .cat_thumb img {height:auto;width:100%;-webkit-transition: all 0.2s ease-in;-moz-transition: all 0.2s ease-in;-o-transition: all 0.2s ease-in;transition: all 0.2s ease-in;}
ul.cat_thumbs .cat_thumb img:hover {opacity: 0.7;filter: alpha(opacity=70);}
ul.cat_thumbs2 {margin:0;padding:0;}
ul.cat_thumbs2 li {margin:0 0 10px;padding:0 0 10px;border-bottom:1px dotted #ddd;min-height:70px;}
ul.cat_thumbs2 li:last-child {border-bottom:none;margin:0 0 0;padding:0 0 0;}
ul.cat_thumbs2 .cat_thumb2 {float:left;margin:0 15px 10px 0;width:100px;height:75px;}
ul.cat_thumbs2 .cat_thumb2 img {width:100px;height:75px;-webkit-transition: all 0.2s ease-in;-moz-transition: all 0.2s ease-in;-o-transition: all 0.2s ease-in;transition: all 0.2s ease-in;}
ul.cat_thumbs2 .cat_thumb2 img:hover {opacity: 0.7;filter: alpha(opacity=70);}
span.cat_title {font:Arial;font-size:22px;font-weight:700;display:block;margin:0 0 5px;line-height:1.2em;text-transform:none;}
span.cat_title2 {font-size:16px;line-height:1.4em;margin:0 0 3px;}
span.cat_title a {color:#333;}
span.cat_title a:hover {color:#c00;text-decoration:none;}
span.cat_summary {line-height:1.6em;display:block;margin:5px 0 0;color:#333;font-size:12px;font-weight:400;}
span.cat_meta {display:block;font:#ddd;font-size:11px;font-weight:400;color:#888;text-transform:uppercase;}
span.cat_meta a {color:#666!important;display:inline-block;}
span.cat_meta_date, span.cat_meta_comment, span.cat_meta_more {display:inline-block;margin-right:10px;}
span.cat_meta_comment a:before {content:"f0e6";font-family: FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-right:5px;}
span.cat_meta_comment a:hover {color:#ddd!important;}
span.cat_meta_date:before {content:"f073";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-right:5px;}
ul.cat_thumbs2 li a:hover, ul.cat_thumbs li a:hover {color:#c00;text-decoration:none;}
@media screen and (max-width:1024px) {
#label1-wrapper, #label2-wrapper {width:100%;margin:0;padding:0;border:none;background:none;}
.label1 .widget-content, .label2 .widget-content {padding:20px 25px;}
.label1 h2, .label2 h2 {padding:20px 25px 1px 25px;}
.cat_left {width:50%;float:left;margin:0;padding:0;border-right:none}
.cat_right {width:46%;float:right;margin:0;padding:0;}
ul.cat_thumbs .cat_thumb {width:100%;height:auto;}
ul.cat_thumbs .cat_thumb img {width:100%;height:auto;}
ul.cat_thumbs li {margin:0;padding:0;}
span.cat_title2 {font-size:20px;line-height:1.2em;}
span.cat_summary {font-size:14px;}
}
@media screen and (max-width:768px) {
#label1-wrapper, #label2-wrapper {width:100%;margin:0;padding:0;border:none;background:none;}
.label1 .widget-content, .label2 .widget-content {padding:10px 20px;}
.label1 h2, .label2 h2 {padding:10px 20px 1px 20px;}
.cat_left {width:50%;float:left;margin:0;padding:0;border-right:none}
.cat_right {width:46%;float:right;margin:0;padding:0;}
ul.cat_thumbs .cat_thumb {width:100%;height:auto;}
ul.cat_thumbs .cat_thumb img {width:100%;height:auto;}
ul.cat_thumbs li {margin:0;padding:0;}
span.cat_title2 {font-size:18px;line-height:1.2em;}
}
@media screen and (max-width:640px) {
#label1-wrapper, #label2-wrapper {width:100%;margin:0;padding:0;border:none;background:none;}
.label1 .widget-content, .label2 .widget-content {padding:10px 20px;}
.label1 h2, .label2 h2 {padding:10px 20px 1px 20px;}
.cat_left {width:100%;float:left;margin:0;padding:0;border-right:none}
.cat_right {width:100%;float:left;margin:0;padding:0;}
ul.cat_thumbs .cat_thumb {float:right;margin:0 0 0 15px;width:200px;height:auto;}
ul.cat_thumbs .cat_thumb img {height:auto;width:200px;}
ul.cat_thumbs li {margin:0 0 10px;padding:0 0 10px;border-bottom:1px solid #ccc;}
span.cat_title2 {font-size:18px;line-height:1.2em;}
}
@media screen and (max-width:480px) {
#label1-wrapper, #label2-wrapper {width:100%;margin:0;padding:0;border:none;background:none;}
.label1 .widget-content, .label2 .widget-content {padding:10px 20px;}
.label1 h2, .label2 h2 {padding:10px 20px 1px 20px;}
.cat_left {width:100%;float:left;margin:0;padding:0;border-right:none}
.cat_right {width:100%;float:left;margin:0;padding:0;}
ul.cat_thumbs .cat_thumb {margin:0 0 10px;width:100%;height:auto;}
ul.cat_thumbs .cat_thumb img {height:auto;width:100%;}
ul.cat_thumbs li {margin:0 0 10px;padding:0 0 10px;border-bottom:1px solid #ccc;}
span.cat_title2 {font-size:18px;line-height:1.2em;}
}
@media screen and (max-width:320px) {
 #label1-wrapper, #label2-wrapper {width:100%;margin:0;padding:0;border:none;background:none;}
.label1 .widget-content, .label2 .widget-content {padding:10px 20px;}
.label1 h2, .label2 h2 {padding:10px 20px 1px 20px;}
.cat_left {width:100%;float:left;margin:0;padding:0;border-right:none}
.cat_right {width:100%;float:left;margin:0;padding:0;}
ul.cat_thumbs .cat_thumb {margin:0 0 10px;width:100%;height:auto;}
ul.cat_thumbs .cat_thumb img {height:auto;width:100%;}
ul.cat_thumbs li {margin:0 0 10px;padding:0 0 10px;border-bottom:1px solid #ccc;}
span.cat_title2 {font-size:18px;line-height:1.2em;}
}
@media screen and (max-width:260px) {
#label1-wrapper, #label2-wrapper{width:100%;margin:0;padding:0;border:none;background:none;}
.label1 .widget-content, .label2 .widget-content {padding:10px;}
.label1 h2, .label2 h2 {padding:10px 10px 1px 10px;}
.cat_left {width:100%;float:left;margin:0;padding:0;border-right:none}
.cat_right {width:100%;float:left;margin:0;padding:0;}
ul.cat_thumbs .cat_thumb {margin:0 0 10px;width:100%;height:auto;}
ul.cat_thumbs .cat_thumb img {height:auto;width:100%;}
ul.cat_thumbs li {margin:0 0 10px;padding:0 0 10px;border-bottom:1px solid #ccc;}
span.cat_title2 {font-size:18px;line-height:1.2em;}
}
</style>
</b:if>
</b:if>

KODE HTML
Simpan di atas kode  <div id='main-wrapper'>  dan yang semisalnya.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
      <div id='label1-wrapper'>
        <b:section class='label1' id='label1' maxwidgets='1' showaddelement='yes'>
          <b:widget id='HTML11' locked='true' title='Blogging' 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=6&#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>
      <div id='label2-wrapper'>
        <b:section class='label2' id='label2' maxwidgets='1' showaddelement='yes'>
          <b:widget id='HTML12' locked='true' title='Tips' 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=6&#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>

KODE JAVASCRIPT
Simpan di atas kode </head>

<script type='text/javascript'>
//<![CDATA[
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\b'+e(c)+'\b','g'),k[c]);return p}('1D 1E(w){N(i v=0;v<1F;v++){i f=w.O.P[v];i g=f.Q.$t;i z;D(v==w.O.P.L){R}N(i t=0;t<f.F.L;t++){D(f.F[t].T=="18"&&f.F[t].19=="1a/1b"){i n=f.F[t].Q;i o=f.F[t].G}D(f.F[t].T=="1c"){z=f.F[t].G;R}}i j;1d{j=f.1e$1f.U;j=j.17("/1g-c/","/w"+1h+"-h"+1i+"-c/")}1j(r){s=f.V.$t;a=s.J("<W");b=s.J('X="',a);c=s.J('"',b+5);d=s.1k(b+5,c-b-5);D((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){j=d}M{j=1G}}i x=f.1l.$t;i m=x.I(0,4);i l=x.I(5,7);i u=x.I(8,10);i h=1H 1I();h[1]="1J";h[2]="1K";h[3]="1L";h[4]="1M";h[5]="1N";h[6]="1O";h[7]="1P";h[8]="1Q";h[9]="1R";h[10]="1S";h[11]="1T";h[12]="1U";k.B('<C E="1V">');k.B('<Y E="1W">');k.B("<Z>");D(1X==H){k.B('<a G="'+z+'"><13 E="1Y"><C E="1Z"></C><W 1m="'+1h+'" 1n="'+1i+'" 1o="'+g+'" X="'+j+'"/></13></a>')}k.B('<C E="1p"><a G="'+z+'" 14 ="15">'+g+"</a></C>");i A="";k.B('<C E="1q">');D(20==H){A=A+'<C E="1r">'+h[1s(l)]+" "+u+", "+m+"</C>"}D(21==H){D(n=="1 K"){n="1 K"}D(n=="0 K"){n="0 K"}16='<C E="1t"><a G="'+o+'">'+n+"</a></C>";A=A+16}D(22==H){A=A+'<C E="1u"><a G="'+z+'" E="U" 14 ="15">1v 1w...</a></C>'}k.B(A);k.B("</C>");k.B('<C E="23">');D("V"1x f){i y=f.V.$t}M{D("1y"1x f){i y=f.1y.$t}M{i y=""}}i p=/<\S[^>]*>/g;y=y.17(p,"");D(24==H){D(y.L<1z){k.B("");k.B(y);k.B("")}M{k.B("");y=y.I(0,1z);i e=y.25(" ");y=y.I(0,e);k.B(y+"...");k.B("")}}k.B("</C>");k.B("</Z>");k.B("</Y>");k.B("</C>")}k.B('<C E="26">');k.B('<Y E="27">');N(i v=1;v<28;v++){i f=w.O.P[v];i g=f.Q.$t;i z;D(v==w.O.P.L){R}N(i t=1;t<f.F.L;t++){D(f.F[t].T=="18"&&f.F[t].19=="1a/1b"){i n=f.F[t].Q;i o=f.F[t].G}D(f.F[t].T=="1c"){z=f.F[t].G;R}}i q;1d{q=f.1e$1f.U.17("/1g-c/","/w"+1A+"-h"+1B+"-c/")}1j(r){s=f.V.$t;a=s.J("<W");b=s.J('X="',a);c=s.J('"',b+5);d=s.1k(b+5,c-b-5);D((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){q=d}M{q=29}}i x=f.1l.$t;i m=x.I(0,4);i l=x.I(5,7);i u=x.I(8,10);D(2a==H){k.B('<a G="'+z+'"><13 E="2b"><W 1m="'+1A+'" 1n="'+1B+'" 1o="'+g+'" X="'+q+'"/></13></a>')}k.B("<Z>");k.B('<C E="1p 2c"><a G="'+z+'" 14 ="15">'+g+"</a></C>");i A="";k.B('<C E="1q 2d">');D(2e==H){A=A+'<C E="1r">'+h[1s(l)]+" "+u+", "+m+"</C>"}D(2f==H){D(n=="1 1C"){n="1 K"}D(n=="0 1C"){n="0 K"}16='<C E="1t 2g"><a G="'+o+'">'+n+"</a></C>";A=A+16}D(2h==H){A=A+'<C E="1u 2i"><a G="'+z+'" E="U" 14 ="15">1v 1w...</a></C>'}k.B(A);k.B("</C>");k.B("</Z>")}k.B("</Y>");k.B("</C>")};',62,143,'||||||||||||||||||var||document|||||||||||||||||write|span|if|class|link|href|true|substring|indexOf|Comments|length|else|for|feed|entry|title|break||rel|url|content|img|src|ul|li||||div|target|_top|showcomment|replace|replies|type|text|html|alternate|try|media|thumbnail|s72|thumb_width|thumb_height|catch|substr|published|width|height|alt|cat_title|cat_meta|cat_meta_date|parseInt|cat_meta_comment|cat_meta_more|Read|More|in|summary|numchars|thumb_width2|thumb_height2|Comment|function|labelthumbs|numposts|no_thumb|new|Array|January|February|March|April|May|June|July|August|September|October|November|December|cat_left|cat_thumbs|showpostthumbnails|cat_thumb|rollover|showpostdate|showcommentnum|displaymore|cat_summary|showpostsummary|lastIndexOf|cat_right|cat_thumbs2|numposts2|no_thumb2|showpostthumbnails2|cat_thumb2|cat_title2|cat_meta2|showpostdate2|showcommentnum2|cat_meta_comment2|displaymore2|cat_meta_more2'.split('|'),0,{}))
//]]>
</script>
<script type='text/javascript'>
var numposts = 1;
var numposts2 = 5;
var showpostthumbnails = true;
var showpostthumbnails2 = true;
var displaymore = false;
var displaymore2 = false;
var showcommentnum = false;
var showcommentnum2 = false;
var showpostdate = false;
var showpostdate2 = false;
var showpostsummary = true;
var numchars = 150;
var thumb_width = 300;
var thumb_height = 220;
var thumb_width2 = 100;
var thumb_height2 = 75;
var no_thumb = &#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivtuJnWW3sCDAkuFaZxsa_HnuArF06sU1tNPbIc-CXdzJQUO8Vlur6sp7Zjx7RHX_sfVgv3c4I-DNj8vIEy5q2gw6HkdM-IeFHE_LFg0MnVbq_weowHYstDcz2npI08V5ex26qNKRUvs0/s1600/cat_thumb.png&#39;;
var no_thumb2 = &#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgw8oPDvuHbScamXpN9opBBwLanom-5KpxRZOCVPjfKefOkV3LQtcBDaaEGAfJdpmYAqfg2k7yKOt6t96EzGYVgPRlwelnC32Jfx-uP67eb7sVKR1EA4EG83KxKwOt1_f5vYIdnIfJgFX0/s1600/thumb_small.png&#39;;
</script>

Save Template!
Klik Layout/Tata Letak

Akan ada widget baru. Jika widget baru tersebut belum muncul, reaload atau refresh halaman dashboard blogger Anda dengan menekan tombol F5 di keyboard komputer Anda.

Saatnya Menampilkan Posting:

1. Layout > Edit Label1 > ketik nama Label
2. Save!

Ulangi untuk  Featured Post dari Posting Terbaru per Label yang kedua:

1. Layout > Edit Label2 > ketik nama Label

2. Save!

Selesai.

Altenatif Featured Post dari Posting Terbaru per Label 

Anda juga bisa gunakan kode Recent Post by Label yang dibagikan sebelumnya dengan penampakan sebagai berikut. Desainnya sama dengan yang dipasang CB Blogger.

Featured Post dari Posting Terbaru per Label


Demikian Cara Membuat Featured Post dari Posting Terbaru per Label di Blogger. Mudah 'kan? Good Luck & Happy Blogging! (www.contohblog.com).*

Share this

Recommended

Disqus Comments