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).
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 ibarat model ilustrasi gambar posting ini.
Sesuaikan lebarnya dengan lebar main-area atau main-wrapper template blog Anda. Cari aja isyarat 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 isyarat </head>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<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 isyarat <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'><a href='/search/label/<data:content/>?&max-results=6'>Index</a></span><data:content/></h2>
<div class='widget-content'>
<script>
document.write("<script src="/feeds/posts/default/-/<data:content/>?orderby=published&alt=json-in-script&callback=labelthumbs"></script>");
</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'><a href='/search/label/<data:content/>?&max-results=6'>Index</a></span><data:content/></h2>
<div class='widget-content'>
<script>
document.write("<script src="/feeds/posts/default/-/<data:content/>?orderby=published&alt=json-in-script&callback=labelthumbs"></script>");
</script>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
</b:if>
KODE JAVASCRIPT
Simpan di atas isyarat </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 = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrRDE24BfavzOJ_Cmn3fqoK_QzMVXZsdJ1CthKNnRfST76q0S-F3RSicvt8WJcAPI1xIfq4F-JtOwl5D1k2GfzPBeZ8bLn3kRzVYMtMA84oQR59IuzPnvszRH8J5dX0MIwqhZH_4NYiHg/s1600/cat_thumb.png';
var no_thumb2 = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2YKXLBukes8qRjLs4FNJZbDURyckPl8LCp3netoPjRb3NRNmvdGo0oacVmKTK7Rr_DznAUmwGsxRWS2G_Vx9SqffyBd7ij2U3s4GQWPWdXyxxJwc8oALymEHAQcZxXi_Ktr4C4Y4wfc4/s1600/thumb_small.png';
</script>
Save Template!
Klik Layout/Tata Letak
Akan ada widget baru. Jika widget gres 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 mampu gunakan isyarat Recent Post by Label yang dibagikan sebelumnya dengan penampakan sebagai berikut. Desainnya sama dengan yang dipasang CB Blogger.
Demikian Cara Membuat Featured Post dari Posting Terbaru per Label di Blogger. Mudah 'kan? Good Luck & Happy Blogging!
Posting Komentar untuk "Cara Membuat Featured Post dari Posting Terbaru per Label di Blogger"